body {
  background-color: black;
  font-family: 'Open Sans', sans-serif;
  margin: 0px;
  
  }
h1 {
  border: 5px solid #333 ;
  border-radius: 5px;
  background-color: #ddd;
  font-family: 'Carter One', cursive;
  color: #000;
  box-shadow: 2px 2px 10px #bbb;
  padding: 0px 10px;
  margin: 20px 10px;
  }

.gras {
 font-family: 'Open Sans', sans-serif;
 font-weight: 900;
}

.para , .pdf , .historique {
  color: #aaa;
  background-color: #000;
  width : 80% ;
  margin : 0px auto;
  padding: 0px;
  border: 5px solid #333 ;
  border-radius: 5px;
  box-shadow: 2px 2px 10px #bbb;
}
.photo{
  color: #aaa;
  background-color: #000;
  width : 80% ;
  margin : 0px auto;
  padding: 0px;
  
 }

.para{
  padding:0px 15px;
}
.pdf {
  background-color: #aaa;
  text-align: center;
  width: 600px;  
}
.centre {
  text-align: center;
}

header{
  
  text-transform: uppercase;
  text-align: center;
  font-family: 'Rubik Mono One', sans-serif;
  font-size: 95px;
  background-color: #000;
  color: #fff;

}


footer {
  border: 5px solid #333 ;
  border-radius: 5px;
  text-decoration: none;
  font-family: 'Carter One', cursive;
  font-size: 20px;
  text-align: center;
  background-color: #ddd;
  color: #000;
  box-shadow: 2px 2px 10px #bbb;
  margin: 20px 10px;
}

strong{
  font-family: 'Rubik Mono One', sans-serif;

}
em, h2 {
  font-family: 'Carter One', cursive;
  font-style: normal;
  }
  
.historique img{
  height: 300px;
  border: 2px solid #fff;
}

.presentation  img{
  float : left;
  border : 5px solid #666;
  box-shadow: 2px 2px 10px #eee;
}
.bio {
  float : left;
  margin-left: 20px;
}
.presentation h2{
  clear : left;
  padding-top: 50px;
}
.presentation h4{
  clear : left;
  margin-top: 50px;
  border : 5px solid #666;
  box-shadow: 2px 2px 10px #eee;
  font-family: 'Carter One', cursive;
  font-style: normal;
  font-size: 30px;
}

.bd img{
  height: 700px;
  border: 5px solid #fff;
  border-radius: 5px;
  box-shadow: 5px 5px 10px #ddd;
  
}

.fleche img{
  
  clear: both;
  height: 40px;
  border: 5px solid #666;
  border-radius: 5px;
}

/* mise en forme du menu*/

nav li{
  list-style-type: none;
  float:left;
}

nav ul{
  margin: 0px;
  padding: 0px;
}

nav{
  width: 100%;
  background-color: #424558;
  
}

nav a{
  display: inline-block;
  text-decoration: none;
  padding: 20px 30px;
  color: #fff;
  font-size: 15px;
}
.table{
  display: table;
  margin: 0 auto;
}

.menu-ind:hover{
  border-top: 5px solid rgb(64,200,130);
  background-color: rgba(64,200,130,0.15);
}
.menu-bio:hover{
  border-top: 5px solid rgb(241,211,79);
  background-color: rgba(241,211,79,0.15);
}
.menu-pho:hover{
  border-top: 5px solid rgb(000,112,192);
  background-color: rgba(000,112,192,0.15);
}
.menu-vid:hover{
  border-top: 5px solid rgb(228,77,38);
  background-color: rgba(228,77,38,0.15);
}
.menu-eve:hover{
  border-top: 5px solid rgb(28,200,15);
  background-color: rgba(28,200,15,0.15);
}
.menu-fic:hover{
  border-top: 5px solid rgb(0,115,168);
  background-color: rgba(0,115,168,0.15);
}
.menu-cont:hover{
  border-top: 5px solid rgb(255,255,0);
  background-color: rgba(255,255,0,0.15);
}
.menu-mer:hover{
  border-top: 5px solid rgb(157,30,255);
  background-color: rgba(157,30,255,0.15);
}
.menu-jeu:hover{
  border-top: 5px solid rgb(27,168,11);
  background-color: rgba(27,168,11,0.15);
}
nav li:hover a{
  padding: 15px 30px 20px 30px;
}