/*"
    Auteur      : Lopes Tiago
    Date        : 19.12.2019
    Description : Style CSS
*/
* {
 padding: 0;
 margin: 0;
}

body{  
 font-family: Arial, Helvetica, sans-serif;
 background-image:url(../images/background.jpg);
 background-attachment: fixed;
 background-repeat: no-repeat;
 background-size: cover;
 padding-top: 0em;
 padding-right: 5em;
 padding-bottom: 0em;
 padding-left: 5em;
 font-size: 120%;
} 

img{
 max-width: 100%;
 height: auto;
}

/* Adapte le logo concernat la taille de la fenêtre */
.image_logo{
 margin: auto;
 width: 30%;
 padding: 10px;    
}

/* Fond gris clair */
.fond_gris{
 background-color: rgba(140, 140, 140, 0.9);
 min-height: 90vh;
 margin-bottom: 1.1em;
}

/* ------------------------Menu de navigation-------------------------- */
nav {
 text-align: center;
 font-size: 110%;
}

ul {
 background-color: rgb(55, 55, 55);
 list-style-type: none;
 margin: 0;
 padding: 0em;
 overflow: hidden;
 border-bottom: 1px solid rgb(55, 55, 55);
 border-bottom-left-radius: 5px; 
 border-bottom-right-radius: 5px; 
}

nav li{
 float: left;  
}

/* Change la couleur du quand on passe la sourris */
li :hover{
 background-color: rgb(22, 22, 22);
}

li a {
 display: block;
 color: white;
 text-align: center;
 padding: 0.3em 1em;
 text-decoration: none;
}

/* Change la couleur dans le menu si on se trouve sur la page */
.active{
 background-color: rgb(255, 209, 26);
}

/* Adapte le menu concernant la taille */
@media screen and (max-width: 800px) {
nav li {
  float: none;
  width: 100%;
  }
}

/* ----------------------------Pied de page---------------------------- */
footer{
 margin-top: 1%;
 font-size: 0.5em;
 position: fixed;
 left: 0;
 bottom: 0;
 width: 100%;
 background-color: rgb(55, 55, 55);
 color: white;
 text-align: center;
}

/* lien cliquable vers les sources */
.sources{
 color: white;
 text-align: center;
 padding: 0.3em;
 text-decoration: none;
}

/* --------------------------Ligne separatrice------------------------- */
hr{
 border: 2px solid rgb(255, 209, 26);
 border-radius: 5px;
 width: 80%;
 margin-left: 9%;
 margin-bottom: 1%;
}

/*------------------------------ Titre--------------------------------- */
header{
 color: white;
 font-size: 130%; 
 margin: 0.5em;
}

h3{
 text-align: center;
 font-size: 2em;
 color: white;
 width: 100%;
}

/* Texte introduction  */
.txtIntro{
 color: white;
 margin: auto 10%;
 text-align: justify;      
}

/* Gif a droite du texte */
.img_droite{
 float: right;
 margin-left: 2%;
 margin-right: 10%;
 max-width: 50%;
 height: auto;
 border-radius: 20px;
}

/* -------------------------- Page Personnages -------------------------*/
.container-perso{
 display: flex;
 flex-direction: row;
}
/* Heros Container */
.hero-container{
 margin-top: 3%;
 margin-left: 6%;
 margin-right: 3%;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 background-color: rgb(255, 209, 26);
 border-radius: 4px;
 width: 40%;
}

.hero-container > div{
 max-width: 20%;
 height: auto;
 margin: 0.3em;
}

.hero-container img{
 display: block;
 width: 100%;
 height: auto;
}

/* Vilains Container */
.vilain-container{
 margin-left: 3%;
 margin-right: 6%;
 margin-top: 3%;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 background-color: rgb(255, 209, 26); 
 border-radius: 4px;
 width: 40%;
 align-items: flex-start;
}

.vilain-container > div{
 max-width: 20%;
 height: auto;
 margin: 0.3em;
}

.vilain-container img{
 display: block;
 width: 100%;
 height: auto;
}

/* Images des Containers*/
.container-images{
 position: relative;
 width: 14%;
 height: auto;
}
/* Animations sur les personnages*/
.overlay-all, .overlay-mido, .overlay-baku, .overlay-ocha, .overlay-todo, .overlay-kiri, .overlay-aiza, .overlay-all-for-one, .overlay-tomu{
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 height: 100%;
 width: 100%;
 opacity: 0;
 transition: .4s ease;
}
/* Changement de couleurs pour chaque personnage */
.overlay-all{
 background-color: #ffd900;
}

.overlay-mido{
 background-color: #00cc66;
}

.overlay-baku{
 background-color: #e65c00;
}

.overlay-ocha{
 background-color: #ff8bff;
}

.overlay-todo{
 background-color: #47d1ff;
}

.overlay-kiri{
 background-color: #e60000;
}

.overlay-aiza{
 background-color: #737373;
}

.overlay-all-for-one{
 background-color: #600080;
}

.overlay-tomu{
 background-color: #600080;
}

.container-images:hover div{
 opacity: 1;
}
/* texte sur les images */
.text-images {
 text-align: center;
 color: white;
 font-size: 100%;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
}
/*--------------------- Page Personnage Indivuduels --------------------*/
/* Change la couleur et allignement du texte */
.txt-Personnages{
 color: white;
 text-align: justify;
 margin-left: 20%;
 margin-right: 3em;
 margin-top: 1em;
}

.tableau{
 text-align: center;
 border-radius: 3px;
 background-color: rgb(255, 209, 26);
 margin-left: 5%;
 margin-right:  15%;
 margin-bottom: 3%;
 border: 5px solid rgb(255, 209, 26);
 color: white;
}


.tableau td, th{
 font-size: 80%; 
 border-bottom: 2px solid rgb(255, 209, 26);
 border-collapse: collapse;
}

.tableau img{
 width: 80%;
}

.perso-container{
 display: flex;    
}

.center{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

/*-------------------------- Page Sources ------------------------------*/

/* Taille et couleur */
.sources-txt a {
  color: white;
  text-decoration: none;
  font-size: 1em; 
}

/* centre le texte */
.sources-txt p{
  margin:auto;
  text-align: center;
}

.sources-txt a:hover{
  background-color: rgb(255, 209, 26);
}

/*-------------------------- Page musiques -----------------------------*/
/* Bordure Jaune au tour des vidéos  */
video{
 background-color: rgb(255, 209, 26);
 border-radius: 5px;
 border: 8px solid rgb(255, 209, 26);
 max-width: 100%;
 height: auto;
 margin-bottom: 1%;
}

.videos-container{
 margin-left: 9%;
 margin-right: 9%;
 margin-top: 3%;
 max-width: 100%;
 height: auto;
 text-align: center;
}

/*---------------- Medias pour les changement de tailles ---------------*/
/* Envoi le container en cologne */
@media screen and (max-width: 900px) {
.perso-container{
 width: auto;
 display: flex;
 flex-direction: column;
 }
}
/* Envoi le tableau en bas du texte pour la page perso individuel */    
@media screen and (max-width: 900px) {
.tableau {
 display: flex;
 flex-direction: column;
 margin: auto;
 margin-top: 1em;
 margin-bottom: 1em;
 }
}
/* Envoi les vidéos en bas en cologne */
@media screen and (max-width: 1475px){
.videos-container{
 display: block;
 margin-left: auto;
 margin-right: auto;
 width: 50%;
 }
}

@media screen and (max-width: 900px) {
.hero-container, .vilain-container{
 width: auto;
 margin-left: 6%;
 margin-right: 6%;
 }
}

@media screen and (max-width: 900px) {
.container-perso {
 display: flex;
 flex-direction: column;
 }
}