/* G É N É R A L */

/* Une requête médiatique. Il est dit que si la hauteur de l'écran est inférieure à 450 pixels, la
taille de la police h1 doit être de 28 pixels. */
@media screen and (max-height: 450px) {
  h1 {
    font-size: 28px;
  }
}

body {
  --bs-body-font-family: var(--bs-font-monospace);
  --bs-body-line-height: 1.4;
  --bs-body-bg: var(--bs-gray-100);
  /* Filtre adaptateur pour les anciens navigateurs qui ne seraient pas comptatibles avec le fond ou ses couleurs. */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#081983",endColorstr="#41088a",GradientType=1);
  animation: color-change-2x 2s infinite alternate both;
}
@keyframes color-change-2x {
  0% {
    background: rgba(8, 25, 131, 1) 20%;
  }
  10% {
    background: #0355b3;
  }
  100% {
    background: #880fb8;
  }
}

/* Style de la barre de défilement. */

::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background-color: gold;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgb(255, 187, 0);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #b47e09;
}

a {
  text-decoration: none;
  cursor: pointer;
}

/* ANIMATIONS CSS. */

/* à 0 % de l'animation, l'élément doit être déplacé de 100 %
vers la gauche. A 100% de l'animation, l'élément doit être translaté de 0% vers la gauche. */

@keyframes slideVersLaGauche {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@-webkit-keyframes scale-in-ver-center {
  0% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    opacity: 1;
  }
}

@keyframes scale-in-ver-center {
  0% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    opacity: 1;
  }
}

@-webkit-keyframes shadow-inset-center {
  0% {
    -webkit-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    -webkit-box-shadow: inset 0 0 14px 0px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 0 14px 0px rgba(0, 0, 0, 0.5);
  }
}
@keyframes shadow-inset-center {
  0% {
    -webkit-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    -webkit-box-shadow: inset 0 0 14px 0px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 0 14px 0px rgba(0, 0, 0, 0.5);
  }
}
/* transform: translatey(0px);
	animation: float 6s ease-in-out infinite; */

@keyframes float {
  0% {
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
    transform: translatey(0px);
  }
  50% {
    box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
    transform: translatey(-20px);
  }
  100% {
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
    transform: translatey(0px);
  }
}

/* Polices de texte */

@font-face {
  font-family: "Arcane Nine";
  src: url("./polices/Arcane-Nine.woff") format("woff");
}
@font-face {
  font-family: "Macondo";
  src: url("./polices/Macondo-Regular.woff") format("woff");
}
@font-face {
  font-family: "Quicksand";
  src: url("./polices/Quicksand-VariableFont_wght.otf") format("otf");
  src: url("./polices/Quicksand-VariableFont_wght.ttf") format("ttf");
  src: url("./polices/Quicksand-VariableFont_wght.woff") format("woff");
}
@font-face {
  font-family: "Cinzel";
  src: url("./polices/Cinzel-VariableFont_wght.woff") format("woff");
}
@font-face {
  font-family: "Cinzel Decorative Regular";
  src: url("./polices/CinzelDecorative-Regular.woff") format("woff");
}

@font-face {
  font-family: "Major Mono Display";
  src: url("./polices/MajorMonoDisplay-Regular.woff") format("woff");
}
@font-face {
  font-family: "Montserrat - Italic";
  src: url("./polices/Montserrat-Italic-VariableFont_wght.woff") format("woff");
}
@font-face {
  font-family: "Montserrat";
  src: url("./polices/Montserrat-VariableFont_wght.woff") format("woff");
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("./polices/CormorantGaramond-Medium.woff") format("woff");
}
/* Barre de Navigation */

nav {
  font-family: "Arcane Nine", serif;
  margin-bottom: 10px;
  animation: 1s ease-out 0s 1 slideVersLaGauche;
}
nav img {
  width: 64%;
  height: auto;
}
div.container-fluid {
  display: flex;
  align-items: baseline;
}

.btn-close:hover {
  background-color: rgb(150, 18, 18);
}
/* page d'acceuil */

/* P A G E   P R I N C I P A L E */

div.main-text {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 3pc;
  margin-bottom: 1pc;
  flex-direction: column;
}
div.synopsis {
  width: 85%;
  height: auto;
  background-color: #0961b4;
  padding: 10px;
}
div.present-lol {
  width: 85%;
  height: auto;
  margin-top: 2pc;
  padding: 10px;
  background-color: rgb(143, 10, 72);
}
div.main-text h1 {
  font-family: "Arcane Nine", sans-serif;
  text-align: center;
  color: #b47e09;
  text-decoration: underline;
  background-color: #111;
  border-radius: 15px;
}

div.main-text p {
  font-family: "Quicksand", sans-serif;
  color: white;
  text-align: justify;
  font-size: larger;
}
div.net-link {
  width: 95%;
  height: auto;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-content: center;
  gap: 30px;
  margin: auto;
}
h1.segments {
  display: block;
  text-align: center;
  font-family: "Cinzel Decorative Regular", cursive;
  border-top: solid white 3px;
  border-bottom: solid white 3px;
  background-color: #111;
  color: #b47e09;
}
div.reseaux {
  display: block;
  margin-top: 1pc;
  margin-right: auto;
  margin-left: auto;
  width: 75%;
  height: auto;
  
  background: none;
}
div.reseaux h1 {
  text-align: center;
  font-family: "Major Mono Display", monospace;
  background-color: rgb(54, 49, 49);
  color: wheat;
  border-radius: 25px;
}
div.reseaux h2 {
  margin-top: 2pc;
  font-family: "Cinzel", serif;
  text-decoration: overline;
}
div.reseaux a > img {
  padding: 5px;
}
div.reseaux img {
  display: block;
  margin-top: 1pc;
  margin-right: auto;
  margin-left: auto;
  width: 70%;
  height: auto;
  border-radius: 50%;
  transform: translatey(0px);
  animation: float 6s ease-in-out infinite;
}
/* Personnages */

/* Menu */

div.persos {
  display: flex;
  justify-content: space-around;
  align-content: center;
  gap: 30px;
  flex-wrap: wrap;
  margin: 2pc;
  text-align: justify;
}
div.card {
  color: black;
  animation-name: shadow-inset-center;
  border: solid goldenrod 3px;
}
p.card-text {
  font-family: "Macondo", cursive;
  color: black;
}

/* Wiki d'un personnage */

div.wiki {
  width: 95%;
  height: auto;
  border: solid goldenrod 2px;
  background-color: #9b460e;
}
div.wiki h1 {
  font-family: "Arcane Nine", sans-serif;
  background-color: black;
  color: gold;
  text-align: center;
  border-radius: 12px;
}
div.wiki h2 {
  font-family: "Cinzel", serif;
  margin-left: 1pc;
}

div.wiki .card {
  display: block;
  margin: auto;
}
div.wiki img {
  width: 100%;
  height: auto;
  border: solid gray 1px;
  box-shadow: #111;
  box-sizing: content-box;
}
.colonne {
  display: flex;
  flex-direction: column;
}
.info {
  display: inline;
  border-top: solid black 1px;
}
.sommaire {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2pc;
  margin-bottom: 5pc;
  width: 90%;
  
}
.sommaire h5 {
  text-align: start;
  font-family: "Arcane Nine", sans-serif;
}
.sommaire a>span {
  text-align: left;
  margin-left: 1pc;
  font-family: "Cinzel", serif;
}
.wiki-body {
  background-color: rgba(255, 255, 255, 0.096);
  border-radius: 12px;
}
.wiki-body p {
  text-align: justify;
  display: block;
  margin: 1pc;
  font-family: 'Montserrat', sans-serif;
  color: white;
}
.wiki-body h1 {
  font-family: "Arcane Nine", sans-serif;
}
.wiki-body h2 {
  font-family: "Cinzel Decorative Regular", cursive;
  margin-bottom: 2px;
  border-width: 10px;
  border-bottom: solid black 1px;
  width: max-content;
  height: auto;
}
.wiki-body h3 {
  font-family: 'Cormorant Garamond', serif;
  text-align: end;
  border-top: solid black 1px;
}
/* Galerie */

.galerie {
  width: 95%;
  height: auto;
  display: block;
  margin-top: 2pc;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3pc;
}

.galerie h1 {
  font-family: "Arcane Nine", sans-serif;
  text-align: center;
  margin-top: 3pc;
  border-radius: 10px;
  background-color: #111;
  color: #b47e09;
}
.galerie h2 {
  font-family: "Macondo", cursive;
  text-align: center;
  margin-top: 1pc;
}
.galerie img {
  display: block;
  margin-top: 1pc;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2pc;
}

/* Liste d'épisodes */

thead {
  font-family: "Arcane Nine", sans-serif;
  text-align: center;
  color: goldenrod;
}
th {
  text-align: center;
}
tbody {
  font-family: "Macondo", cursive;
  text-align: center;
  color: silver;
}
h1#playlist,
caption {
  text-align: center;
  font-size: xxx-large;
  background-color: black;
  color: goldenrod;
}
h1#playlist {
  font-family: "Arcane Nine", sans-serif;
}
caption {
  font-family: "Cinzel Decorative Regular", cursive;
}