/* Correction projet Tea Cozy*/

/* Universal Styles */



* {
	margin: 0;
	padding: 0;
/* Permet de résoudre les problèmes de marges et de padding, c'est une sorte de reset*/
	box-sizing: border-box; 
/* (box-sizing: border-box) Indique au navigateur de prendre en compte la bordure et le remplissage 
dans la valeur définie pour la largeur et la hauteur */
}

/* Astuces propriété (*) pour universel snippet pour remettre à zéro 
certaines propriétés parasites */

body { 
  font-family: "Helvetica", sans-serif;
  color: seashell;
  background-color: black;
  font-size: 22px;
  text-align: center;
}

a {
  color: seashell;
}

h2,
h3,
h4 {
  padding: 10px;
}

h2, h3, h4, h5, p, figcaption, a {
	opacity: 0.9;
}

/* Un seul style universel pour flex container */

.flex-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

/* Header Section // Code vérif */

header { 
  width: 100%;
  position: fixed;
  z-index: 1;
  height: 69px;
  background-color: black;
  border-bottom: 1px solid seashell;
  align-items: center;
}

header img { 
  height: 50px;
  padding-left: 10px;
}

nav {
  text-align: right;
  flex-grow: 1;
}

nav a {
	display: inline-flex;
	text-decoration: underline;
	justify-content: flex-end;
	padding: 20px 10px;
}

/* Main Section - Comprend tous les contenus :
#mission, #store et #location */ 

.main {
  padding-top: 69px;
  width: 1200px;
  margin: auto;
}

/* Mission Section // Code vérif */

#mission {
  height: 700px;
  background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg");
  padding-top: 70px;
}

#mission .content {
  margin: auto;
  background-color: black;
  width: 100%;
  opacity: 0.9;
}

/* Store Section // Code vérif */

#store {
  height: 700px;
  width: 1000px;
  margin: auto;
  padding-top: 70px;
}

.item {
  padding: 5px;
}

.item img {
  height: 200px;
  width: 300px;
  margin: 10px;
  display: block; /* Indique au navigateur que les éléments doivent remplir la boîte - pas indispensable ici */
 
}

/* Snippet pour légende de photos afin 
qu'elle soit bien alignées aux photos */

.item figcaption {
	display: block;  /* Indique au navigateur que les éléments doivent remplir la boîte - pas indispensable ici */
	padding: 5px;
	font-weight: bold;
	text-align: center;
}

/* Location Section // Code vérif */

.flex-container.locations {
  padding-top: 5px;
}

#locations {
  padding-top: 70px;
  background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  height: 500px;
}

#locations .flex-container {
  margin: auto;
  width: 1100px;
}

.location {
  width: 300px;
  height: 300px;
  opacity: 1.0;
  padding: 10px;
  margin: 5px 20px;
  background-color: black;
  flex-basis: 280px;
  flex-direction: column;
  justify-content: center;
}

/* Gestion spécifique du dimensionnement des lettres 
pour l'affichage correct dans la boîte */

.loc1, .loc2, .loc3 {
	line-height: 60px;
}

.loc2 {
	letter-spacing: -1px;
}

/* Contact Section */

#contact {
  height: 200px;
  line-height: 60px;
}

/* Footer Section */

footer {
  text-align: left;
  margin-left: 20px;
  margin-bottom: 20px;
}