/* Background animation*/

html{
    scroll-behavior: smooth;
    
}

.bg {
  width: 100%;
  height: 100%;
  background-size: 150% 150%;
  background-image: linear-gradient(
        -45deg, 
        rgb(45, 67, 181) 0%, 
        rgb(5, 6, 14) 10%, 
        rgb(45, 67, 181) 70%, 
        rgb(2, 2, 5) 100%
  );  
  animation: AnimateBG 20s ease infinite;
}

@keyframes AnimateBG { 
  0%{background-position:0% 25%}
  50%{background-position:100% 50%}
  100%{background-position:0% 25%}
}

/* Header */

#titre_header {
    color: white;
    font-size:28px;
    align-content: left;
    font-weight: bold;
    line-height: 45px;
    margin-top: 70px;
    margin-left: 15px;
}



body{
    display: flex;
    flex-direction: column;
    align-content: left;
    width: 100vw;
    height: 100vh;
    font-family: 'Ubuntu', sans-serif;
    padding: 0;
    margin: 0;
}

.sentence_header {
    color: white;
    font-size: 15px;
    font-family: 'Ubuntu', sans-serif;
    line-height: 25px;
    margin-left: 15px;
    width: 350px;

}

.colorfull {
    color: transparent;
    background-image: linear-gradient(to left, rgb(249, 81, 238), rgb(246, 246, 125)) ;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: color-change 10s linear infinite;
    -webkit-background-size: 500%;
    background-size: 500%
}

.link{
    color: white
}

  @keyframes color-change {
    0% { background-position: 0 100% ; }
    50% { background-position: 100% 0 ;  }
    100% { background-position: 0 100% ;  }
  }

  h2{
    font-size: 30px;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    color: white;
    margin-left: 15px;
    margin-top: 75px;
 
  }

  @media (min-width: 43em){
    #titre_header {
        font-size:40px;
        margin-left: 70px;
    }

    .sentence_header {
        font-size: 20px;
        line-height: 25px;
         margin-left: 70px;
         width: 600px;
         font-weight: 300;
    }

    h2{
        font-size: 30px;
        color: white;
        margin-left: 70px;
        margin-top: 70px;
    }
  }
    @media (min-width: 57em){
        #titre_header {
            font-size:50px;
            margin-left: 140px;
            line-height: 50px;;
        }
    
        .sentence_header {
            font-size: 25px;
            line-height: 30px;
             margin-left: 140px;
             width: 600px;
             font-weight: 300;
        }
    
        h2{
            font-size: 40px;
            margin-left: 140px;
            margin-top: 120px;
        }
    }

    @media (min-width: 75em){
        #titre_header {
            font: size 60pxpx;
            margin-left: 200px;
            line-height: 60px;
        }
    
        .sentence_header {
            font-size: 20px;
            line-height: 30px;
             margin-left: 200px;
             width: 700px;
             font-weight: 300;
        }
    
        h2{
            font-size: 35px;
            margin-left: 200px;
            margin-top: 120px;
        }
    }
  

  /*  Body  */

  /* What I can do */

#do{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -20px;
    scroll-margin-top: 70px;
    width: 100%;
}

legend {
   color: rgb(246, 246, 125);
   font-size: 20px;
   width: auto;
}

.h3_space {
    width: 300px;
    height: 120px;
    border-radius: 20px;
    margin-top: 30px;
    background-color: rgba(255,255,255,0.08); 
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    color: white;
    border: none;
}

#logos_frontend{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 15px;
}

#logos_backend{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 150px;
    margin-top: 15px;
}

#logos_tools{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 200px;
    margin-top: 15px;
}

.h3_space > p {
    font-size: 12px;
    font-weight: 300;
    color:white;
    font-style: italic
    
}
#logo_node {
   filter: invert(100%);
  -webkit-filter: invert(100%);
  width:50px;
  height: 50px
}

#logo_js {
    filter: invert(100%);
   -webkit-filter: invert(100%);
   width:40px;
   height: 30px
 }

 #logo_css {
    filter: invert(100%);
   -webkit-filter: invert(100%);
   width:30px;
   height: 40px
 }

 #logo_react {
    filter: invert(100%);
   -webkit-filter: invert(100%);
   width:40px;
   height: 40px
 }

 #logo_redux {
    filter: invert(100%);
   -webkit-filter: invert(100%);
   width:40px;
   height: 40px
 }

 #logo_html {
   width:30px;
   height: 40px
 }

 #logo_express{
    filter: invert(100%);
   -webkit-filter: invert(100%);
   width:50px;
   height: 50px
 }

 #logo_mongodb{
    filter: invert(100%);
   -webkit-filter: invert(100%);
   width:50px;
   height: 50px
 }

 #logo_git{
    filter: invert(100%);
   -webkit-filter: invert(100%);
   width:50px;
   height: 50px
 }

 #logo_tailwind{
    filter: invert(100%);
   -webkit-filter: invert(100%);
   width:50px;
   height: 50px
 }

 #logo_typescript{
    filter: invert(100%);
   -webkit-filter: invert(100%);
   width:50px;
   height: 50px
 }

#sentence_laCapsule {
    color: white;
    font-size: 15px;
    margin-top: 25px;
    width: 320px;
}

#lacapsule {
    color: white,
}

#doyou {
    font-size: 25px;
    margin: auto;
    text-align: center;
    margin-top: 35px;;
}

@media (min-width: 43em){
    #do{
        margin-top: -20px;
    }
    
    legend {
       font-size: 25px;
    }
    
    .h3_space {
        width: 450px;
        height: 170px;
    }
    
    #logos_frontend{
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: 15px;
    }
    
    #logos_backend{
        width: 200px;
        margin-top: 15px;
    }
    
    #logos_tools{
        width: 250px;
        margin-top: 15px;
    }
    
    .h3_space > p {
        font-size: 18px;
        font-weight: 300;
        color:white;
        font-style: italic
        
    }
    #logo_node {
       filter: invert(100%);
      -webkit-filter: invert(100%);
      width:70px;
      height: 70px
    }
    
    #logo_js {
       width:60px;
       height: 45px
     }
    
     #logo_css {
       width:45px;
       height: 60px
     }
    
     #logo_react {
       width:60px;
       height: 60px
     }
    
     #logo_redux {
       width:60px;
       height: 60px
     }
    
     #logo_html {
       width:45px;
       height: 60px
     }
    
     #logo_express{
       width:70px;
       height: 70px
     }
    
     #logo_mongodb{
       width:65px;
       height: 65px
     }
    
     #logo_tailwind{
       width:65px;
       height: 65px
     }
    
     #logo_typescript{
       width:65px;
       height: 65px
     }
    
    #sentence_laCapsule {
        margin-top: 20px;
        width: 500px;
    }
    #doyou {
        font-size: 25px;
        margin-top: 50px;
    }
}

@media (min-width: 75em){
    #container_stack{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width:85%;
    }
    .h3_space {
        margin: 25px 25px;
    }

    #sentence_laCapsule {
        font-size: 20px;
        margin-top: 25px;
        width: 600;
    }

    #doyou {
        font-size: 30px;

    }

}

/* videos What I love */

#love {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    scroll-margin-top: 120px;
}

.box_ski_kite {
    display: flex;
}

.box_squash_impro {
    display: flex;
}


/*SKI*/
#container_ski {
    width: 150px;
    height: 110px;
    position: relative;
    border-radius: 20px;
    
}

#container_ski > video{
    width: 150px;
    height: 110px;
    border-radius: 40px;


}

#text_ski {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: white;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 80px;
    mix-blend-mode: screen;
    border-radius: 20px;
}

/* SQUASH */

#container_squash {
    width: 190px;
    height: 90px;
    position: relative;
    border-radius: 20px;
    
}

#container_squash > video{
    width: 180px;
    border-radius: 20px;
    margin-top: 10px;
    margin-left: 5px;

}

#text_squash {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: black;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    mix-blend-mode: multiply;
    border-radius: 20px;
}

/* Music */

#container_music {
    position: relative;
    width: 300px;
}

#container_music> video{
    width: 350px;
    border-radius: 20px;

}

#text_music {
    position: absolute;
    top:0;
    left:25px;
    height: 100%;
    width: 100%;
    color: yellow;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 85px;
    border-radius:20px;
}

/* Kite */

#container_kite {
    position: relative;
    width: 200px;
}

#container_kite> video{
    width: 200px;
    border-radius: 20px;

}

#text_kite {
    position: absolute;
    top:0;
    left:0;
    height: 100%;
    width: 100%;
    color: rgba(0, 0, 246, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 80px;
    border-radius: 20px;
}

/* impro */

#container_impro {
    position: relative;
    width: 160px;
}

#container_impro> video{
    width: 160px;
    border-radius: 20px;

}

#text_impro {
    position: absolute;
    top:0;
    left:0;
    height: 100%;
    width: 100%;
    color: red;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    border-radius: 20px;
}

@media (min-width: 57em){
    .box_ski_kite {
        display: flex;
    }
    
    .box_squash_impro {
        display: flex;
    }
    
    
    /*SKI 57EM */
    #container_ski {
        width: 300px;
        height: 150px;  
    }

    #container_ski > video{
        width: 300px;
        height: 150px;
    } 

    #text_ski {
        font-size: 150px;
    }

    /* SQUASH 57EM*/
    
    #container_squash {
        width: 310px;
        height: 150px      
    }
    
    #container_squash > video{
        width: 300px;
        margin-top: 20px;   
    }
    
    #text_squash {
        font-size: 80px;
    }
    
    /* Music 57EM*/
    
    #container_music {
        width: 560px;
    }
    
    #container_music> video{
        width: 560px;
    }
    
    #text_music {
        font-size: 150px;
    }
    
    /* Kite 57EM*/
    
    #container_kite {
        width: 260px;
    }
    
    #container_kite> video{
        width:260px;
    }
    
    #text_kite {
        font-size: 110px;
    }
    
    /* impro */
    
    #container_impro {
        width: 250px;
    }
    
    #container_impro> video{
        width: 260px;    
    }
    
    #text_impro {
        font-size: 70px;
    }
    }

/* What i did */

#p_did_before {
    color : white;
    font-size: 15px;
    width: 350px;
    text-align: justify;
    margin-left: 15px;
}

#p {
  color : white;
    font-size: 15px;
    width: 350px;
    text-align: justify;
    margin-left: 15px;  
}

.containers_did {
   width: 350px;
   height: 100px;
   background-color: rgba(255,255,255,0.08);
   margin-top: 20px;
   border-radius: 20px;
   display: flex;
   flex-direction: column;
   align-items: space-between;
}

.containers_did:hover{
    background-color: rgba(249, 81, 238, 0.5);
    cursor: pointer ;
}


#did {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 15px;
    scroll-margin-top: 180px;
    
}

.titre_did {
   color: white;
   font-size: 14px;
   font-weight: 600;
   margin: 22px 0px 0px 0px;
}

.texte_did {
   color: white;
   font-size: 13px;
   font-weight: 200;
   font-size: italic;
   margin-bottom: 200px;
   margin: 15px 0px 0px 0px;
}

.date_did { 
    color: white;
   font-size: 14px;
   font-weight: 600;
   margin-right: 15px;
}

.titre_texte_did {
 margin-left: 20px;
 display: flex;
 flex-direction: column;
 

}

.container_date {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}
.container_texte_date {
    display: flex;
    justify-content: space-between;
}

.hidden_text {
    overflow: hidden;
    color: white;
    font-size: 15px;
    font-weight: 200;
    text-align: justify;
    margin: 10px 20px 10px 20px;

}

.reveal{
    position: relative;
    opacity: 0;
    transition: 2s all ease;
  }
  
.reveal.active{
    opacity: 1;
  }

#container_did_base{
    height: 100px;
  }
  
@media (min-width: 43em){
    #p_did_before {
        width: 500px;
        margin-left: 70px;
    }

    #p {
        width: 500px;
        margin-left: 70px;  
        margin-top: 0px;
      }
    
    .containers_did {
       width: 400px;
    }
    
    
    .titre_did {
       font-size: 17px;
    }
    
    .texte_did {
       font-size: 15px;
    }
    
    .date_did { 
       font-size: 17px;
    }
    
    .container_date {
        display: flex;
        flex-direction: column;
        margin-top: 20px;
    }
    .container_texte_date {
        display: flex;
        justify-content: space-between;
    }
    
    .hidden_text {
        overflow: hidden;
        color: white;
        font-size: 15px;
        font-weight: 200;
        text-align: justify;
        margin: 10px 20px 10px 20px;
    
    }
    
    .reveal{
        position: relative;
        opacity: 0;
        transition: 2s all ease;
      }
      
    .reveal.active{
        opacity: 1;
      }
    }
      @media (min-width: 57em){
        #p_did_before {
            width: 65%;
            margin-left: 140px;
            font-size: 18px;
        }

        #p {
            width: 65%;
            margin-left: 140px;
            font-size: 18px;  
          }

        #container_1{
            margin-left:30%
        }
        #container_2{
            margin-left:10%
        }
        #container_3{
            margin-left:-10%
        }
        #container_4{
            margin-left:-30%
        }
    
}

@media (min-width: 57em){
    #p_did_before {
        width: 65%;
        margin-left: 140px;
        font-size: 18px;
    }

    #p {
        width: 65%;
        margin-left: 140px;
        font-size: 18px; 
      }

    #container_1{
        margin-left:30%
    }
    #container_2{
        margin-left:10%
    }
    #container_3{
        margin-left:-10%
    }
    #container_4{
        margin-left:-30%
    }

}

@media (min-width: 75em){
    #p_did_before {
        width: 70%;
        margin-left: 200px;
        font-size: 20px;
    }

    #p {
         width: 70%;
        margin-left: 200px;
        font-size: 20px; 
      }
  
}


  /* Contact */

#contact {
    color :white;
    display: flex;
    flex-direction: column;
    align-items: center;
    scroll-margin-top: 70px;
}

.tel_mail {
    margin-top: 15px;
    width: 170px;
    height: 50px;
    border: 3px solid rgb(249, 249, 160);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    cursor: pointer;
    margin-bottom: 15px;
}

a:link {
    text-decoration: none;
    color: white
}

.tel_mail:hover{
    border: 3px solid rgb(253, 126, 244);
    box-shadow: 0 0.5em 0.5em -0.4em rgb(251, 133, 243);
    transform: translateY(-5px);
    transition: 1s
}

#madewith {
    font-size: 10px;
    font-weight: 400;
}



#footer {
    background-color: rgba(255,255,255,0.08);
    width: 100%;
    height:30px;
    margin-top: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 57em){
    #madewith {
        font-size: 12px;
    }

    #footer {
height: 45px;
    }
}

@media (min-width: 75em){
    .tel_mail {
        margin-top: 15px;
        width: 220px;
        height: 60px;
        border: 3px solid rgb(249, 249, 160);
        margin-bottom: 15px;
}
}



/* projects */

#projects_title{
    margin-top: 75px;
}

.projects{
    width: 320px;
    height: 470px;
    background-color: rgba(255,255,255,0.08);
    margin: 25px 25px 25px 25px;
    border-radius: 15px;
}

.projects:hover{
    box-shadow: 0 0.5em 0.5em -0.2em rgb(251, 133, 243);
    transform: translateY(-5px);
    transition: 1s;
    cursor: pointer;
}

#cargomentor {
    height: 270px;
    width: 320px;
    border-radius: 15px 15px 0px 0px;
}

#comon {
    height: 270px;
    width: 320px;
    border-radius: 15px 15px 0px 0px;
}

.texte_titre_projects {
 padding: 0px 15px 0px 15px;
 text-align: justify;
 color:white;
 display: flex;
 flex-direction: column;
}

.texte_titre_projects > h3 {
    font-size: 20px;
    
}

.texte_titre_projects > p {
    font-size: 15px;
    font-weight: 300;
    margin-top: 4px;
}

#bubble {
    font-style: italic;
    font-size: 13px;
}

#other_projects{
    width: 170px;
    height: 50px;
    border: 2px dotted white;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
}

#other_projects > h3{
  font-size: 14px;
  color: white;
  font-weight: 200;
}

#row_project_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 80%;
}

@media (min-width: 43em){
    #projects_title {
        margin: auto;
        margin-top: 70px;
    }
}

@media (min-width: 57em){
    #row_project_container {
        flex-wrap: wrap;
    }
}

/* menu */

li {
    list-style: none;
    display: flex;
    justify-content: center;
    ;
}

.navbar {
    min-height: 70px;
    width: 100%;
}

.navbar2 {
    display: none;
}


.nav-menu {

     gap : 60px;
}

.nav-link{
    transition: 0.7s ease;
    color: white;
    font-size: 30px;
    font-weight: 700;

}

.hamburger {
    display: block;
    float: right;
    margin-right: 35px;
     margin-top: 25px;
}
.hamburger.active .bar:nth-child(2){
    opacity:0 ;
}

.hamburger.active .bar:nth-child(1){
    transform: translateY(8px) rotate(45deg)
}

.hamburger.active .bar:nth-child(3){
    transform: translateY(-8px) rotate(-45deg)
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    background-color: white;
}

.nav-menu {
    position: absolute;
    top: -500px;
    width: 320px;
    gap: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    background-color: rgb(5, 6, 14, 0.95);
    transition: 1s; 
    border-radius: 15px;
    margin-left:25px;
    z-index: 100;
    
}

.nav-item {
    margin: 20px 0px 20px 0px;
}

.nav-menu.active{
    top: 70px;
}

header {
    position: fixed;
    display: flex;
    width: 100%;
    z-index: 100;
}

@media (min-width: 43em){ 

    header {
        position: static;
    }

    .navbar{
        display: none;
    }

    .navbar2 {
        width: 100%;
        display: flex;
        margin-top: 25px;
        float: left;
        
    }

    .nav2-menu {
        width: 400px;
        display: flex;
        justify-content:space-between;
        margin-left: 70px;
    }

    .nav2-link {
        width: 300px;
        font-size: 20px;
        font-weight: 500;
        color: white;
    }

    .nav2-link:hover {
        color: RGB(249, 81, 238);
        transition: 0.5s
        }

    .hamburger {
        display: none;
    }
}
    @media (min-width: 57em){ 
 
        .nav2-menu {
            width: 600px;
            margin-left: 140px;
            justify-content: space-between;

        }

}

@media (min-width: 75em){ 
 
    .nav2-menu {
        width: 800px;
        margin-left: 200px;
        justify-content: space-between;
    }
}

/* text Circle Linkedin */

#iphone{
    width: 200px;
    margin-top:20px;
}
.text-box{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100px;
    overflow: hidden;
    cursor: pointer;
    margin-top: 20px;
    
}
.text-box .text{
    position: absolute;
    color: rgb(249, 249, 160);
    font-size: 10px;
    user-select: none;
    pointer-events: none;
    animation: Rotation 20s linear infinite;
}
@keyframes Rotation{
    0%
    {
       transform: rotate(360deg); 
    }
    100%
    {
        transform: rotate(0deg);
    }
}
.text-box .text span{
    position: absolute;
    top: -50px;
    text-transform: uppercase;
    display: inline-block;
    transform-origin: 0 50px;
}



/* Charts */


#container_tableau {
    width: 300px;
    height: 150px;
}

@media (min-width: 57em){ 
    #container_tableau {
    width: 550px;
    height: 250px;
    margin-top: 25px;
    }
}