*{
    font-family: sans-serif, "Quicksand";
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}




#background-video {
height: 100vh;
width: 100vw;
object-fit: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}

.rocherflottant {
	display: block;
	animation: animate 10s ease-in-out infinite;
	margin-left: auto;
    margin-right:auto;
    display: flex;
    width: 29%;
}

audio {
    margin: auto;
    display: block;
    mix-blend-mode: color-burn;
    position: relative;
    top: 800px;
}


/*----------------------BOUTONS CREDITS ET MENTIONS-------------------*/

.boutoncontact{
    font-family: "Quicksand";
}

.boutonmentions{
    font-family: "Quicksand";
    
}

.boutoncredits{
    font-family: "Quicksand";

}


.divmentions{
        display: contents;
        z-index: 30;
}


/*----------------------ROCHER ANIMATION---------------------*/

@keyframes animate{
    0%, 100%
    {
        transform: translateY(-5px);
    }
    50%
    {transform: translateY(40px);}
}



/*---------------------ROCHER CLIQUABLE---------------------*/

        .popuprocher{
            margin-block: auto;
            margin-left: -500px;
            color: white;
            font-weight: bolder;
            border-radius: 100px;
            padding: 200px;
            text-decoration: none;
            margin-top: 115px;
            font: status-bar;
            font-size: inherit;
            opacity: 0.5;
        }

        .popuprocher:hover{
            color: white;
            opacity: 1;
            font-size: 18px;
        }



/*------------------------LA MAP-----------------------*/


        .content a {
            padding: 15px;
            background-color: #fff;
            border-radius: 3px;
            text-decoration: none;
            color: darkslategray;
            font-family: "Kolker Brush", cursive;

        }

        .modal {

            position: fixed;
            inset: 0;           
            opacity:0.97; 
            display: none;
            align-items: space-around;
            justify-content: space-around;
            flex-direction: column;
        }

        .content {
            position: absolute;
            background-color: darkslategray;
            padding:20px;
            border-radius:10px;     
            padding-left: 50px;
            padding-right: 50px; 
            margin-left: 1437px;
            margin-bottom: -550px;
            z-index: 100;
        }

        .modal:target {
            display: flex;
        }


        .background{
            object-fit: cover !important;
        }

        .content h2{
            padding-bottom: 35px;
            justify-content: center;
            font-family: "Kolker Brush", cursive;
        }

        .content a{
            appearance: auto;
            margin-left: 100px;
            font-family: "Kolker Brush", cursive;
        }       




/*------------------------------PARTIE LOADING--------------------------------*/




.loading{
    z-index: 100;
    position: relative;
    bottom: 42em;
}



h1 {
    z-index: 100;
  margin: 0;
  padding: 0;
  font-family: ‘Quicksand’, sans-serif;
  font-weight: 100;
  font-size: 1.1em;
  color: #6A455D;
  text-align: center;
  font-weight: bold;
}

.let3, .let8, .let12, .let19, .let22, .let28, .let31{
    font-family: Quicksand;
    opacity: 0!important;
}

span {
  position: relative;
  top: 0.63em;  
  display: inline-block;
  text-transform: uppercase;  
  opacity: 0;
  transform: rotateX(-90deg);

}

.let1 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 1.2s;
}

.let2 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 1.3s;
}

.let3 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 1.4s;
}

.let4 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 1.5s;

}

.let5 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 1.6s;
}

.let6 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 1.7s;
}

.let7 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 1.8s;
}  

.let8 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 1.9s;  
}


.let9 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 2s;
}

.let10 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 2.1s;
}

.let11 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 2.2s;
}

.let12 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 2.3s;

}

.let13 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 2.4s;
}

.let14 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 2.5s;
}

.let15 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 2.6s;
}  

.let16 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 2.7s;  
}

.let17 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 2.8s;
}

.let18 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 2.9s;
}

.let19 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 3s;
}

.let20 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 3.1s;

}

.let21 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 3.2s;
}

.let22 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 3.3s;
}

.let23 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 3.4s;
}  

.let24 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 3.5s;  
}


.let25 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 3.6s;
}

.let26 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 3.7s;
}

.let27 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 3.8s;
}

.let28 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 3.9s;

}

.let29 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 4s;
}

.let30 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 4.1s;
}

.let31 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 4.2s;
}  

.let32 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 4.3s;  
}


.let33 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 4.4s;
}

.let34 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 4.5s;
}

.let35 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 4.6s;
}

.let36 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 4.7s;

}

.let37 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 4.8s;
}

.let38 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 4.9s;
}

.let39 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 5s;
}  

.let40 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 5.1s;  
}

.let41 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 5.2s;
}

.let42 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 5.3s;
}

.let43 {
  animation: drop 2.5s ease-in-out infinite;
  animation-delay: 5.4s;
}  







@keyframes drop {
    10% {
        opacity: 0.5;
    }
    20% {
        opacity: 1;
        top: 3.78em;
        transform: rotateX(-360deg);
    }
    80% {
        opacity: 1;
        top: 3.78em;
        transform: rotateX(-360deg);
    }
    90% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
        top: 6.94em
    }
}






/*------------------PARTIE RESPONSIVE-------------------*/

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

    .rocherflottant{
        display: flex;
            margin-left: auto;
    margin-right:auto;
        width:auto;
        justify-content: center;

    }
  }

    .popuprocher{
            margin-block: auto;
            color: white;
            font-weight: bolder;
            padding: 200px;
            text-decoration: none;
            font: status-bar;
            font-size: inherit;
            opacity: 0.5;
    }





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

    .rocherflottant{
        display: flex;
    margin-left: auto;
    margin-right:auto;
        width:10%;
        justify-content: center;

    }
 
    .popuprocher{
            margin-block: auto;
            color: white;
            font-weight: bolder;
            padding: 60px;
            text-decoration: none;
            font: status-bar;
            font-size: inherit;
            opacity: 0.5;
    }

    .rocher{
                width: 628%;
        margin-right: 300px
    }

 }