/* présentation */
.beyond1 {
	  position: relative;
  border: 1vh solid;
  animation: shine 2s infinite;
  width: 20vw; 
  height: 20vh;
  overflow: scroll;
  border-collapse: collapse;
  width: 110%; 

}
.textebeyond {
	font-size: 1.5vw;
	margin-left: 15%;
	color: rgb(220,20,60);
}

/* LES TEXTES ET TITRES */
h2 {
	position: relative;
 font-family: 'Roboto', sans-serif;
 font-size: 2vw;
 color: rgb(133,6,6);
}

h3 {
	font-size: 1.7vw;
}
.titre1{
	left: -8%;
}
.titre2{
	
}
.titre3{
	left: -9%;
}
.titre4{
	left: -2%;
}
.titre5{
	left: -40%;
}
.texte {
	font-size: 1.5vw;
	color: rgb(220,20,60);
}

/* bref descriptif */

.apparitions img {
  position: relative;
  border: 1vh solid;
  animation: shine 2s infinite;
  width: 25vw;  
  height: 25vh; 
  overflow: scroll;
  border-collapse: collapse;
  	width: 100%; 
    justify-content: center; /* Centre horizontalement */
    align-items: center;
	    margin: 7vh ;
}

/* les liens */
.cinq {
  font-size: 3.5vh;
}

/* les interprétations */

.quatre img {
  width: 15vw;  
  height: 20vh;
  overflow: scroll;
  border-collapse: collapse;
  border: 10px solid;
  text-align: center;
  border-radius: 4px;

}
  
/* villains et alliés */
.trois {
  position: relative;
  border: 1vh solid;
  width: 100%;
  border-collapse: collapse;
  border-radius: 4px;
}
.trois tr{
    color: rgb(255,0,0); 
    font-family: 'Monaco', Monospace;
    font-size: 2vh 2vw;
    font-size: 2.5svw;
    margin: 1vh ;
  
}
.trois td, th{
  border: 1vh solid;
  text-align: center;
  padding: 10px;
}
.trois img {
  border: 2vh solid;
  animation: shine 2s infinite;
  width: 25vw;  
  height: 25vh; 
  overflow: scroll;
  border-collapse: collapse;

}
  

/* Arrière-plan */
body {
    background: 
        linear-gradient(to bottom, rgba(255, 0, 0, 0.3), rgba(255, 0, 0, 0.1)),
        url('https://steamuserimages-a.akamaihd.net/ugc/2466354670979774708/4B8B1CBDF16337471F1D410462B17FED8BE776D3/?imw=5000&imh=5000&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=false');
    background-size: cover;
    background-position: center;
/* CADRE */
}
.contenu {
    color: rgb(195,20,0);
    box-sizing: border-box;
    border: 5px solid red; 
    border-radius: 10px;  
    padding: 10px;         
    animation: shine 2s infinite;
    position: relative;
	width: 70%; /* Prendre 70% de la largeur de la page */
	margin: 0 15%; /* 15% de marge à gauche et à droite */
    display: flex;
    flex-direction: column;
    align-items: center;
	background-color: rgb(35,35,35);
}
@keyframes shine { /* ANIMATION DU BORD DU CADRE */
    0% {
        border-color: rgb(20,0,0);
    }
    25% {
        border-color: rgb(75,0,0);
    }
    50% {
        border-color: rgb(152,0,0);
    }
    75% {
        border-color: rgb(75,0,0);
    }
    100% {
        border-color: rgb(20,0,0);
    }
}
/* LE TITRE */
.titre {
    position: relative; 
    justify-content: center; /* Centre horizontalement */
    color: rgb(235,35,35);
    font-family: monospace;
    text-align: center;
	  font-size: 3vw;
    font-family: 'Impact', fantasy;
	  text-shadow: 10px 8px 20px rgb(0, 0, 0);
	      text-shadow: 
        -1px -1px 4px black,
        1px -1px 4px black,
        -1px  1px 3px black,
        1px  1px 3px black;
}
/* LES BOUTONS */
.bandeau {
    color: rgb(195,20,0);
    text-align: left;
	  font-size: 1vw;
    border: 5px solid red;
    border-radius: 10px; 
    padding: 10px;         
    position: relative;
    width: 68.5%; 
    margin: 0 15%; 
    display: flex;
    flex-direction: column;
    align-items: center;
	background-color: rgb(15,15,15);
}
.boutons {
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    margin-right: 1.7%;
}
button {
    display: inline-block;
    padding: 10px 20px;
    background-color: rgb(139, 0, 0);
    color: rgb(29, 20, 19);
    border-radius: 4px;
    border-color: rgb(139, 0, 0);
    transition: background-color 0.3s ease;
	  font-family: arial;
    font-size: 20px;

}
.boutons li {
    display: inline-block;
}
.boutons li :hover {
    background-color: rgb( 220,20,60);
}

/* Style du bouton lorsque activé (clic) */

.boutons li :active {
    background-color: rgb( 250,65,105);
}
/* Pour Commentaire */