/* Cette section réinitialise les marges, les paddings et les bordures pour tous
les éléments HTML en utilisant la propriété '*' qui représente tous les éléments HTML.
Elle utilise également la boîte de dimensionnement de la bordure pour définir la taille
totale de l'élément, plutôt que la taille de son contenu. Elle définit également la police
de caractères à utiliser pour les éléments HTML. */
* {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
  font-family: sans-serif, Tahoma, Geneva, Verdana;
}

/* Cette section définit les propriétés de l'élément HTML avec l'ID "load".
Elle définit son affichage en tant que conteneur flexible, son centrage horizontal
et vertical, sa hauteur et sa largeur. Elle applique également une animation de
rotation continue à l'élément. */
#load {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  width: 100px;
  animation: loaded 1s linear infinite;
}

/* Cette section définit la couleur d'arrière-plan de la page */
body {
  background-color: #1e2338;
}

/* Cette section définit les propriétés de l'élément HTML avec l'ID "containerChampsList".
Elle définit son centrage horizontal et vertical et son affichage en tant que conteneur
flexible avec une disposition de type "wrap" pour les éléments enfants. */
#containerChampsList {
  justify-content: center;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}

/* Cette section définit les propriétés des éléments HTML avec la classe "champs".
Elle définit leur marge supérieure, leur largeur et leur centrage horizontal, ainsi
que l'alignement la police de caractères pour le texte des éléments HTML enfants. */
.champs {
  margin-top: 25px;
  width: 25%;
  text-align: center;
}

/* Cette section définit les propriétés des éléments HTML de type "img" à l'intérieur
des éléments HTML avec la classe "champs". Elle définit leur bordure, leur largeur,
leur position et leur ajustement d'image. Elle définit également leur marge inférieure
et leur comportement lorsqu'ils sont survolés par la souris, cliqués ou actifs. */
.champs img {
  border: 1px solid #cdbe91;
  width: 80%;
  object-fit: cover;
  object-position: center;
  margin-bottom: 10px;
}

.champs img:hover {
  text-shadow: 0 0 5px #ffffff80;
  box-shadow: 0 0 8px 0 #ffffff50;
  background: linear-gradient(to bottom, #1e2328, #433d2b);
  cursor: pointer;
  transition: 0.1s;
}

.champs img:active {
  text-shadow: none;
  box-shadow: none;
  color: #cdbe9130;
}

/* Cette section définit les propriétés des éléments HTML de type "p" à l'intérieur des
éléments HTML avec la classe "champs". Elle définit leur police de caractères, leur taille,
leur espacement et leur ombre de texte. Elle définit également leur couleur de texte et
leur marge inférieure. */
.champs p {
  font-family: "Marcellus SC", serif;
  font-weight: bold;
  font-size: 1rem;
  letter-spacing: 1px;
  text-shadow: 0px 1px 1px #000000;
  color: #cdbe91;
  margin-bottom: 10px;
}

/* Code permettant de faire tourner un élément de 360 degrés, ce qui permet de créer une
animation de chargement*/
@keyframes loaded {
  to {
    transform: rotate(360deg);
  }
}