@charset "UTF-8";
/*
Fichier style.scss

Ce fichier est le point d'entrée principal pour la compilation des styles de votre site web.
Il importe tous les autres fichiers SCSS et définit l'ordre dans lequel ils doivent être inclus.
Vous pouvez également ajouter ici des styles globaux ou des ajustements spécifiques pour l'ensemble du site.
*/
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap");
/*
   Fichier _variables.scss

   Ce fichier contient les variables Sass et Css pour le site web, telles que les couleurs, les polices, les tailles, etc. Il est utilisé pour la gestion centralisée des styles et la personnalisation facile du site.
*/
:root {
  --hue: 200;
  --sat: 50%;
  --lum: 50%;
}

/*
   Fichier _boilerplate.scss

   Ce fichier contient les styles de base et les réinitialisations pour le site web.
*/
/* Appliquer la boîte border-box à tous les éléments */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Supprimer les marges et les paddings par défaut */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
  padding: 0;
}

/* Définir certains styles de base */
html {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  height: 100%;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
  font-size: 16px;
}

/* Définir certains styles de base pour les titres */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 1em;
  margin-bottom: 0.5em;
}

h1 {
  font-size: 24px;
}

h2 {
  font-size: 22px;
}

h3 {
  font-size: 20px;
}

/* Définir certains styles de base pour les paragraphes */
/*
   Fichier _app.scss

   Ce fichier est généralement utilisé pour les styles spécifiques à l'application ou aux fonctionnalités
   qui sont indépendantes du reste du site web.
   Vous pouvez y inclure des styles pour des composants spécifiques à l'application ou pour des fonctionnalités
   qui ne sont pas liées à l'interface utilisateur générale du site.
   Cela permet de garder les styles modulaires et bien organisés.
*/
#app {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas: "header" "nav" "main" "footer";
  min-height: 100%;
}
#app > header {
  grid-area: header;
  background: radial-gradient(circle, rgb(173, 173, 173) 39%, rgb(105, 105, 105) 69%);
  color: white;
}
#app > header div {
  display: flex;
  justify-self: center;
  text-align: center;
  text-align: center;
}
#app > header h1 {
  text-align: center;
  margin: auto;
}
#app > nav {
  grid-area: nav;
  background: rgb(61, 50, 253);
  padding: 10px;
  color: white;
  margin-bottom: 40px;
}
#app > main {
  grid-area: main;
  background-color: hsl(var(--hue), var(--sat), calc(var(--lum) * 0.75));
  color: white;
}
#app > footer {
  background-color: #333;
  color: #fff;
  padding: 20px;
  font-size: 14px;
  margin-top: 50px;
}
#app > footer div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#app > footer div ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}
#app > footer div ul li {
  margin-right: 20px;
}
#app > footer div ul li a {
  color: #fff;
  text-decoration: none;
}
#app > footer div ul li a:hover {
  text-decoration: underline;
}
#app > footer p {
  margin-top: 10px;
  text-align: center;
}

/*
   Fichier _nav.scss

   Ce fichier contient les styles spécifiques à la navigation du site web, y compris les menus, les barres de navigation, les liens de navigation, etc.
*/
nav ul {
  display: flex;
  justify-content: center;
  list-style-type: none;
}
nav ul li a {
  display: flex;
  color: rgb(255, 255, 255);
  padding: 0.5em 1em;
  text-decoration: none;
}
nav ul li a:hover {
  color: hsla(0, 0%, 100%, 0.6);
}

/*
   Fichier _main.scss

   Ce fichier contient les styles principaux du site web, tels que la mise en page globale, les en-têtes, les pieds de page et les sections principales.
*/
/* Styles for the footer */
footer {
  background: radial-gradient(circle, rgb(173, 173, 173) 39%, rgb(105, 105, 105) 69%);
  color: #fff;
  padding: 20px;
  font-size: 14px;
  position: relative;
  margin-top: 100px;
}
footer div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
footer div ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}
footer div ul li {
  margin-right: 20px;
}
footer div ul li a {
  color: #fff;
  text-decoration: none;
}
footer div ul li a:hover {
  text-decoration: underline;
}
footer p {
  margin-top: 10px;
  text-align: center;
}

.content-below-footer {
  margin-bottom: 100px;
}/*# sourceMappingURL=style.css.map */