/*  Reset  */

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* Variables */

:root {
    --dark:#333333;
    --red:#cc0000;
    --green:#006600;


}

/* general */



body {
    font-family: "Parisienne", cursive; 
    background-color:var(--dark);
}


li {
list-style-type:none;
}

a {
text-decoration:none;
}






/* INDEX */


.container {
    display:block;
    margin:auto;
    width:100dvw;
    height:auto;
    overflow:hidden;
    max-width:100vh;
    }


header {
    display:block;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:8vh;
    background-image:url("../images/fond_pierres.jpg");
    z-index:3;
    min-height:4rem;
 
    }



header ul {
    position:fixed;
     top:1.5rem;
    right:1vh;
 

}
     
header ul li {
    display:inline;
    padding-right:1.2rem;
    color:var(--dark);
    text-shadow: 0px 3px 3px rgba(255,255,255,0.5);
    font-family: "MedievalSharp", cursive;
    font-weight: 700;
    font-style: normal;
    font-size: clamp(1rem, 2vh, 3rem); 

    
}

header ul li:hover {
    text-decoration:underline;
    text-underline-offset: 0.75vh;
    cursor:pointer;
}



#corniche {
    position:absolute;
    bottom:0px;
    left:0px;
    height:18px;
    width:100%;
    z-index:2;
    background-image:url("../images/corniche.png");
}


#tete_lion {
    position:absolute;
    top:-5px;
    left:50%;
    margin-left:-5vh;
    width:10vh;
    height:10vh; 
    z-index:2;
    background-image:url("../images/lion3.png");
    background-size:cover;
    min-height:5rem;
    min-width:5rem;
}

/* Style ecriture machine */

.typed-text {
            color: white;
             font-family: "Parisienne", cursive; 
            font-weight: 400;
            font-style: normal;
            
}


.cursor {
            display: inline-block;
            width: 3px;
            margin-left: 4px;
            background: var(--teal);
}

.cursor.blink {
            animation: blink 0.8s ease-in-out infinite;
        }

@keyframes blink {

 0%,
 100% {
 background: var(--teal);
}

40%,
50% {
 background: transparent;
}
}

.big-text{

    position:absolute;
    top:12vh;
    left:100%;
    width:30dvw;
    height:70dvh;
    margin-left:-50dvw;
    font-size: 4rem;
}






#content {
    position:absolute;
    top:7vh;
    left:0px;
    width:100%;
    height:93vh;
    background-image:url("../images/venise_panorama.png");
    background-size:cover;
    background-position: center;
    z-index:1;
    overflow:hidden;
}



#parchemin1  {
    position:absolute;
    top:8vh;
    left:-120vh;
    width:50vh;
    height:70vh;
    background-image:url("../images/parchemin3.png");
    z-index:10;
    background-size:cover;
    transition-property: left;
    transition-duration: 1s;
    min-height:420px;
    min-width:300px;
}

#parchemin1.ouvert {

    left:0vh;

}




#parchemin2 {
    position:absolute;
    top:8vh;
    left:-120vh;
    width:50vh;
    height:70vh;
    background-image:url("../images/parchemin3.png");
    z-index:10;
    background-size:cover;
    transition-property: left;
    transition-duration: 1s;
    min-height:420px;
    min-width:300px;
}


#parchemin2.ouvert {

    left:0px;

}


form {

    position:absolute;
    top:25%;
    left:5%;
    width:100%;
    height:100%;

}



input[type="password"],
input[type="text"] {
    width: 60%;
    height: 9%;
    /* font-family: "Parisienne", cursive;  */
    /* font-size: clamp(1.1rem, 2vh, 1.6rem);*/ 
    font-size:1rem;
    background-color: transparent;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: solid 1px #333333;
    margin:-3px;
    padding-left:10px; 
    margin-bottom:-0.5rem;
   
}


::placeholder {
    font-family: "Parisienne", cursive; 
    font-size: clamp(1.1rem, 2vh, 1.6rem); 
    padding-left:10px;    
}


.titre_parchemin {
    width:50%;
    height:10%;
    margin-top:10%;
    font-size: clamp(2rem, 2vh, 3rem); 
    margin-left:5%; 
}

.titre_parchemin::first-letter {
  font-size:3rem;
  color:#990000;
    font-weight:bolder;
  padding:5px;
}




input[type="submit"] {
    position:absolute;
    width:17%;
    height:23%;
    background-image: url(../images/cachet.png);
    background-repeat: no-repeat;
    background-size: 100%;
    margin-left:60%;
    bottom:30%;
    right:20%;
}

input[type="submit"]:hover {
    position:absolute;
    width:17%;
    height:23%;
    background-image: url(../images/cachet2.png);
    background-repeat: no-repeat;
    cursor: pointer;
    background-size: 100%;
    margin-left:60%;
    bottom:30%;
    right:20%;
}


.cire {

    border: 0px solid white;
    background-color: transparent;
    margin-bottom:120px;
}




#mdp {
    color:var(--dark);
    font-size: clamp(1rem, 2vh, 2rem); 
    margin-left:0px;

}





#mdp:hover {
    color:var(--dark);
    font-size: clamp(1rem, 2vh, 2rem); 
    margin-left:0px;
    text-decoration:underline;
    text-underline-offset: 0.75vh;
}


#google {
    border-top:1px solid black;
    padding-top:20px;
    width:70%;
    left:10%;
    position:absolute;
    bottom:90px;
    color:var(--dark);
    font-size: clamp(1rem, 2vh, 2rem); 
    margin-left:0px;

}





.reponse_parchemin1 {
    position:absolute;
    bottom:25%;
    left:0px;
    color:var(--red);
    font-size: clamp(1rem, 2vh, 2rem); 
    margin-left:5%;
    font-weight:bold;
    width:55%;
    height:15%;
       
}





.reponse_parchemin2 {
    position:absolute;
    bottom:25%;
    left:0px;
    color:var(--red);
    font-size: clamp(1rem, 2vh, 2rem); 
    margin-left:5%;
    font-weight:bold;
    width:55%;
    height:15%;
    
}





#close_parchemin1 {
    background-image: url(../images/close.png);
    position:absolute;
    background-size: 100%;
    width:1.5rem;
    height:1.5rem;
    top: 7%;
    right:10%;
    opacity:0.5;
}



#close_parchemin2 {
    background-image: url(../images/close.png);
    position:absolute;
    background-size: 100%;
    width:1.5rem;
    height:1.5rem;
    top: 7%;
    right:10%;
    opacity:0.5;
}

#close_parchemin1:hover, #close_parchemin2:hover {
 cursor:pointer;
 opacity:1;
}


/* MEDIA QUERIES */

@media only screen and (max-width:600px)
{

    #tete_lion {   
        left:3rem;
 
    }

}

@media only screen and (max-width:1600px)
{

  .big-text{

    position:absolute;
    top:12vh;
    left:100%;
    width:45dvw;
    height:70dvh;
    margin-left:-50dvw;
    font-size: 3.6rem;
}
  
    

}



@media only screen and (max-width:1250px)
{

  .big-text{

    position:absolute;
    top:12vh;
    left:100%;
    width:70dvw;
    height:70dvh;
    margin-left:-80dvw;
    font-size: 2.8rem;
}
  
    

}








@media only screen and (max-width:300px)
{

    #tete_lion {   
        left:2rem;
 
    }

 

}

@media only screen and (max-height:300px)
{


#parchemin2 {
    top:9vh;
    min-height:15rem;
    min-width:15rem;
}

#parchemin1 {
    top:9vh;
    min-height:15rem;
    min-width:15rem;
}


.titre_parchemin {
    width:50%;
    height:10%;
    margin-top:10%;
    font-size: clamp(1rem, 2vh, 2rem); 
    margin-left:5%; 
  
}




}








@media only screen and (orientation : portrait) 
{

}