#rainbow-pre {
  font-family: monospace;
  white-space: pre;
  line-height: 1.2;
  background: linear-gradient(
    90deg,
    red,
    orange,
    yellow,
    green,
    cyan,
    blue,
    indigo,
    violet
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow-animation 5s linear infinite;
  background-size: 500%; /* Double la taille pour un effet fluide */
}
@keyframes rainbow-animation {
  0% {
    background-position: 500% 250%;
  }
  100% {
    background-position: 250% 0%;
  }
}

/* Conteneur général pour tous les groupes de <pre> */
.flex-container {
  display: flex;
  justify-content: center; /* Centre les éléments horizontalement */
  /* align-items: center; /* Centre les éléments verticalement */
  gap: 2%; /* Ajoute un espace entre les blocs */
  margin: auto; /* Centre le conteneur et ajoute un espace autour */
  width: 100%; /* Prend toute la largeur disponible */
}
/* Mode debug */
.debug .flex-container {
  border: 1px solid #ddd; /* Optionnel : bordure pour visualiser les blocs */
  background-color: #f0f0f0; /* Optionnel : couleur de fond */
}

/* Styles par défaut pour tous les <pre> */
pre {
  display: flex;
  justify-content: center; /* Centre le contenu horizontalement */
  /* align-items: center; /* Centre le contenu verticalement */
  font-family: "Courier New", Courier, monospace;
  white-space: pre;
  letter-spacing: 0em;
  line-height: 1.2;
  padding: 1px;
  text-align: center;
  box-sizing: border-box; /* Inclut le padding dans la largeur */
}

/*Mode debug */
.debug .pre {
  border: 1px solid #ddd; /* Bordure pour visualiser les blocs */
  background-color: #f0f0f0; /* Couleur de fond */
}

/* Taille spécifique pour chaque <pre> */
.haribon_logo {
  font-size: 0.5em;
  background-color: rgb(255, 208, 0);
}

.haribon_char {
  font-size: 1em;
}

.stupid_ascii {
  font-size: 0.5em;
}

.flex-row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  padding: 0 1%;
  flex-grow: 1;
}
/* Mode debug */
.debug .flex-row {
  border: 1px solid #ddd; /* Bordure pour visualiser les blocs */
  background-color: #f0f0f0; /* Couleur de fond */
}

.flex-row > pre {
  flex-basis: 30%;
  text-align: center;
  box-sizing: border-box;
}

/* Styles spécifiques pour les <pre> */
.art_ascii,
.projets_ascii,
.archives_ascii {
  width: 100%; /* S'assure qu'ils prennent toute la largeur de leur parent */
  font-size: 0.7em;
  padding: 0;
  /*margin-top: auto; /* Pousse l'élément vers le bas */
  /*margin-bottom: auto; /* Pousse l'élément vers le haut */
  box-sizing: border-box;
  text-align: center; /* S'assure que le texte est centré */
  justify-content: center; /* Centre le contenu horizontalement */
  align-items: center; /* Centre le contenu verticalement */
}
/* Mode debug */
.debug .art_ascii,
.debug .projets_ascii,
.debug .archives_ascii {
  border: 1px solid #f08080; /* Bordure pour visualiser les blocs */
  background-color: #f9f9f9c4; /* Couleur de fond */
}

.about_ascii {
  font-size: 0.5em;
}

.footer {
  bottom: 0;
  position: relative;
  margin-top: auto;
}

.mini_haribon_logo {
  line-height: 1.2;
  font-size: 0.4em;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

/* Media query pour les écrans de petite taille */
@media (max-width: 600px) {
  .flex-row {
    flex-direction: column; /* Force la disposition en colonne */
    align-items: stretch; /* Étire les éléments sur toute la largeur */
    /* justify-content: center; /* Centre les éléments verticalement */

    /* Ajoute des marges en haut et en bas pour espacer les éléments */
    /*margin: 25px 0; /* Ajoute un espacement vertical */
    padding: 0 5%; /* Ajoute un espacement horizontal */
  }

  .flex-row > pre {
    flex-basis: auto;
    margin-bottom: 10px;
  }

  .haribon_char {
    font-size: 0.8em; /* Ajuste la taille de la police pour les petits écrans */
  }

  .haribon_logo {
    font-size: 0.4em; /* Ajuste la taille de la police pour les petits écrans */
  }

  .stupid_ascii {
    font-size: 0.4em; /* Ajuste la taille de la police pour les petits écrans */
  }

  .art_ascii,
  .projets_ascii,
  .archives_ascii {
    font-size: 0.6em; /* Ajuste la taille de la police pour les petits écrans */
  }

  .about_ascii {
    font-size: 0.3em; /* Ajuste la taille de la police pour les petits écrans */
  }

  .mini_haribon_logo {
    font-size: 0.3em; /* Ajuste la taille de la police pour les petits écrans */
  }
}

/* UNUSED
.invert {
  filter: invert(100%);
}
*/

.page .flex-container {
  width: auto;
  justify-content: flex-start; /* Force l'alignement à gauche */
  margin-left: 10px; /* Ajoute une marge à gauche */
  margin-right: auto; /* Pour éviter un centrage par marge */
  margin-top: 0;
  margin-bottom: 0;
}
.page .haribon_char {
  display: block;
}

.page .art_ascii,
.page .projets_ascii,
.page .archives_ascii {
  width: auto; /* S'assure qu'ils prennent toute la largeur de leur parent */
  font-size: 0.5em;
  box-sizing: border-box;
  text-align: center; /* S'assure que le texte est centré */
  justify-content: left; /* Centre le contenu horizontalement */
  margin-left: 10px; /* Ajoute une marge à gauche */
  margin-right: auto; /* Pour éviter un centrage par marge */
}

.home {
  margin: 0;
  align-content: center;
  line-height: 1.5;
  background-color: rgb(56, 56, 56);
  color: rgb(255, 208, 0);
}

ul {
  list-style-type: none; /* Supprime les puces */
  padding: 10px; /* Supprime le padding par défaut de la liste */
  margin: 0; /* Supprime la marge par défaut de la liste */
}

/* Tu peux ensuite styliser les liens eux-mêmes */
a {
  color: blue;
  font-family: "Courier New", Courier, monospace;
  /* Ajoute d'autres styles comme la marge, le padding, la couleur au survol, etc. */
}

a:hover {
  text-decoration: underline; /* Souligne au survol */
}