@font-face {
  font-family: "Titre";
  src: url(../Fonts/DARKLINOS.ttf);
}

@font-face {
  font-family: "Paragraphe";
  src: url(../Fonts/Exo2-VariableFont_wght.ttf);
}

/*Variable des polices*/
:root {
  --title-font: "Titre", sans-serif; /*La police des titres*/

  --general-font: "Paragraphe", sans-serif; /*La police du texte général*/


}

/*Variables couleurs globales du site*/
:root {

  --title-letter-spacing: 2.5px; /*Espacement entres les lettres des titres*/
  --header-letter-spacing: 1.5px; /*Espacement entres les lettres des headers*/

  --background-color: rgb(50, 50, 50); /*Couleur du background globale du site*/

  --font-color: #F1E2CC; /*Couleur de la police du site*/

  --header-backgounrd-color: white; /*Couleur du background du header*/

  --title-color: white; /*Couleur des titres du site*/

  --border-color: #b8a892; /*Couleur des border générale*/

  --footer-background-color: white; /*Couleur du background du footer*/

  --border-color-special: #F1E2CC;

  --border-color-side: #afa28f; /*Couleur des bordures latérales*/
  
  --border-color-project: #050506; /*Couleur des bordures des projets*/
}

/*Variables couleurs de la navigation du site*/
:root {
  --nav-background-color: white; /*Couleur du background de la navigation*/

  --nav-burger-background-color: black; /*Couleur du background lorsque le menu burger est ouvert*/

  --nav-burger-color: white; /*Couleur de l'icône burger*/

  --nav-text-color: black; /*Couleur du texte de la navigation*/

  --nav-burger-text-color: white; /*Couleur du texte de la navigation lorsque que le menu burger est ouvert*/

  --nav-hover-size: 2em ; /*Couleur du texte de la navigation lorsqu'on hover*/

  --nav--burger-hover-color: rgb(122, 50, 122); /*Couleur du texte de la navigation burger lorsqu'on hover*/
}

/*Variables couleurs du carrousel de la page d'accueil*/
:root {
  --carrousel-titre-color: white; /*La couleur du titre du carrousel*/

  --carrousel-text-color: black; /*La couleur du texte du carrousel*/

  --carrousel-bouton-background-color: rgb(64, 50, 255); /*La couleur des boutons du carrousel*/

  --carrousel-text-bouton-color: black; /*La couleur du texte des boutons du carrousel*/
}

/*Variables des assets couleurs de chaque catégorie du site*/
:root {
  --bouton-projet-arcade-color: rgba(64, 50, 255, 1); /*Couleur du bouton pour la catégorie arcade*/

  --bouton-projet-jt-color: rgba(0, 151, 143, 1);  /*Couleur du bouton pour la catégorie jour de la terre*/

  --bouton-projet-finissant-color: rgba(208, 147, 8, 1);  /*Couleur du bouton pour la catégorie des finissants*/

  --sous-titre-arcade-color: rgb(221,174,255); /*Couleur du sous-titre pour la catégorie arcade*/

  --sous-titre-jt-color: rgb(206,247,204); /*Couleur du sous-titre pour la catégorie jour de la terre*/

  --sous-titre-finissant-color: rgb(218, 200, 101); /*Couleur du sous-titre pour la catégorie finissants*/

  --background-color-arcade: linear-gradient(177deg, #4032FF 11.95%, #362CB6 28.39%, #21212100 82.04%); /*Couleur de background de la catégorie graphisme*/

  --background-color-graphisme: linear-gradient(177deg, #00978F 5.29%, #00978F 14.9%, #056863 31.25%, #21212100 84.62%); /*Couleur de background de la catégorie graphisme*/

  --background-color-finissant: linear-gradient(177deg, #D09308 5.29%, #D09308 14.9%, #7A5C04 31.25%, #21212100 84.62%); /*Couleur de background de la catégorie finissant*/
}

/*Variables couleurs de la section recherche*/
:root {
  --background-color-recherche: linear-gradient(177deg, #1B77BD 11.95%, #1B77BD 28.39%, #21212100 82.04%); /*Couleur de background de la section recherche*/
  
  --bouton-recherche-color: #1b77bd; /*Couleur du bouton de la section recherche*/
}

h1, h2, h3, h4, h5, h6, a, .arcade-details p {
  /*font-family: var(--title-font);*/
  letter-spacing: var(--title-letter-spacing);
}