/* Section presentation */


  



body {

  background-image: url("../asset/Noemie-WebsiteBackground-1600x900.jpg");
  background-repeat: no-repeat;
  /* background-size:  contain; */
  background-color : #F2CB05; 
  
}

.presentation{
    padding: 0px 68px ;
    


}

.block_presentation{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;

}

.empty_block{
  display: flex;
  flex-direction: column;
  width: 200px;
}

.empty_block_trait{
  height: 46px;
  border-bottom: #D9D9D9 solid 3px;
  margin-right: 9px;
}

.title_presentation{
  
  font-family: 'Advent Pro', sans-serif;
  font-size: 26px;
  display: flex;
  flex-direction: column;
  
}

h1, h2 {
  margin: 0px;
  color:white;
}

.text_presentation{
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-width: 670px;
  min-width: 500px;
  padding : 45px 58px 45px 58px;
  text-align: left;
  margin-top: 380px;
  margin-left: 511px;
  box-shadow: 0px 4px 6px black;
  z-index: 2;
}






.presentation p{
    contain: content;
    font-family: 'Anonymous Pro', monospace;
    font-size: 18px;
    color : #000000;


}

cite{
    text-align:right ;
    font-family: 'Dancing Script', cursive;
    color: #000000;
    font-size: 35px;
    line-height: 55px;
}





.container_triangle{
  position:relative;

}



.skills {
  display: flex;
  flex-direction: column;
  width: 100%;
  

  position: absolute;
  z-index: -1;
}

.skills h3{
  font-family: 'Advent Pro', sans-serif;
  font-size: 27px;
}

.skills div{
  font-family: 'Anonymous Pro', monospace;
  font-size: 18px;
}

.hard_skill{
  background-color: #F2CB05;
  z-index: -1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 40px;
  padding :70px ;

}





.card_skill{
  width:300px;
  height: 280px;
  padding: 45px;
  border-radius: 15px 0px;
  box-shadow: 0px 4px 6px black;
  

}

.hard{
  background-color:black;
  color: white;
}


.soft_skill{
  background-image: url("../asset/fond_vigne.jpg");
  background-repeat: no-repeat;
  background-size:  cover;
  /* z-index: -1; */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 40px;
  padding : 70px;
}

.soft{
  background-color:#F2CB05;
  color: black;

}

/* point de rupture pour le block text_presentation  - décaler un peu plus vers la gauche*/

@media screen and (max-width: 1250px){
  .text_presentation{
    margin-left: 450px;
  }
}

/* point de rupture */

@media screen and (max-width: 1195px){
  .empty_block_trait{
    border-bottom:transparent solid 3px;
  }
  .hard_skill{
    margin-top: 120px;
  }
  .text_presentation{
    margin-left: 60px;
    position: relative;
    top: 150px;
  }

}

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

  .text_presentation{
    margin-bottom: 100px ;
    margin-left: 20px;
    margin-right: 20px;
  }
  footer {
    top: 4020px;
  }

}


/* ANCIEN CODE */
/* 

.li_presentation {
    opacity: 0;
    animation: apparition 0.5s ease-in-out forwards;
  }
  .li_competences {
    animation-delay: 0.5s;

  }
  .li_competences:hover{
    
    transform: scale(1.15);

}

  .li_project {
    animation-delay: 1s;
  }
  .li_about {
    animation-delay: 1.5s;
 

  }
  
  @keyframes apparition {
    0% {
      opacity: 0;
      transform: translateY(-100px);
    }
    20% {
      opacity: 0.2;
      transform: translateY(-80px);
    }
    40% {
      opacity: 0.4;
      transform: translateY(-60px);
    }
    60% {
      opacity: 0.6;
      transform: translateY(-40px);
    }
    80% {
      opacity: 0.8;
      transform: translateY(-20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0px);
    }
  } FIN DE L ANCIEN CODE */ 


/*  format tablette */

  @media screen and (max-width: 780px){
    .presentation p{
      font-size: 20px;
      text-align: left;
  
  }

  cite{
      font-size: 35px;
  }

    ul {
    gap: 20px;

  
  }
  .text_presentation{
   min-width: 0px;
   
  }
  .skills {
    position: static;
  }

  .hard_skills{
    margin-left: auto;
    margin-right: auto;
  }

  footer {
    position: static;
  }

  }

/* mise en page plus adaptée (sera la même pour la version mobile) */

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

  body {
    background-size:  600px;
    background-color: transparent;
    
  }


  .presentation {
    padding: 0px 20px;
  }

  .block_presentation {

   
    background-color: #F2CB05;
    padding: 60px 60px 60px 60px;
    margin-top: 160px;
    margin-left: -20px;
    margin-right: -20px;
  
  }

  .text_presentation{
    padding: 10px;
    margin-bottom: 0px;
    margin-top: 0px;
    box-shadow: none;
    top: 50px;
  }

  .presentation p {
    font-size: 16px;
    text-align: left;
    
  }

  .presentation cite {
    text-align: center;
  }


  .hard_skill{
    padding: 70px 20px;
    background-color: #000000;
    
  }
  .hard {
    
    background-color: #000000;
    border: solid white 2px;

  }


  .soft_skill{
    padding:70px 20px;
    background-image: none;
    
    background-color: #F2CB05;
  }

  .soft{
    border: solid black 2px;
  }



  .card_skill{
    padding: 20px;
    height: auto;
    
  }
}



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

  header {
    padding-left: 20px;
    margin-left: auto;
    margin-right: auto;
  }
  .contact{
    display : none;
  }
}