/***************** BOOTSTRAP *****************/

.disable-select {
    user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
}




@font-face {
    font-family: Mont;
    src: url("../fonts/CoolveticaRgRegular/font.woff");
   
}

/***************** BOOTSTRAP *****************/


/***************** CURSOR *****************/
.p {
  position:absolute;
  z-index: -1;
  top:-6px;
  left:-3px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:radial-gradient(rgba(0,255,0,.5),rgba(0,255,0,0));;
}
/***************** CURSOR *****************/







/***************** MENU *****************/

#menu{
    background-color: #181818;
    height: 100vh;
    display :flex;
    flex-flow: column nowrap;
    justify-content: center;
    width: 8.5em;
    overflow-x: hidden;
    text-align: center;
    position: fixed;
}

#logo{
    display: flex;
    flex-wrap: wrap;
    position: relative ;
    top: 0%;
    left: 0;
    padding-top: 15%;
    margin-left: 21%;
    border-bottom: solid 1px rgba(194, 199, 196, 0.301);
    padding-bottom : 1.25em ;

}

.identity{
    margin-bottom: 5em;
    padding-bottom: 4%;
    font-size: 1.1em;
    background-color: black;
  }

.identity h4{
  padding-left: 5%;
  padding-right: 5%;
}
.identity p{
  font-size: 13px;
  color: #909096;
}

.sidenav a::before {
    top: 0; bottom: 0; left: 0; 
    height: 100%; width: 0%;
    transition: 0.3s ease-out;
  }
  .sidenav a:hover::before {
    width: 100%;
  }

  .links{
    border-top: solid 1px #282828;
  }

  .sidenav{
    margin-bottom: 7em;
    color: #909096;
  }

  .sidenav a {
    padding : 1.25em 0;
    text-decoration: none;
    color: #909096;
    display: block;
    font-size: 15px;
    transition: 0.2s;

  }
  #lasta{
      border-bottom:solid 1px #282828;
  }
  
  .sidenav a:hover {
    color:rgb(9, 241, 9);
    transition: 0.2s 0.1s;

  }

.social{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-evenly;
    margin-top: 2em;
}  



@media all and (max-width: 1000px){
    #menu{
      display: none;
      overflow-x: hidden;
    }
    .toggleBurgerBtn{
      display: block;
      overflow-x: hidden;
    }

    .toggleBurgerMenu{
    display: none;
    overflow-x: hidden;
  
  }


}

@media all and (min-width: 1000px){
  #menu{
    display: block;
    overflow-x: hidden;
  }
  .toggleBurgerBtn{
    display: none;
    overflow-x: hidden;
  }
  .toggleBurgerMenu{
    display: none;
    overflow-x: hidden;
    
  }

}







            /************** BURGER  ******************/

            .toggleBurgerBtn{
              background-color: black;
              position: absolute;
            }
            .burgerIdentity{
              background-color: black;
              display: flex;
              align-items: center;
              flex-direction: column;
            }
            .burgerIdentity p{
              font-size: 10px;
              margin: 6px;
              color: #909096;
            }
            .burgerIdentity h4{
              font-size: 12px;
              margin: 6px;
              
            }
            
            .toggleBurgerMenu .linksBurger{
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;
              background-color: #181818;
            }

            .toggleBurgerMenu .linksBurger a{
              display: flex;
              padding: 20px;
              color: #909096;
              text-decoration: none;
              justify-content: center;
              width: 100vw;
            }

            .socialBurger{
              display: flex;
              justify-content: center;
              padding-bottom: 8px;              
              
            }

            .socialBurger a{
              text-decoration: none;
              color: #909096;
            }

            #logoInBurger{
              padding-top: 15px;
              padding-bottom: 3px;
            }
            



            
            







            





            .fade-in {
              opacity: 1;
              animation-name: fadeInOpacity;
              animation-iteration-count: 1;
              animation-timing-function: ease-in;
              animation-duration: 1s;
            }
            
            @keyframes fadeInOpacity {
              0% {
                opacity: 0;
              }
              100% {
                opacity: 1;
              }
            }

            @keyframes fadeOutOpacity {
              0% {
                opacity: 1;
              }
              100% {
                opacity: 0;
              }
            }
            






        

            label{
               display:flex;
               flex-direction:column;
               flex-wrap: wrap;
               width:70px;
               cursor:pointer;
               position: absolute;
               top: 10px;
               left: 10px;
               background-color: black;
               width: 40px;
               padding-bottom: 5px;
               padding-top: 5px;
               padding-left: 15px;
               
             }
             
             label span{
               background: #fff;
               
               height:5px;
               margin: 5px 0;
               transition: .4s  cubic-bezier(0.68, -0.6, 0.32, 1.6);
             
             }
             
             
             span:nth-of-type(1){
               width:25px;
               
             }
             
             span:nth-of-type(2){
               width:25px;
             }
             
             
             span:nth-of-type(3){
               width:25px;
              
             }
             
             
             input[type="checkbox"]{
               display:none;
             }
             
             
             input[type="checkbox"]:checked ~ span:nth-of-type(1){
               transform-origin:bottom;
               transform:rotatez(46deg) translate(8px,0px);
               width: 25px;

             }
             
             
             input[type="checkbox"]:checked ~ span:nth-of-type(2){
               
               transform-origin:top;
               transform:rotatez(-45deg);
               width: 50px;
             }
             
             
             input[type="checkbox"]:checked ~ span:nth-of-type(3){
               
               transform-origin:bottom;
               width: 25px;
               transform: translate(20px,-11px) rotatez(45deg);
             
             }
            
            /************** BURGER  ******************/





/***************** MENU *****************/







/***************** HEADER *****************/

.header{
    padding-top: 120px;
    padding-left: 9vw;
    overflow-x:hidden;
    max-width: 100vw;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    

}

.header #spec{
  color: #909096;
  font-size: min(4vw, 2vh) ;
  padding-left: 2%;


}


.yayab{
  position: absolute;
  top: 20vh;
  right: 1vw;
  justify-content: right;
  font-size: 10em;
  color: rgba(255, 255, 255, 0.158);
}


.bienvenue{
  overflow-x:hidden;
  max-width: 100vw;
  font-size: min(10vw, 9vh) ;
  color: rgb(255, 255, 255);
  margin-left: 2%;
  z-index: 99;
  width: 100vw;
  
  
}

.bienvenue h1{
  overflow-x:hidden;
  max-width: 100vw;
}





            /*******************SCROLL DOWN ****************/
            #scroll_down{
              display: flex;
              justify-content: center;
              width: 90vw;
              padding-right: 5vw;
              
            }
            .container {
              position: relative;
              width: 24px;
              height: 24px;
              padding-bottom: 20vh;
              padding-top: 10vh;
            }
            
            .chevron {
              position: absolute;
              width: 28px;
              height: 8px;
              opacity: 0;
              transform: scale3d(0.5, 0.5, 0.5);
              animation: move 3s ease-out infinite;
            }
            
            .chevron:first-child {
              animation: move 3s ease-out 1s infinite;
            }
            
            .chevron:nth-child(2) {
              animation: move 3s ease-out 2s infinite;
            }
            
            .chevron:before,
            .chevron:after {
              content: ' ';
              position: absolute;
              top: 0;
              height: 100%;
              width: 51%;
              background: rgb(66, 255, 125);
            }
            
            .chevron:before {
              left: 0;
              transform: skew(0deg, 30deg);
            }
            
            .chevron:after {
              right: 0;
              width: 50%;
              transform: skew(0deg, -30deg);
            }
            
            @keyframes move {
              25% {
                opacity: 1;
            
              }
              33% {
                opacity: 1;
                transform: translateY(30px);
              }
              67% {
                opacity: 1;
                transform: translateY(40px);
              }
              100% {
                opacity: 0;
                transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
              }
            }
            
            .text {
              display: block;
              margin-top: 75px;
              margin-left: -30px;
              font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
              font-size: 12px;
              color: #fff;
              text-transform: uppercase;
              white-space: nowrap;
              opacity: .25;
              animation: pulse 2s linear alternate infinite;
            }
            
            @keyframes pulse {
              to {
                opacity: 1;
              }
            }

            /******************SCROLL DOWN ****************/
          /***********************welcome******************/


          /* effect-shine */
          .effect-shine:hover {
            -webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);
            -webkit-mask-size: 200%;
            animation: shine 2s infinite;
          }

          @-webkit-keyframes shine {
            from {
              -webkit-mask-position: 150%;
            }
            
            to {
              -webkit-mask-position: -50%;
            }
          }

          /***********************welcome******************/

/***************** HEADER *****************/


/*****************PRESENTATION*************/

.presentation{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-width: 90vw;
  margin-right: 10vw;
  margin-left: 10vw;
  scroll-margin-top: 55vh;
  
  

}

#whoami{
  overflow-x:hidden;
  width: fit-content;
  margin-top: 30vh;
  margin-left: 20vw;
  font-size: min(7vw, 6vh) ;
  color: rgb(66, 255, 125);
  flex-wrap: wrap;
  
 
  

}

.desc{
  overflow-x:hidden;
  max-width: 90vw;
  font-size: 1.1rem;
  justify-content: center;
  flex-wrap: wrap;
  padding-left: 5vw;
  margin-left: 10vw;
  margin-right: 10vw;


}


.qui{
  position: absolute;
  letter-spacing: 3px;
  top: 120%;
  right: 1vw;
  justify-content: right;
  font-size: 10em;
  color: rgba(255, 255, 255, 0.158);
}
/*****************PRESENTATION*************/



/****************COMPETENCES***************/



.competences{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  max-width: 90vw;
  margin-right: 10vw;
  margin-left: 10vw;
  scroll-margin-top: 40vh;
}


.list{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  max-width: 60vw;

}

.cards{
  display: flex;
  flex-wrap: wrap;
  /* margin-left: 10vw; */

}

.skills{
  position: absolute;
  letter-spacing: 3px;
  top: 160%;
  right: 1vw;
  justify-content: right;
  font-size: 10em;
  color: rgba(255, 255, 255, 0.158);
}

          /******* flipping card *********/
                .icons{
                  height: 4vh;
                  width: 4vh;
                }
                .back_web{
                  background-image: url("../img/web_blur.jpg");
                  background-size: cover;
                  background-position: center;
                  display: flex;
                  position: relative;
                  flex-wrap: wrap;
                  justify-content: center;
                }
                .web{
                  background-image: url("../img/web.jpg");
                  background-size: cover;
                  background-position: center;
                }
                .ops{
                  background-image: url("../img/ops.jpg");
                  background-size: cover;
                  background-position: center;
                }
                .back_ops{
                  background-image: url("../img/ops_blur.jpg");
                  background-size: cover;
                  background-position: center;
                  
                }
                .soft{
                  background-image: url("../img/Difference.jpg");
                  background-size: cover;
                  background-position: center;
                }

                .back_soft{
                  background-image: url("../img/Difference_blur.jpg");
                  background-size: cover;
                  background-position: center;
                }

                .top3{
                  background-image: url("../img/3734.jpg");
                  background-size: cover;
                  background-position: center;
                }

                .back_top{
                  background-image: url("../img/3734_blur.jpg");
                  background-size: cover;
                  background-position: center;
                }

                .top2{
                  display: flex;
                  flex-direction: row;
                  justify-content: space-around;
                  text-align: center;
                }

                /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
                .flip-card {
                  background-color: transparent;
                  margin: 8px;
                  width: max(min(200px), 20vw, 15vw);
                  height: max(min(120px), 12vw, 8vw);
                  

                }

                /* This container is needed to position the front and back side */
                .flip-card-inner {
                  position: relative;
                  width: 100%;
                  height: 100%;
                  text-align: center;
                  transition: transform 0.4s;
                  transform-style: preserve-3d;
                  border: 1px solid rgb(66, 255, 125);
                }

                /* Do an horizontal flip when you move the mouse over the flip box container */
                .flip-card:hover .flip-card-inner {
                  transform: rotateY(180deg);
                  transform-style: preserve-3d;
                }

                /* Position the front and back side */
                .flip-card-front, .flip-card-back {
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  -webkit-backface-visibility: hidden; /* Safari */
                  backface-visibility: hidden;
                  transform-style: preserve-3d;
                }

                /* Style the front side (fallback if image is missing) */
                .flip-card-front {
                  background-color: #1d1d1d;
                  color: rgb(255, 255, 255);
                  display: flex;
                  text-align: center;
                  justify-content: center;
                  align-items: center ;
                }

                /* Style the back side */
                .flip-card-back {
                  display: flex;
                  justify-content: center;
                  background-color: rgba(58, 58, 58, 0.555);
                  color: white;
                  transform: rotateY(180deg);
                  flex-direction: column;
                  flex-wrap: wrap;
                  font-size: max(min(30%),0.7vw);
                  text-align: center;
                }

 
          /******* flipping card *********/


          
#myCanvas{
  height : 100%;
  margin-right: 3vw;
}
            
/****************COMPETENCES***************/




/****************REALISATIONS**************/

.works{
  position: absolute;
  letter-spacing: 3px;
  top: 280%;
  right: 1vw;
  justify-content: right;
  font-size: 10em;
  color: rgba(255, 255, 255, 0.158);
  
}

.the_chat{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
}

.technos img{
  height: max(min(3vw), 5vw);
  width: max(min(3vw), 5vw);
  padding-bottom: 6vh;
}

.IoT{
  padding-top: 4vw;
}

.the_projet{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  justify-content: space-around;
}
.work{
  display: flex;
  justify-content: center;
  flex-direction: column;
  flex-wrap: wrap;
  max-width: 90vw;
  margin-right: 10vw;
  margin-left: 10vw;
  scroll-margin-top: 30vh;
}

#chatbox{
  height: 80vh;
}

#chat-page{
  right: 4vw;
}

.explaination{
  overflow-x:hidden;
  font-size: 1.1rem;
  width: 50vw;
  padding-left: 5vw;
  padding-bottom: 3vh;
}

.flex-center{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/****************REALISATIONS**************/



/****************FORMATIONS**************/

.study{
  position: absolute;
  letter-spacing: 3px;
  top: 500%;
  right: 1vw;
  justify-content: right;
  font-size: 10em;
  color: rgba(255, 255, 255, 0.158);
  
}

.formations{
  display:flex ;
  justify-content: center;
  align-items: center;
}

/****************FORMATIONS**************/




/****************CONTACT**************/

.study{
  position: absolute;
  letter-spacing: 3px;
  top: 500%;
  right: 1vw;
  justify-content: right;
  font-size: 10em;
  color: rgba(255, 255, 255, 0.158);
  
}


.myContact{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 90vw;
  margin-right: 10vw;
  margin-left: 10vw;
  scroll-margin-top: 30vh;
  padding-bottom: 20vh;
}

.contactForm{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 8vh;
  margin-bottom: 30vh;
  width: 60vw;
  height: 65vh;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 1px;
  background-color: #1d1d1d;

  /* border: 1px solid rgba(66, 255, 126, 0.11); */

}

.contactForm input{
  /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
  border-radius: 1px;
  background-color: #2b2b2b;
  border: none;
  color: rgb(255, 255, 255);
  padding-left: 0.5vw;
}
.contactForm button{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 10vw;
  height: 5vh;
  font-size: min(2vw, 1vw);
  background-color: rgb(66, 255, 125);
  color: rgb(255, 255, 255);
  right: 4vw;
}


.contactForm label{
  display: none;
}

.submitBtn{
  display: flex;  
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-bottom: 1vh;
  margin-top: 4vh;

}

.names{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
  width: 55vw;
  padding-top: 2vh;
}

.names input{
  width: 25vw;
  height: 5vh;
  font-size: 1.1rem;
}

.infos{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
  width: 55vw;
  margin-top: 2vh;
}

.infos input{
  width: 25vw;
  height: 5vh;
  font-size: 1.1rem;
}

.messageArea{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
  width: 55vw;
  margin-top: 2vh;
  color: rgb(255, 255, 255);
}

.messageArea textarea{
  width: 53vw;
  max-width: 53vw;
  height: 30vh;
  max-height: 30vh;
  font-size: 1.1rem;
  background-color: #2b2b2b;
  border: none;
  color: rgb(255, 255, 255);
  padding-left: 0.5vw;


}



textarea:focus, input:focus{
  outline: none;
}

.input{
  border: 0;

}
.input ~ .border {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
}

.input:focus ~ .border {
  width: 100%;
  transition: 0.5s;
}
.border {
  border: 1px solid rgb(66, 255, 125);
}

.out {
  position: relative;
}

.powered{
  color: rgba(255, 255, 255, 0.158);
  
}

.powered a{
  color: rgba(255, 255, 255, 0.158);

}

.contact{
  position: absolute;
  letter-spacing: 3px;
  top: 550%;
  right: 1vw;
  justify-content: right;
  font-size: 10em;
  color: rgba(255, 255, 255, 0.158);
  
}
/****************CONTACT**************/


/****************FOOTER**************/

.footer{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100vw;
  color: rgba(255, 255, 255, 0.301);
  background-color: #181818;
}

.footerContent{
  display: flex;
  flex-direction: column;
  margin-left: 10vw;
}

.footerNav{
  display: flex;
  flex-direction: column;
  padding-top: 6vh;
}

.footerNav a{
  color: rgba(255, 255, 255, 0.301);
  text-decoration: underline;
}

.how{
  display: flex;
  justify-content:center ;
  width: 100%;
  text-align: center;
}

.how p {
  padding-right: 7vw;
}

.clickables{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding-bottom: 6vh;
}

.logoFooter{
  height: 17vh;
  width: 17wh;
  padding-top: 2vh;
}
/****************FOOTER**************/

/***************** GLOBAL *****************/

.below{
    z-index: -1;
}


body{
  max-width: 100vw;
  margin: 0%;
  font-family: Mont;
  color: white;
  background-color: #1d1d1d;
  overflow-x: hidden;
  height: 100vh;
}

@font-face {
  font-family: Citation;
  src: url("../fonts/Coustard-Regular.ttf");
}

.citation{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: column;
  font-family: Citation;
  font-size: 3em;
  padding-left: 3vw;
  padding-top: 7vh;

}

.author{
  display: flex;
  justify-content: flex-end;
  padding-left: 20vw;
  
}



/***************** GLOBAL *****************/