/* Initiation à la feuille de style CSS
Ceci permet d'écrire des commentaires en CSS
*/

body{
	background-color:#b0e0e6; /*on modifie la balise body en lui ajoutant une couleur de fond*/
}

h1{						/*on modifie ici la balise h1*/
	font-size: 40px;
	background-color:rgb(253, 255, 135);
	text-align:center;
	font-style:italic;
}

h2{					/*on modifie ici la balise h2*/
	font-size: 14px;
	color:rgb(255,0,0); /* On passe le texte en rouge en utilisant le RVB (rouge,vert,bleu)*/
	text-align:center; /* Alignement du texte : Centré*/
	text-transform:uppercase; /*On passe le texte en majuscule*/
	font-style:italic;
}

h3{				/*on modifie ici la balise h3*/
	color:rgb(0,150,0);
	
}

footer{
	color:rgb(75,0,130);
	font-family:fantasy;
	text-align:center;
	font-style:italic;
	
}

nav{
	display:inline-block;
}

a:link {
	text-decoration:none;
}

a:visited { 		/* Ici on définit les caractéristiques des liens*/
  color : red;
}

a:hover {		/*on modifie la couleur d'un lien survolé*/
  background-color : red;
  color : white;
  text-decoration:none;
  font-style : italic;
}

/* Ici on ne modifie pas les propriétés des balises mais on crée des classes*/

/* Création de la classe menu */
.menu {
	display: inline-block;
	list-style-type: none;
}

/* Création de la classe me */
.m {
	display: inline-block;
}

/* Création de la classe menutitem */
.menuitem {
	text-decoration: none;
	font-family:fantasy;
	color: #6a2a2a;
	border-style: solid;
	border-width: 2px;
	border-radius: 5px 25px; /*donne l'aspect arrondi au bouton*/
	border-color: #6a2a2a;
	background-color : #feee04;
	padding: 20px;
}
	
.important {
	color:rgb(233,233,100);
	font-style:italic;
	font-weight:bold;
	background-color:rgb(245,0,0);
}

.para1 {
	color:rgb(199,44,72);
	font-style:italic;
	font-family:fantasy;
}

.para2 {
	font-family: sans-serif;
	color:rgb(0,0,0);
}
.adroite{
	display: block;
    margin-left: auto;
    margin-right: auto;
    width: 20%;
	
}
.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 50%;
  background-color: #008CBA;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}

.container:hover .overlay {
  width: 100%;
  left: 0;
}

.text {
  white-space: nowrap; 
  color: yellow;
  font-size: 60px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}