/* ==================== Debut - Général ==================== */
:root{
	--couleur-fond: #555566;
	--couleur-texte: #bbb;
	--couleur-texte-lien: #fff;
	--couleur-titre-ombre: #000;

	--vitesse-transition-lien: 1s;
	--vitesse-transition-lien-titre: var(--vitesse-transition-lien);
	--couleur-animation-titre-from: #afa;
	--couleur-animation-titre-to: #aaf;
	--vitesses-animation-titre: 1s;
}
/* ==================== Fin - Général ==================== */

/* ==================== Debut - Balises normales ==================== */
body{
	background-color: var(--couleur-fond);
	color: var(--couleur-texte);
}
a:link{
	color: var(--couleur-texte-lien);
	transition: var(--vitesse-transition-lien);
}
a:visited{
	color: var(--couleur-texte-lien);
}
a:hover{
	background-color: var(--couleur-texte);
	color: var(--couleur-fond);
}
/* ==================== Fin - Balises normales ==================== */

/* ==================== Debut - Classes et ID ==================== */
.titre_1{
	font-family: 'Skranji', cursive;
	/* color: var(--couleur-texte); */
	animation: animation-titre var(--vitesses-animation-titre) infinite alternate;
	text-align: center;
	text-shadow: 5px 5px var(--couleur-titre-ombre);
	font-size: 50px;
}
.titre_2{
	font-family: 'Skranji', cursive;
	color: var(--couleur-texte);
	text-align: center;
	text-transform: uppercase;
	text-shadow: 2px 2px var(--couleur-titre-ombre);
	font-size: 30px;
}
.titre_3{
	font-family: 'Skranji', cursive;
	color: var(--couleur-texte);
	text-align: left;
	text-shadow: 2px 2px var(--couleur-titre-ombre);
	font-size: 30px;
}
.contenaire-video{
	margin: 30px auto;
}

#liste{
	margin-left: auto;
	margin-right: auto;
	border: solid;
}
/* ==================== Fin - Classes et ID ==================== */

/* ==================== Debut - Animations ==================== */
@keyframes animation-titre{
	from { color: var(--couleur-animation-titre-from); }
	to { color: var(--couleur-animation-titre-to); }
}
/* ==================== Fin - Animations ==================== */