html {
    font-family: Helvetica, sans-serif;
}
header {
    font: size 70px;
    text-align: center;
}
body {
    background-color: #FF33A8;
  /*pour que la page apparaisse gentiment*/
  animation-name: fade;
  animation-duration: 1.0s;
  animation-fill-mode: forwards
}
/*que la page apparaisse gentiment*/
@keyframes fade {
    0% {
      opacity: 0;
    }
  
    100% {
      opacity: 1;
    }
  }
/*pour le menu naviguation*/
nav {
    background: #ec7fd1;
    font-size: 20px;
    display: flex;
    justify-content: center;
    text-align: center;
    margin-block: 0px;
}
nav div {
    padding: 25px;
    padding-left: 150px;
    padding-right: 150px;
}
/*pour que lorsque l'on passe la souris sur un élément de notre menu de naviguation il devienne d'une autre couleur*/
nav div:hover {
    background: #FF33A8;
}
/*pour la mise en forme des images*/
img {
    margin-top: 50px;
    width: 100%;
    height: 100%;
}
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.part {
    display: flex;
    justify-content: center;
}
.item {
    width: 10%;
    height: 10%;
    display: block;
    margin-left: 50px;
    margin-right: 50px;
}
.img_txt {
    width: 10%;
    height: 10%;
}
.image {
    width: 10%;
    height: 10%;
}
.img_s {
    width: 105%;
    height: 105%;
}
/*pour la mise en forme du titre 1*/
h1 {
    margin-top: 50px;
    text-align: center;
}
h2{
    margin-left: 2%;
    margin-bottom: 1%;
}
/*pour que le site s'adapte à la taille de l'écran*/
@media screen and (max-width: 800px) {
   /* .logo {
        display: none;
    }
    */
    .container {
        flex-direction: column;
    }
    nav {
        width: 500px;
        display: flex;
        flex-direction: column;
    }
}
/*pour la mise en forme des image et texte de la page 2*/
article{
    
    float: right;
    display: flex;
    align-items: right;
    justify-content: space-evenly;
    margin: 15px;
  }
  p{
    float: left;
    display: flex;
    align-items: left;
    justify-content: space-evenly;
    margin: 15px;
  }
  pre{
    font-family: Helvetica, sans-serif;
  }
  .logo{
    display: flex;
    margin-left: 8%;
    margin-right: 12%;
    margin-bottom: 5%;
    width: 20%;
  }