*{
    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 var(--text-color);
  }
  
  .close {
    color: var(--text-color);
    float: right;
    font-size: 3vh;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: var(--text-color);
    text-decoration: none;
    cursor: pointer;
  }

  .textabout{
    font-family: "basier";
    font-size: 2.5vh;
    color: var(--text-color);
  }




  .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;
    
    }















    @media screen and (min-width: 500px){

        .case
        {
            /* background-color: tomato; */
        width: 100%;
        position: fixed;
        top: 22.5vh;
        /* left: 40%;   */
        left: 65px;   }

    h1{    font-family: "variable";
        font-variation-settings: 'wght' 700, 'wdth' 85;
        /* font-size: 11.6vh; */
        font-size: 10.5vh;
        margin-bottom: -3.6vh;
        position: relative;
        top: 0px;
        opacity: 0;
        transition:  0.5s;
        color: var(--text-color);
      
        /* transition:  0.5s cubic-bezier(.32,.83,.76,1.01); */
       
    }
    
    h1:hover{
        font-variation-settings: 'wght' 800, 'wdth' 700;
        opacity: 1;
 
        transition:  0.3s cubic-bezier(.32,.83,.76,1.01);
        
        }
        
        
        .img{

            position: fixed;
            top: 55%;
            left: 80%;
            transform: translate(-50%, -50%);
            z-index: -1;
            height: 65%;
            opacity: 0;
     
         }   
        .a:hover ~ #ia{
            opacity: 1;
   
        }
        .b:hover ~ #ib{
            opacity: 1;
        }
        .c:hover ~ #ic{
            opacity: 1;
        }
        .d:hover ~ #id{
            opacity: 1;
        }
        .e:hover ~ #ie{
            opacity: 1;
        }
        .f:hover ~ #if{
            opacity: 1;
        }
        .g:hover ~ #ig{
            opacity: 1;
        }


    }

    @media screen and (min-width: 1281px){

        .case
        {
        left: 5.07vw;   }
    }


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

        .case
        {position: fixed;
            top: 160px;
        left: 13%;   }

        h1{    font-family: "variable";
            font-variation-settings: 'wght' 200, 'wdth' 85;
            font-size: 16vw;
            margin-bottom: -9%;
            position: relative;
            top: 0px;
            color: var(--text-color);
        }
     
        .img{

            position: fixed;
            top: 55%;
            left: 80%;
            transform: translate(-50%, -50%);
            z-index: -1;
            height: 65%;
            opacity: 0;
     
         }   

        }