* {/*proprieter taille de boite trés utile notament pour le responssive*/
  box-sizing: border-box;
}


body{
  background-image: url(../img/fond.png);
  /* Proprieter background*/
  /*
   background-repeat:no-repeat;
   background-size: cover; 
   */
  
  width: 100%;
}
/* En tete */

header{
  background-color: rgb(87, 214, 176);
  text-align: center;
}
header h1{
  color:rgb(48, 104, 85);
  font-size: 45px;
  /*Telecharger font est copier coller link*/
  font-family: "Anton", sans-serif;
  letter-spacing: 1px;
  /* Pour enlever la marge du titre*/
  margin:0 auto;
  text-align: center; 
}
header img{
  width: 10%;
}

nav{
  background-color: rgb(48, 104, 85);
  display: flex;
  justify-content: space-around;
}

nav a {
  border: 2px solid rgb(172, 251, 148);
  background: rgb(87, 214, 176);
  color: rgb(48, 104, 85);
  margin: 10px;
  padding: 2px 10px;
  border-radius: 10px 0px;
  text-decoration: none;
  font-size: 20px;
}
main{
  background-color: rgb(87, 214, 176);
  margin: 0 auto;
  text-align: center;
  width: 75%;
}

/* Corp de page  */
/****************DEBUT PAGE SELECTEURS*************/
/*  l'etoile est le selecteur universelle , il selectionne donc tous les elements du document HTML */
*{
  box-sizing:border-box;
}
.petit{
  width:30%;
}
.moyen{
  width: 50%;
}
/*Ici je selectionne mon premier paragraphe grace firts-of-child qui veux dire premiere enfant de la class select*/
  .select p:first-of-type {
    color: rgb(245, 75, 8);
  }
  /*ici la virgule fait office de "et" */
  .select p:nth-of-type(6), .select p:nth-of-type(7) {
    color: rgb(150, 41, 41);
  }
  /*Ici avec div:not (.zoneB)je choisit tout suaf la zoneB*/
  .select div:not(.zoneB) {
    font-weight: bold;
  }
  /*la on veux dans la class select la class nommer zoneA*/
  .select .zoneA {
    color: #f56f56;
    font-size: 20px;
  }
  
  .select .zoneB {
    color: #996633;
  }
  
  .select .zoneB .couleurBleu {
    color: blue;
    font-size: 20px;
  }
  /*Ici on selectionne la class select qui contient un element qui a l id zone c qui lui doit être unique*/
  .select #zoneC {
    color: #98f32f;
  }
  
  .select #zoneD span {
    color: #32ff32;
    font-size: 30px;
    font-style: italic;
  }
  
  /****************FIN PAGE SELECTEURS***************/
.section a {
  border: 2px solid rgb(172, 251, 148);
  background:rgb(48, 104, 85); 
  color: rgb(87, 214, 176);
  margin: 10px;
  padding: 2px 10px;
  border-radius: 10px 0px;
  text-decoration: none;
  font-size: 20px;
}
/* La zone de pied de page */

footer{
  background-color:rgb(48, 104, 85);
  color:antiquewhite;
  text-align: center;
}

@media screen and (max-width:768px) {
  body{
      /* display: flex; */
      height: 100vh;
      width: 100vw;
  }
  .container{
      display: flex;
  }
  header{
      display: flex;
      flex-direction: column;
      width: 30%;
  }
  header img{
      width: 85%;
      margin: 0 auto;
  }
  header nav{
      display: flex;
      flex-direction: column;

  }
  header nav{
    position: sticky;
    top:1px;
  }
  header nav a{
      margin-top: 7%;
  }
  main{
      width: 69%;
  }
  footer h3{
      margin-top: 0;
  }
}