/*		Auteur      : Erjon Kabashi
		Date        : 06.01.21
		Description : C'est la page CSS de mon projet nommé "Evasion"

*/
/* Pour mettre la police Arial qui est beaucoup plus belle que celle
par défaut*/
body
{
	
	font-family:arial;
	
	
}
/* Afin de bien séparer le header du reste de la page */
header
{
	/*border:solid #00749e; */
}

/* C'est pour modifier les images qui se trouvent dans le tableau des 
personnages*/
.imgperso
{
	width:15em;
	height: auto;
}
/*Pour centrer les images, class très utilisé pour les images que j'intègre
aux articles */
.imgcentre
{
	
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	
	
	
}
/* pour pouvoir centrer le menu de navigation qui se trouve
à la fin et le modifier */
.imgcentremenu
{
	text-align:right;
	margin-left:65em;
	font-size:1em;
	color:blue;
	top:40em;
	position:fixed;
	list-style:none;
	
	
	

	/*border:solid #ccf5ff;*/

}
/* Pour modifier directement les icônes du menus, la taille principalement */
.imgnavigation
{
	width:10%;
	

}	
.textcentre
{
	position:fixed;
	top:9em;
	text-align:center;
	margin-left:32em;
	font-weight:bold;
	
	
	list-style:none;
}
/*Pour tester ce qui ne va pas, c'est un débugger */
.test
{
	position:fixed;
	top:0px;
	width:100%;
	
	background-color: rgba(255, 230, 153, 0.7);
	
	
}
/*Tout ce qui est en lien avec les tableaux : 
menutable sert à gérer le tableau où il y a le menu principal */
.menutable
{
	width:100%;
	
	
	
	
	position:sticky;
	
}
.nomsaison
{
	width:100%;
	position:fixed;
	top:9em;
	text-align:center;
	
	font-weight:bold;
	
	
	
	
	
	
	
	position:sticky;
}
.saisonactuel
{
	
	color:blue;
	
}

/* Il sert pour le grand tableau où il y a les images et informations des 
personnages */
.tableaupersonnage
{
	width:100%;
}

/* Il est là afin de pouvoir modifier la taille des cellules (éléments) du
tableau où se trouvent les informations des personnages */
.informationpersonnage
{
	width:50%;

}
/*Pour modifier la taille des cellules en général */	
td
{
	
	text-align:center;
	width:20%; 
	
}	
/*Au sujet des articles, pour avoir le bon alignement, la bonne taille,
un fond qui permet de mieux lire, etc... */	
article
{
    text-align:justify;
    padding: 10px;
    font-size: 20px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.8);
    margin-left:50px;
    margin-right:50px;   

}
/*Images se trouvant derrière le titre de la série correspondant le mieux à
la saison, le chiffre à côté de "menu" sert à préciser la saison à laquelle
elle se rapporte */
.menu1
{
	
/*	color:black;
	
	Le code suivant a été récupéré sur 
	https://www.w3schools.com/cssref/pr_background-image.asp */
	
	
	
}
.menu2
{
	/*background-size:cover;
	background-repeat:no-repeat;
	background-image:url("https://i.pinimg.com/originals/09/83/0d/09830dd7299eb3faff8270adb249a9dd.jpg")
	
	*/
}
.menu3
{
	/*background-size:cover;
	background-repeat:no-repeat;
	background-image:url("https://1.bp.blogspot.com/-VIxSPCeMZ-4/WOLQ1DkDpFI/AAAAAAAAZ1U/Jhi36lhLtNgIF1Ifz5ZZ-e3WSv_8T7XAACLcB/s1600/prison-break_season3.jpg")
	*/
}
.menu4
{
	/*
	color:black;
	background-color:white;
	background-image:url("https://images.justwatch.com/backdrop/8574940/s1440/prison-break");
	background-repeat:no-repeat;
	background-size:cover;
	*/
}
.menu5
{
	/*
	color:black;
	background-color:white;
	
	
	background-size:cover;
	background-repeat:no-repeat;
	background-image:url("https://pbs.twimg.com/media/DStviQIXcAAL6hx.jpg")
	*/
}
 /*Les icones qui se trouvent dans le menu principal*/
.s1 a
{
	width:20%;
	
    padding:2em;
    height:60px;
    background-size:cover;
    display:inline-block;
    border-radius:16px;
    margin:4px;
    background-image:url("https://thumb.canalplus.pro/http/unsafe/%7BresolutionXY%7D/smart/creativemedia-image.canalplus.pro/content/0001/25/1cf3e67b8e75694b42df9cbb791cd6ab26f36c3e.jpeg")
}
.s2 a
{
	width:20%;
	
    padding:2em;
    height:60px;
    background-size:cover;
    display:inline-block;
    border-radius:16px;
    margin:4px;
    background-image:url("https://i.skyrock.net/6517/68656517/pics/2739789056_small_1.jpg")
}
.s3 a
{
	width:20%;
	
    padding:2em;
    height:60px;
    background-size:cover;
    display:inline-block;
    border-radius:16px;
    margin:4px;
    background-image:url("https://1.bp.blogspot.com/-VIxSPCeMZ-4/WOLQ1DkDpFI/AAAAAAAAZ1U/Jhi36lhLtNgIF1Ifz5ZZ-e3WSv_8T7XAACLcB/s1600/prison-break_season3.jpg")
}
.s4 a
{
	width:20%;
	
    padding:2em;
    height:60px;
    background-size:cover;
    display:inline-block;
    border-radius:16px;
    margin:4px;
    background-image:url("./s4.png")
}
.s5 a
{
	width:20%;
	
    padding:2em;
    height:60px;
    background-size:cover;
    display:inline-block;
    border-radius:16px;
    margin:4px;
    background-image:url("https://i.pinimg.com/originals/66/a3/b5/66a3b5064513551577056221bead7ba9.jpg")
}
/* Animation du menu principal */
.s1 a:hover 
{
  border:10px ;
   box-shadow: 6px 6px 0px #386178;

}
.s2 a:hover 
{
  border:10px  ;
   box-shadow: 6px 6px 0px #386178;

}
.s3 a:hover 
{
  border:10px  ;
   box-shadow: 6px 6px 0px #386178;

}
.s4 a:hover 
{
  border:10px ;
   box-shadow: 6px 6px 0px #386178;

}
.s5 a:hover 
{
  border:10px ;
   box-shadow: 6px 6px 0px #386178;

}
/*Les fonds qui se trouvent derrière le texte (derrière les articles),
ils correspondent au paysages auquelles la saison se déroulera principalement*/
.fonds1
{
	background-attachment:fixed;
	color:black;
	background-color:white;
	
	
	background-size:cover;
	background-repeat:no-repeat;
	background-image:url("https://1.bp.blogspot.com/_wd_PRBwHUlQ/R0BDfrCQ5rI/AAAAAAAAAA0/w8C5yRAuzZc/S660/117-210.jpg")
}
.fonds2
{
	background-attachment:fixed;
	color:black;
	background-color:white;
	
	
	background-size:cover;
	background-repeat:no-repeat;
	background-image:url("https://upload.wikimedia.org/wikipedia/commons/9/9a/20120324_081_Crescent_City%2C_Illinois.jpg");
	
}
.fonds3
{
	background-attachment:fixed;
	color:black;
	background-color:white;
	
	
	background-size:cover;
	background-repeat:no-repeat;
	background-image:url("https://i.pinimg.com/originals/d9/bc/66/d9bc66b3af7d07d99441490e21a59d6a.jpg")
	
}
.fonds4
{
	background-attachment:fixed;
	color:black;
	background-color:white;
	
	
	background-size:cover;
	background-repeat:no-repeat;
	background-image:url("http://vignette1.wikia.nocookie.net/chicago/images/3/3e/Chicago.JPG/revision/latest/scale-to-width-down/2000?cb=20060527001813")
}
.fonds5
{
	background-attachment:fixed;
	color:black;
	background-color:white;
	
	
	background-size:cover;
	background-repeat:no-repeat;
	background-image:url("https://i.ytimg.com/vi/uXHy56viWNU/maxresdefault.jpg")
	
}
/* Styles de paragraphes */

/*Pour modifier mon nom qui est en haut à gauche */
.auteur
{
	font-weight:bold;
	float:bottom;
	font-size: 12px;
	color:#ff33cc;
	
}
/* pour modifier le texte qui correspond au numéro de la saison qui se trouve
en haut à droite */
.numerosaison
{
	
	text-align:center;
	margin-right:10px;
	font-size: 2em;
	font-weight:bold;
	color:#FF5100;
	
	
	
	
}
/*Pour modifier le texte qui correspond au nom de la série */
.titre
{
	
	text-align:center;
	font-size:50px;
	
	font-weight:bold;
	color:#000000;
	
	background:white;
	padding: 20px;
   
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.8);
    margin-left:6.5em;
    margin-right:6.5em;
	
	
}
/*Il sert à modifier le texte qui se trouve dans les icones du menu principal*/
.saisontexte
{
	float:right;
	vertical-align:bottom;
	text-decoration:none;
	font-weight:bold;
	
	color:red;
}
/* il sert à modifier le titre des articles */
.soustitre
{
	text-align:center;
	font-size:25px;
	
	font-weight:bold;
	color:black;
}
/* Il sert à mettre le texte avec le bon alignement, les bonnes marges, etc... */
.txt_justifie
{
	margin-left:50px;
	margin-right:50px;
	text-align:justify;
	font-size:15px;
	
}
/*il sert à modifier le texte qui se trouve en dessous des images et qui
les décrit */
.txt_legende
{
	text-align:center;
	font-style:italic;
	font-size:0.9em;
	

}

/*il sert à modifier les paragraphes contenant des sources */

.source
{
	text-align:justify;
	font-size:0.5em;
	

}

/* C'est pour rendre le moins visible possible le titre des sections
que le vérificateur W3c me demandait. Comme ça ne ne fait pas partie de la 
maquette, je désire l'enlever, mais ce n'est pas possible alors, je décide
de le rendre le moins visible possible */
.txtvide
{
	color: #ccf5ff;
	text-decoration:none;
	

}
/*Pour modifier la mise en forme de la date qui se trouve dans la page d'accueil
 */	
#date
{
	font-weight:bold;
	font-size:0.8em;
	color:orange;
}