*{
    margin: 0%;
    padding: 0%;
    border: 0%;
    /* --main-color:  rgb(255, 248, 239); */
    --main-color:  rgb(236, 231, 222);
    /* --text-color:  rgb(255, 72, 0); */
    --text-color:  rgb(255, 92, 28);
    
}

/* @media screen and (max-width: 769px){
    *{
        cursor: auto;
    }}
    @media screen and (min-width: 769px){
        *{
            cursor: auto; 
        }} */
        a, a:hover, a:visited, a
        {
            color:#000;
            text-decoration:none;
        }
        body{
            background-color:var(--main-color);
            overflow-x: hidden;
        }
        
            .acceuil{
                position: fixed;
                top: 2.9vh;
                left: 9.3vh;
                z-index: 10;}
            .logo{
                position: fixed;
                top: 2.9vh;
                right: 9.3vh;
                z-index: 10;}
        
                .langue{
                    position: fixed;
                    bottom: 2.9vh;
                    left: 9.3vh;
                    z-index: 10;}
        
            .contact{
                position: fixed;
                bottom: 2.9vh;
                right: 17vh;
                z-index: 10;}
            .about{
                position: fixed;
                bottom: 2.9vh;
                left: 9.3vh;
                z-index: 10;}
            .insta{
                position: fixed;
                bottom: 2.9vh;
                right: 9.3vh;
                text-align: right;
                z-index: 10;
            }
        
            button {
                background-color: #0081b000;
                border: none;
            }
        
        
            .textheader{    font-family: "variable";
                font-variation-settings: 'wght' 700;
                transition: 500ms;
                font-size: 3.3vh;
                color: var(--text-color);
                cursor: pointer;
          
            }
            .textheader2{    font-family: "variable";
                font-variation-settings: 'wght' 400;
                font-size: 3.3vh;
                color: var(--text-color);
                cursor: pointer;
            }
         
        
            .textheader:hover{
                font-variation-settings: 'wght' 800;
                }
        
        
        
                       
                        .box {
                            width: 50vw;     
                                 
                        }
                            #contact {
                                bottom: 10vh;
                                transform: translate(150%);
                                transition: 0.5s cubic-bezier(.77,0,.18,1);
                                position: fixed;
                                right: 9.3vh;
                            }
                            #merci {
                                top: 10vh;
                                transform: translate(150%);
                                transition: 0.5s cubic-bezier(.77,0,.18,1);
                                position: fixed;
                                right: 9.3vh;
                            }     
                            /* #bio {
                                top: 10vh;
                                transform: translate(-840px);
                                transition: 0.5s cubic-bezier(.77,0,.18,1);
                                position: fixed;
                                left: 9.3vh;
                            }     */
        
                            .joindre1{font-family: "basier";
                                /* color: rgb(255, 249, 234); */
                                            font-size: 2.3vh;
                                            position: absolute;
                                            bottom: 0%;
                                            right: 0%;
                                            text-align: right;
                                           
                                            color: var(--text-color);
                                }
                            .joindre2{font-family: "basier";
                                /* color: rgb(255, 249, 234); */
                                            font-size: 2.3vh;
                                            position: absolute;
                                            top: 0%;
                                            right: 0%;
                                            text-align: right;
                                     
                                            color: var(--text-color);
                                }
                                /* .joindre3{font-family: "basier";
                                                width: 100%;
                                
                                                font-size: 25px;
                                                position: absolute;
                                                top: 0%;
                                                left: 0%;
                                               
                                                color: var(--text-color);
                                    }
                                    .joindre4{font-family: "basier";
                                        font-size: 1.5vw;
                                                    padding: 65px;
                                                    position: absolute;
                                                    bottom: 0%;
                                                    left: 0%;
                                                    text-align: left;
                                                    color: var(--text-color);
                                                    z-index: 100;
                                        } */
        
           
        
                                        .modal {
                                            display: none; 
                                            position: fixed; 
                                            width: 100vw;
                                            height: 100vh; 
                                            z-index: 1000; 
                                            top: 0px;
                                            left: 0px;
                                            overflow: auto; 
                                            background-color: rgba(218, 211, 206, 0.288);
                                          }
                                          
                                          .modal-content {
                                            width: 60%;
                                            position: absolute;
                                            top:50%;
                                            left:50%;
                                            transform: translate(-50%,-50%);
                                            background-color: var(--main-color);
                                            margin: auto;
                                            padding: 3vh;
                                            border: 0.3vh solid rgb(20, 20, 20);;
                                          }
                                          
                                          .close {
                                            color: rgb(20, 20, 20);
                                            float: right;
                                            font-size: 3vh;
                                            font-weight: bold;
                                          }
                                          
                                          .close:hover,
                                          .close:focus {
                                            color: rgb(20, 20, 20);
                                            text-decoration: none;
                                            cursor: pointer;
                                          }
                                        
                                          .textabout{
                                            font-family: "basier";
                                            font-size: 2.5vh;
                                            color: rgb(20, 20, 20);
                                          }       
        
        
        
          .fleche {font-family: "variable";
            font-variation-settings: 'wght' 200, 'wdth' 85;
            color: var(--text-color);
            position: fixed;
            bottom: 0px;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            z-index: 100;
            font-size: 1.5vh;
        }
        
        @media screen and (max-width: 700px){ .en{opacity: 0;} }
        
        
        @media screen and (min-width: 500px){
                #idmerci:hover ~ #merci{
                    transform: translate(0px);
                }
                #idcontact:hover ~ #contact{
                    transform: translate(0px);
                }
                #idbio:hover ~ #bio{
                    transform: translate(0px);
                }
                #idabout:hover ~ #about{
                    transform: translate(0px);
                }
            }
        
                        
        @media screen and (max-width: 500px){
        
        
            .acceuil{
                top: 1.5vh;
                left: 4vh;
        }
            .logo{
                top: 1.5vh;
                right: 4vh;
         }
            .contact{
                bottom: 1.5vh;
                right: 8vh;
        }
            .about{
                bottom: 1.5vh;
                left: 4vh;
        }
            .insta{
                bottom: 1.5vh;
                right: 4vh;
         }
        
        
            #contact {
                bottom: 8vh;
                transform: translate(150%);
                right: 4vh;
            }
            #merci {
                top: 8vh;
                transform: translate(200%);
                right: 4vh;
            }     
            .joindre1{
                            font-size: 2vh;
                }
            .joindre2{
                            font-size: 2vh;
                }
        
              .move{
                -webkit-animation: moveall 5s;
                animation: moveall 10s;
              }
        
            .textheader{    font-family: "variable";
            font-variation-settings: 'wght' 700;
            transition: 0ms;
            font-size: 2.5vh;
            }
            .textheader:hover{
            font-variation-settings: 'wght' 700;
            color: rgba(255, 0, 0, 0);
            -webkit-text-stroke: 0.2vw var(--text-color);
            }
                
              @keyframes moveall {
                0%   {transform: translate(150%); }
                10%  {transform: translate(0vw); }
                90%  {transform: translate(0vw);}
                100% {transform: translate(150%); }
              }
        }
        
        
        @font-face {
            font-family: 'basier'; 
            src: url(font/Syne-Regular.ttf);
            font-style: normal;
            font-weight: 100;
            
            }
         
        @font-face {
                font-family: "variable"; 
                src: url("font/Syne[wght].ttf");
                font-style: normal;
                font-weight: 400;
            
            }
        


















.video {
    width: 100%;
    position: fixed;
z-index: 1;
}
.wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    width:auto;
    position:fixed;
    width:100%;
    height: 100%;
    overflow: scroll;
}
.playpause {
    position: fixed;
    text-align: center;
    z-index: 100;
    cursor: pointer;
}
#play{
    font-size: 4vh;
}


.grid{
    display: grid;
    position: absolute;
    top: 0%;
    grid-template-columns: repeat(4, 1fr);
    /* grid-column-gap:3%; */
    grid-row-gap:1.5%;
    z-index: 50;

}
#hide{
    width: 90%;
    height: 100vh;
    grid-column-start: 1;
    grid-column-end: 5;
}

.course{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column-start: 1;
    grid-column-end: 5;
}
#course{
    width: 90%;

}
#croix{
    width: 60%;
    margin-top: 70%;
    grid-column-start: 3;
    grid-column-end: 5;

}
#poubelle{
    width: 40%;
    margin-top: 40%;
    grid-column-start: 2;
    grid-column-end: 4;

}
#rhino{
    width: 55%;
    margin-top: 40%;
    grid-column-start: 3;
    grid-column-end: 5;

}
#pleinpied{
    width: 70%;
    margin-top: 40%;
    grid-column-start: 2;
    grid-column-end: 4;

}
#hide2{
    width: 90%;
    height: 100vh;
    grid-column-start: 1;
    grid-column-end: 5;
}