/*** GLOBAL SETTING ***/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

ul {
  list-style: none;
}

/*** FONT FAMILIES ***/
/*** FONT SIZES ***/
/*** BACKGROUND COLORS ***/
/*** TEXT COLORS ***/
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #e9b526;
}

header {
  min-height: 10vh;
  width: 90%;
  margin: auto;
  font-family: "Quicksand", sans-serif;
  font-size: 2rem;
  background-color: #e9b526;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

main {
  max-height: 80vh;
  width: 90%;
  background-color: whitesmoke;
  font-size: 2rem;
}

main .menu {
  height: 80vh;
  display: flex;
  flex-wrap: wrap;
}

main .menu .section {
  background: #333333;
  color: whitesmoke;
  height: 50%;
  width: 50%;
  font-size: calc(1.7rem + 1vw);
  border: 0.2rem solid whitesmoke;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s ease-in-out;
}

main .menu .section:hover {
  background-color: whitesmoke;
  color: black;
  border: 0.2rem solid black;
}

footer {
  min-height: 10vh;
  width: 90%;
  margin: auto;
  text-align: center;
  background-color: #e9b526;
  font-size: 2rem;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

footer h4 {
  flex: 1;
}

footer ul {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  flex: 1;
}

/* ATTENTION LES MEDIA QUERIES DOIVENT ETRE EN FIN SINON RISQUE DE CREER CONFLITS AVEC LE RESPONSIVE*/
/* TABLETS */
@media (max-width: 1024px) {
  /* HEADER */
  .titre {
    font-size: 3rem;
  }
  /* MAIN */
  main .menu .section {
    font-size: calc(1.5rem - 0.1vw);
  }
  /* FOOTER */
  footer h4 {
    font-size: 1.5rem;
  }
}

/* IPHONES */
@media (max-width: 560px) {
  /* HEADER */
  .titre {
    font-size: 2rem;
  }
  /* MAIN */
  main .menu .section {
    font-size: calc(1.1rem - 0.2vw);
  }
  /* FOOTER */
  footer h4 {
    font-size: 1.2rem;
  }
}