@charset "utf-8";

@font-face {
  font-family: "Varela";
  src: url("fonts/Varela-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Varela Round";
  src: url("fonts/VarelaRound-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto-Regular.ttf") format("truetype");
}

* {
  margin: 0px;
  padding: 0px;
}

#background {
  background-color: #37006a;
  /*
  utiliser ce display permet à l'arrière-plan de s'étendre sur le haut de la page (sinon, bande blanche avant le body)
  la propriété crée un nouveau contexte de bloc, donc le margin du header s'applique sur la page et non sur le body 
  d'après https://developer.mozilla.org/fr/docs/Web/CSS/Guides/Display/Formatting_contexts:
  "Ainsi, en utilisant display: flow-root; sur l'élément <div> tout son contenu contribue au contexte de formatage de bloc et l'élément flottant n'est plus éjecté en bas de l'élément."
  */
  display: flow-root;
}

a {
  text-decoration: none;
}

a:hover {
  color: cornflowerblue;
  transition: 0.25s ease-in-out;
}

header a:hover:not(#logo), #rapport a:hover {
  color: cornflowerblue;
  scale: 1.075;
}

header {
  display: grid;
  grid-template-columns: 1.25fr 2fr 1.25fr;
  background-color: #2c0073;
  align-items: center;
  border-radius: 2rem;
  box-shadow: 0px 4px 10px black;
  margin: 1rem;
}

header h1 {
  color: white;
  font-family: "Varela Round", sans-serif;
  font-size: 2.5rem;
  text-align: center;
}

#logo {
  display: inline-flex;
  pointer-events: none;
}

#logo img {
  width: 25%;
  margin: auto;
  padding: 1rem;
  border-radius: 50%;
  pointer-events: all;
}

#navbar {
  display: inline-flex;
  justify-content: space-around;
}

#navbar a {
  color: white;
  transition: 0.25s ease-in-out;
  font-family: "Varela Round", sans-serif;
  font-size: 1.5rem;
}

#navbar .current {
  font-weight: bold;
}

main {
  display: flex;
  flex-direction: column;
  color: white;
  font-family: "Varela", sans-serif;
  margin: 0rem 1rem 1rem 1rem;
}

main aside {
    text-align: center;
    align-self: center;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 1rem;
    background-color: #2c0073;
    border-radius: 1rem;
    width: fit-content;
    box-shadow: 0px 0px 10px black;
}

main section {
  margin: 2rem 1rem 2rem 1rem;
}

main img {
  border-radius: 1rem;
  border: solid black;
  box-shadow: 4px 4px 10px black;
}

main h2, h3 {
  font-family: "Varela Round", sans-serif;
}

main h2 {
  font-size: 2.25rem;
  margin-bottom: 1rem;
}

main h3 {
  font-size: 1.6rem;
  margin-bottom: 6px;
}

main ol, ul {
  margin-left: 4rem;
}

main a {
  width: fit-content;
}

main hr.thin {
  margin: 4px 25% 4px 25%;
  border: 1px solid #737373;
  border-radius: 1rem;
  opacity: 40%;
}

main hr.large {
  margin: 4px 10% 4px 10%;
  border: 1.5px solid #6d6d6d;
  border-radius: 1rem;
  opacity: 60%;
}

footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background-color: #2c0073;
  color: white;
  align-items: center;
  border-radius: 1.5rem 1.5rem 0px 0px;
  box-shadow: 4px 0px 10px black;
  font-family: "Varela Round", sans-serif;
  text-align: center;
}

#rapport {
  display: flex;
  justify-content: space-around;
}

#rapport a, main a {
  color:cadetblue;
  transition: 0.25s ease-in-out;
}

footer img {
  width: 50%;
  margin: auto;
  padding: 1rem;
}

@media (max-width: 1400px) {
  header h1 {
    font-size: 2rem;
  }

  main h2 {
    font-size: 2rem;
  }
}

@media (max-width: 1100px) {
  #navbar a {
    font-size: 1.25rem;
  }
  
  #logo img {
    width: 30%;
  }

  footer {
    grid-template-columns: 1.25fr 0.75fr 1fr;
  }

  #noms {
    font-size: 0.9rem;
  }
}

@media (max-width: 900px) {
  header {
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: 1fr 1.75fr;
  }
  
  #navbar {
    grid-row-start: 1;
    grid-column-start: 2;
  }

  header h1 {
    grid-column-start: 1;
    grid-column-end: 3;
  }

  main h2 {
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
  }

  main h3 {
    font-size: 1.4rem;
  }

  footer {
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: 1.25fr 1fr;
  }

  footer img {
    grid-column-start: 1;
    grid-column-end: 3;
    width: 30%;
  }
}

@media (max-width: 600px) {
  header {
    grid-template-columns: 1fr 2fr;
  }
  
  #logo img {
    width: 40%;
  }
  
  header h1 {
    font-size: 1.65rem;
  }

  #navbar a {
    font-size: 1.15rem;
  }

  main h2 {
    font-size: 1.5rem;
  }

  main h3 {
    font-size: 1.3rem;
  }

  footer img {
    width: 50%;
  }
}