/* Applique un fond noir et une image d'arrière-plan à la page */
body {
  background-color: #000000;
  background-image: url("stone.webp");
  display: grid; /* Utilise le système de grille CSS pour organiser les éléments */
  grid-template-areas:
      "header header" /* Définit une zone pour l'en-tête */
      "nav main" /* Définit une zone pour la navigation et le contenu principal */
      "footer footer"; /* Définit une zone pour le pied de page */
  grid-template-columns: 1fr 3fr; /* Définit deux colonnes, une petite et une grande */
  grid-template-rows: auto 1fr auto; /* Définit trois lignes: une pour l'en-tête, une pour le contenu, une pour le pied de page */
  gap: 20px; /* Ajoute un espace de 20px entre les éléments */
  height: 100vh; /* Définit la hauteur du body à 100% de la hauteur de la fenêtre */
  margin: 0; /* Supprime les marges par défaut */
  justify-items: center; /* Centre les éléments horizontalement */
  align-items: start; /* Aligne les éléments en haut de la page */
}

/* Style pour l'en-tête, en haut de la page */
header {
  grid-area: header; /* Place l'élément dans la zone "header" de la grille */
  font-family: 'Jersey 15', sans-serif; /* Définir la police d'écriture */
  font-size: 55px; /* Taille de la police */
  color: white; /* Couleur du texte */
  font-weight: 500; /* Poids de la police */
  text-align: center; /* Centre le texte */
  width: 100%; /* Prend toute la largeur */
  -webkit-text-stroke: 4px black; /* Ajoute un contour noir au texte */
  paint-order: stroke fill; /* Applique le contour avant la couleur de remplissage */
}

/* Style pour la barre de navigation */
nav {
  grid-area: nav; /* Place l'élément dans la zone "nav" de la grille */
  font-family: 'Roboto', sans-serif; /* Définir la police d'écriture */
  color: white; /* Couleur du texte */
  border-width: 4px; /* Largeur des bordures */
  border-style: solid; /* Style de bordure */
  border-radius: 7%; /* Arrondir les coins de la bordure */
  letter-spacing: .1rem; /* Espace entre les lettres */
  padding: 20px; /* Espacement intérieur */
  width: 90%; /* Largeur de l'élément */
  -webkit-text-stroke: 3px black; /* Contour du texte */
  paint-order: stroke fill; /* Ordre d'affichage du contour et du texte */
  justify-self: start; /* Aligne l'élément à gauche */
  align-self: start; /* Aligne l'élément en haut */
}

/* Style commun pour le contenu principal et la barre de navigation */
main, nav {
  width: 100%; /* Largeur maximale de 100% */
  max-width: 90%; /* Largeur maximale limitée à 90% */
  padding: 5%; /* Espacement intérieur */
}

/* Style pour le contenu principal */
main {
  grid-area: main; /* Place l'élément dans la zone "main" de la grille */
  font-family: 'Montserrat', sans-serif; /* Définir la police d'écriture */
  font-size: 40px; /* Taille de la police */
  color: white; /* Couleur du texte */
  border-width: 3px; /* Largeur de la bordure */
  border-style: solid; /* Style de bordure */
  border-radius: 3%; /* Arrondi des coins de la bordure */
  padding: 20px; /* Espacement intérieur */
  width: 90%; /* Largeur de l'élément */
  -webkit-text-stroke: 2.5px black; /* Contour du texte */
  paint-order: stroke fill; /* Ordre d'affichage du contour et du texte */
}

/* Style pour le pied de page */
footer {
  grid-area: footer; /* Place l'élément dans la zone "footer" de la grille */
  font-family: 'Montserrat', sans-serif; /* Définir la police d'écriture */
  font-size: 40px; /* Taille de la police */
  color: white; /* Couleur du texte */
  text-align: center; /* Centre le texte */
  padding: 20px; /* Espacement intérieur */
  width: 100%; /* Prend toute la largeur */
}

/* Styles pour l'élément avec l'ID gradient, souvent pour un fond ou un effet visuel */
#gradient {
  margin-right: -10px; /* Décale légèrement à droite */
  margin-left: -10px; /* Décale légèrement à gauche */
  margin-top: -50px; /* Décale légèrement en haut */
  margin-bottom: -50px; /* Décale légèrement en bas */
  padding-top: 50px; /* Ajoute de l'espace en haut */
}

/* Style pour les titres de niveau 1 */
h1 {
  padding-bottom: 5%; /* Espacement en bas */
  -webkit-text-stroke: 3px black; /* Contour du texte */
  paint-order: stroke fill; /* Ordre d'affichage du contour et du texte */
}

/* Style pour les listes non ordonnées */
ul {
  list-style-type: none; /* Enlève les puces des listes */
  padding: 0; /* Enlève les espacements intérieurs */
  margin: 0; /* Enlève les marges */
  -webkit-text-stroke: 3px black; /* Contour du texte */
  paint-order: stroke fill; /* Ordre d'affichage du contour et du texte */
}

/* Style pour les éléments de la liste */
li {
  margin-top: 30px; /* Ajoute un espacement en haut */
  font-size: 200%; /* Augmente la taille de la police */
  -webkit-text-stroke: 3px black; /* Contour du texte */
  paint-order: stroke fill; /* Ordre d'affichage du contour et du texte */
}

/* Style pour les liens */
a {
  color: white; /* Couleur du texte */
  text-decoration: none; /* Enlève la décoration par défaut (soulignement) */
  -webkit-text-stroke: 3px black; /* Contour du texte */
  paint-order: stroke fill; /* Ordre d'affichage du contour et du texte */
}

/* Style pour les éléments de texte soulignés */
u {
  color: white; /* Couleur du texte */
  -webkit-text-stroke: 3px black; /* Contour du texte */
  paint-order: stroke fill; /* Ordre d'affichage du contour et du texte */
}

/* Style pour les formulaires */
form {
  font-size: 25px; /* Taille de la police */
  margin-top: 20px; /* Espacement en haut */
}

/* Style pour les boutons */
button {
  font-size: 20px; /* Taille de la police */
  padding: 10px; /* Espacement intérieur */
  background-color: white; /* Couleur de fond */
  border: 2px solid black; /* Bordure noire */
  cursor: pointer; /* Change le curseur en forme de main */
}

/* Effet au survol du bouton */
button:hover {
  background-color: yellow; /* Change la couleur de fond en jaune */
}

/* Style pour les éléments avec la classe .title */
.title {
  font-size: 45px; /* Taille de la police */
  margin: .2em; /* Marges autour de l'élément */
  -webkit-text-stroke: 3px black; /* Contour du texte */
  paint-order: stroke fill; /* Ordre d'affichage du contour et du texte */
}

/* Style pour les éléments avec la classe .paragraphe */
.paragraphe {
  font-size: 30px; /* Taille de la police */
  margin: .2em; /* Marges autour de l'élément */
  -webkit-text-stroke: 3px black; /* Contour du texte */
  paint-order: stroke fill; /* Ordre d'affichage du contour et du texte */
}

/* Style pour les articles */
article {
  margin-top: 30px; /* Ajoute un espacement en haut */
}

/* Style pour les éléments avec des ID spécifiques (positionnement absolu sur la page) */
#square, #FS, #Pika, #Donk, #Bandi, #Sword, #HK {
  position: absolute; /* Positionnement absolu */
  z-index: 2; /* Définit l'ordre d'empilement de ces éléments */
}

/* Positionnement spécifique des éléments */
#square {
  top: 0em; /* Distance par rapport au haut */
  right: 32em; /* Distance par rapport à la droite */
  height: 50px; /* Hauteur de l'élément */
  width: 50px; /* Largeur de l'élément */
}

#FS {
  top: 0em; /* Distance par rapport au haut */
  right: 30em; /* Distance par rapport à la droite */
  height: 50px; /* Hauteur de l'élément */
  width: 50px; /* Largeur de l'élément */
}

#Pika {
  width: 40%; /* Largeur en pourcentage */
  max-width: 400px; /* Largeur maximale */
  height: auto; /* Hauteur automatique */
  top: -20px; /* Décalage vers le haut */
  right: -10px; /* Décalage vers la droite */
}

/* Autres éléments positionnés avec des tailles et décalages spécifiques */
#Donk {
  width: 400px;
  height: 400px;
  top: 15em;
  right: 24em;
}

#Bandi {
  width: 230px;
  height: 200px;
  top: -0.5em;
  right: 24.5em;
}

#Sword {
  width: 115.4px;
  height: 86.6px;
  top: 4.95em;
  right: 29.35em;
}

#HK {
  width: 1024px;
  height: 520px;
  right: 10.9em;
}

/* Spécifications pour les éléments avec les ID Source1 et Source2 */
#Source1, #Source2 {
  width: 40%;
  height: 40%;
}

#Source1 {
  margin: 0 auto; /* Centre l'élément horizontalement */
}