/* 
Auteur : Ermal Fejzaj
Date   :20.01.2021
Date modification :
Description générale de la page . Ce document css est le document relié à toutes les
pages de mon site, la mis en forme des pages provient de ce document, c'est ici
que j'ai définie la mise en forme de différentes balises tels que <h1>, <h2> et 
des classes que j'ai créée moi même tel que .bgspecific, .encadr*/

body {/*Mise en forme du contenu de la page avec la police de caractères arial*/
	font-family : arial;
}
.bgspecific{/*Classe permettant d'établir la mise en forme du backgound*/
	background-image : url("imagebackground.jpg");
	background-repeat : no-repeat;
	background-attachment : fixed;
	background-size : cover;
}
.grand{/*classe permettant la mise en forme du contenu de la page outre le
	titre et le menu de navigation*/
	background-color: rgba(0, 0, 0, 0.7);
	width: 70%;
    text-align: center;
    margin : 0 auto;
    min-width: 660px;
}
p{ /*définition de la taille de la police des paragraphes(<p>) à 2em*/
	font-size : 2em;
}
h1{/*mise en forme du titre 1(<h1>), on modifie sa taille, sa couleur et ses marges*/
	color : white;
	font-size : 5vw;
	margin-top: 0;
	margin-bottom : 20px ;
}
h1, h2{/*définition de l'alignement du texte centré pour le titre 1 et 2 (<h1>, <h2>)*/
	text-align : center;
}
img {/*définition de la hauteur et de la largeur max de toutes les images*/
	max-width : 100%;
	height : auto;
}

h2 {/*mise en forme du titre 2(<h2>), on modifie sa taille, sa couleur et ses marges*/
	color : white;
	font-size : 2.8em;
	margin-top : 5%;
	margin-left : 30%;
	margin-right : 30%;
}
.encadr{/*définition de la mise en forme de la classe encadr qui
 	contient le texte du site*/
	border-style : solid ;
	color : white;
	font-size : 1.1em;
	margin-top : 2%;
	text-align : justify;
	padding-top : 5%;
	padding-bottom : 5%;
	padding-left : 1%;
	padding-right : 1%;
	background: rgba(0, 0, 0, 0.7);
	min-width: 320px;
}
.whi{/*définition de la mise en forme de la classe whi qui s'applique au texte
 	texte introduisant les anecdotes et les apparitions*/
	color : white;
}
.tabless{ /*définition de la mise en forme de la classe tabless qui s'applique aux
 	tableaux contenant le texte et une image*/
	width : 98%;
	padding-top : 1%;
	padding-bottom : 8%;
	min-width : 70%;
	margin : auto;
}
.tabless img{ /*définition de la mise en forme des images qui se trouvent dans la 
	classe tabless*/
	width: 400px;
	min-width: 320px ;
	height : auto;
    display: block;
	margin-left:auto;
	margin-right:auto;
}
.tabless1{ /*définition de la mise en forme de la classe tabless qui s'applique aux
 	tableaux contenant les apparitions dans apparitions.html*/
	width : 98%;
	padding-top : 1%;
	padding-bottom : 8%;
	min-width : 70%;
	margin : auto;
}
.tabless1 img{ /*définition de la mise en forme des images qui se trouvent dans la 
	classe tabless1*/
	width: 220px;
	min-width: 220px ;
	max-width : 220px;
	height : auto;
    display: block;
	margin-left:auto;
	margin-right:auto;
}
.active{ /*définition de la mise en forme du menu selon la page dans laquelle on se
	trouve*/
	background-color : rgb(119,136,153);
	color : white;
}
li :hover:not(.active){ /*définition de la mise en forme du menu de navigation sur
	lequel notre curseur se trouve*/
	background-color : rgba(255,255,255, 2);
	color : rgba(0, 0, 0, 0.7);
}
ul { /*définition de la mise en forme de la liste qui contient
	le menu de navigation*/
	list-style-type: none;
	margin: 0%;
	padding: 0%;
	overflow: hidden;
	display : block;
}
li a { /*définition de la mise en forme des éléments de liste(<li>) et de la balise
	de lien (<a>)*/
   color: white;
   text-align: center;
   padding: 0.9em;
}
a{/*définition de la mise en forme de la balise de lien (<a>)*/
	background: rgba(0, 0, 0, 2);
	display: block;
	color: white;
	text-align: center;
	padding: 13px 10px;
	text-decoration: none;
	font-size : 1.5em;
}
li {/*définition de la mise en forme des éléments de liste(<li>)*/
  float: left;
  font-size : 1vw;
}
.menu {/*Classe qui permet la mise en forme de la liste qui 
	contient le menu de navigation*/
	display : flex;
	justify-content: center;
	min-width: 660px;
	height : auto;
	position: sticky;
}
.menu1 {/*Classe qui permet la mise en forme de la div qui contient les sources*/
	display : flex;
	justify-content: center;
	min-width: 660px;
	height : auto;
	position: sticky;
	top: 0;
}
.cellule {/*Classe permettant la mise en forme des articles qui se 
	trouve en bas de page de index.html*/
	height : 50%;
	width : 50%;
	max-height : 50%;
	width : 50%;
}
.barrsep{/*Classe permettant la mise en forme des barres horizontal(<hr>) séparatrice*/
	border: 1px solid white;
}
footer {/*définition de la couleur du texte qui se trouve dans le pied de page*/
		color : white;
}
.cititre{/*définition de la mise en forme du titre des citations dans le pied de page*/
	font-size: 30px;
	margin-bottom: 2%;
}
.italique {/*définition de la mise en forme du contenu des citations
	, sans marges en haut et texte en italique*/
	margin-top: 0%;
	font-style : italic;
	font-size : 1.7em;
}
.anec {/*définition de la mise en forme des cellules contenant le texte de l'anecdote
	de la page anecdotes.html*/
	color : white;
	font-size : 1.1em;
	margin-top : 2%;
	text-align : justify;
	padding-top : 5%;
	padding-bottom : 5%;
	padding-left : 1%;
	padding-right : 1%;
	background: rgba(0, 0, 0, 0.7);
	min-width: 320px;
}
.bouton {/*Classe qui permet la mise en forme du bouton
  pour revvenir en haut de la page*/
  background-color: black;
  border : white solid 3px;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.7em;
  border-radius: 8px;
}
.bouton1 {/*Classe qui permet la mise en forme des boutons de source*/
  background-color: black;
  border-right : white solid 2px;
  border-left : white solid 2px;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 97%;
  margin-bottom : 5%;
}