@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anuphan:wght@400&display=swap');

html,body {
 margin: 0;
 padding: 0;
 color: #140e20;
 background-color: #ffffff;
 font-family: 'Anuphan', sans-serif;
}

::-webkit-scrollbar {width: 7px;}
::-webkit-scrollbar-track {background: #F1F1F1; }
::-webkit-scrollbar-thumb {background: #140e20;}

* {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

.categories {
 margin: 0px auto;
 padding: 5px;
 width: 100%;
 background-color: #ffffff;
}
.titre,
.petit_titre {
 margin: 50px auto 10px auto;
 padding: 5px 5px 20px 5px;
 width: 100%;
 list-style-type: none;
 text-align: center;
 font-size: 35px;
}
.titre {
 font-family: 'Righteous', cursive;
 font-size: 100px;
 color: #e94759;
}
@media (max-width: 1200px) {
 .titre {
   font-size: 120px;
 }
}

/*Menu ------------------------------------------------------------------------------------------*/

header {
 font-size: 24px;
 width: 100vw;
 height: 4em;
 background-color: #e94759;
 padding: 5px 30px 5px 10px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 opacity: 1;
}

#menu_mots{
    height:50px;
    vertical-align:middle;
    line-height: 50px;
}

.menu {
 text-decoration: none;
 margin-right: 20px;
 padding-right: 15px;
 color: #ffffff;
 display: inline;
}
#logo {
 margin-left: 30px;
 cursor: pointer;
 width: 50px;
 position: absolute;
 top: 15px;
 transition: transform 0.1s;
}
#logo:hover {
 transform: scale(1.1);
}
@media (max-width: 1200px) {
 header {
   font-size: 30px;
 }
 #logo {
   width: 70px;
 }
}
/*Fin --------------------------------------------------------------------------------------------*/
 
/*A propos ----------------------------------------------------------------------------------------*/
  #apropos {
    font-size: 20px;
    margin: 7px auto 0px auto;
    padding: 25px 50px;
    width: 70%;
    border: 2px solid #140e20;
    border-radius: 20px;
    background-color: #ffffff;
    opacity: 1;
  }
  em {
    color: #e94759;
    font-style: normal;
    font-weight: bold;
  }
  .contact_lien_propos,
  .portfolio_lien-propos {
    cursor: pointer;
  }
  @media (max-width: 1200px) {
    #apropos {
      font-size: 40px;
      line-height: 1.5;
      border: none;
      margin: 10px auto 0px auto;
    }
  }
  /*Fin --------------------------------------------------------------------------------------------*/
  
  /*Portfolio --------------------------------------------------------------------------------------*/
  #portfolio {
    display: none;
  }
  #portfolio_de_malade {
    display: flex;
    margin-top: 100px;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  #galerie {
    margin: 20px auto 10px auto;
    padding: 30px;
    width: 100%;
    text-align: center;
    background-color: #ffffff;
  }
  .picture {
    transition: opacity 0.5s;
    z-index: 2;
    margin: 20px;
    max-width: auto;
    max-height: 300px;
  }
  .picture:hover {
    opacity: 0.4;
  }

  .pictureflyer {
    transition: opacity 0.5s;
    z-index: 2;
    margin: 20px;
    max-width: auto;
    max-height: 300px;
  }
  .pictureflyer:hover {
    opacity: 0.4;
  }
  
  .horizontal {
    max-width: 300px;
    max-height: auto;
  }
  
  .contour {
    border: 1px solid #e94759;
  }
  
  @media (max-width: 1200px) {
    .picture {
      margin: 25px;
    }
    .pictureflyer {
      margin: 25px;
    }
  }
  /* Fin --------------------------------------------------------------------------------------------*/
  
  /*Clique sur une image ----------------------------------------------------------------------------*/
  .affichage_projet {
    display: flex;
    height: 90vh;
    justify-content: center;
    align-items: center;
    padding: 250px;
    background-color: #ffffff;
  }
  
  .double_image{
    flex-direction: column;
  }
  
  #texte {
    font-size: 1.7em;
    width: 600px;
    margin-left: 70px;
  }
  .liens {
    text-decoration: none;
    font-weight: bold;
    color: #e94759;
  }
  .limite_de_taille {
    max-width: 600px;
    min-width: 500px;
    height: auto;
  }
  #croix {
    width: 50px;
    float:right;
    margin-top: 100px;
    margin-right: 100px;
    transition: transform 0.1s;
  }
  #croix:hover {
    transform: scale(1.1);
  }
  @media (max-width: 1600px) {
    .affichage_projet {
      flex-direction: column;
      height: auto;
      width: auto;
      padding: 30px;
    }
    #texte {
      margin-top: 50px;
      text-align: center;
    }
    #croix {
      margin-top: 50px;
      margin-right: 50px;
    }
    .limite_de_taille {
      margin-top: 15vh;
    }
  }
  /* Fin --------------------------------------------------------------------------------------------*/
  
  /*Me contacter ------------------------------------------------------------------------------------*/
  #contacter {
    display: none;
  }
  #rubrique_contact {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    margin: auto;
    padding: 40px;
    width: 70%;
    font-size: 20px;
    flex-direction: column;
  }
  #curriculum {
    transition: opacity 0.5s;
    border: 2px solid #140e20;
    height: 538px;
  }
  #curriculum:hover {
    opacity: 0.4;
  }
  
  #email,#lien_curriculum {
    text-decoration: none;
    color: #e94759;
    font-style: normal;
    font-weight: bold;
  }
  #insta,#yt,#in{
      margin: 0px 20px;
      transition: transform 0.1s;
  }
  #insta:hover,#yt:hover,#in:hover {
    transform: scale(1.1);
  }
  @media (max-width: 1200px) {
    #rubrique_contact {
      border: none;
      padding: 20px;
      width: 80%;
    }
    #textecontact {
      display: block;
      font-size: 40px;
      line-height: 1.5;
      margin-right: 75px;
    }
  }
  /*Fin --------------------------------------------------------------------------------------------*/