/*
 Amin, Nicolas et Maxime
23.05.2021
styles
*/
.question
{
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
#contact {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
  
}
#contact td, #contact th {
  border: 6px solid #ddd;
  padding: 8px;
}
#contact tr:nth-child(even){background-color: #f2f2f2;}
#contact tr:hover {background-color: #ddd;}

#contact th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: rgb(48,48,48);
  color: white;
}
body
{
  margin: 0%;
 
}
.page1
{
  margin: auto;
  width: 800px;
  background-color: withe;
}
.accueilFooter
{
  margin-top: 178px;
  left: 0;
  bottom: 0;
  width: 100%;
}

h1
{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 40px;
  text-align: center;
  background-color:  rgb(48, 48, 48);
  color: aliceblue;
  padding-bottom: 10px;
  padding-top: 10px;
  margin: 0%;
}

.principal 
{
  object-fit: cover;
  object-position: 50% 30%;
  width: 100%;
  height: 350px;
  padding-bottom: 5%;
}

.secondaire
{
  display: flex;
  justify-content: space-evenly;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  
}
.imageSecondaire
{
  display: block;
  width: 150px;
}

footer
{
  padding-top: 2%;
  padding-bottom: 2%;
	font-family: Arial, Helvetica, sans-serif;
	background-color: rgb(48, 48, 48);
  color: white;
  

}

/*tous les "p" qui sont dans des "div" et qui sont dans des "footer"*/
footer>div>p
{
  text-align: center;
  font-weight: bold;
  margin: 0%;
}
a{
  color: black;
  text-decoration: none;
  
  
}
/*tous les "a" qui sont dans des "p" qui sont dans des "div" et qui sont dansdes "footer"*/
footer>div>p>a
{
	color: white;
}
/*tous les "a" qui sont dans des "div" et qui sont dans des "nav"*/
nav>div>a{
  color: white;
  padding: 20px;
  
}

.menu
{
  
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  background-color: rgb(48, 48, 48);
  display: flex;
  justify-content: space-around;
  
 
}

nav>div
{
  padding-top: 30px;
  padding-bottom: 30px;

  
}
/*nav div:hover, #menu:hover correspond au menu pour changer de page sur les articles.*/
nav div:hover, #menu:hover 
{
  background-color: #029bf3;

}
/*txt1 et txt2 correspondent à la mise en page des pages d'article.
Se sont des paramètres commun pour les articles*/
.txt1,.txt2,.liste
{
  display: flex;
  align-items: center;
  text-align: justify;
  padding: 2%;
  line-height: 20px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
}
.txt2
{ 
  flex-direction: row-reverse;
}
.illustration
{
  margin-left: 4%;
  margin-right: 4%;
}
.page
{
  margin: 0%;
  background-color: white;
}
.couleur
{
  background-color: #029bf3;
}
.articleFooter{
	color: white;
}
.liste
{
  display: block;
}
h2
{
  font-size: 20px;

}
.sourceFooter
{
  color: #029bf3;
}
/*le code qui est justeen bas correspond au média-querise*/
@media screen and (max-width:800px)
{
  nav
  {
    flex-direction: column;
  }
  .txt1,.txt2
  {
    flex-wrap: wrap ;
  }
  .illustration
  {
    display: flex ;
    justify-content: space-around;
    margin: auto;
    margin-bottom: 4%;
  }
  .imageSecondaire
  {
    display: block;
    width: 100px;
  }
  .menu
  {
    text-align: center;
    
  } 
}
@media screen and (min-width:1200px)
{
.imageSecondaire
  {
    display: block;
    width: 200px;
  }
  .page
  {
    margin: auto;
    width: 800px;
  }
  .colorbody 
  {
    background-image: url("../images/imageDeFond.webp");
    background-repeat: no-repeat;
    background-size: 150%;
    
  }
  .colorbodyHistoireNourriture
  {
    background-image: url("../images/imageDeFond.webp");
    background-repeat: no-repeat;
    background-size: 190%;
  }

}