body{
 background-color: black;
 padding: 0;
 margin: 0;
 background-image:url(ressources/plancton.gif);
     }


#header {
  padding: 0;
margin: 0 0 8% 0;
width: 100%;
overflow: hidden;
}
#plancton{
  width : 100%;
  position:fixed;
  z-index:0;
  opacity:0.5;
}
.boutonmenuprincipal {
opacity:0.5;
color: #aeb5e8;
border: none;
cursor: pointer;
font-size: 15px;
padding: 20px;
  font-family: 'Hepta Slab', serif;
  background-color: black;
}

.boutonmenuprincipal:hover {
opacity:1;
}
.dropdown {
position: fixed;
margin : 3% 0 0 83%;
background-color: black;

}
.dropdown:hover {
opacity:1;
}

.dropdown-child {
display: none;
background-color: black;
min-width: 50px;
height :100%;
}
.dropdown-child a {
color: #aeb5e8;
padding: 20px;
text-decoration: none;
display: block;
opacity:0.5;
font-size: 15px;
  font-family: 'Hepta Slab', serif;
}
.dropdown-child a:hover {
opacity:1;
font-size: 18px;

}

.dropdown:hover .dropdown-child {
display: block;
}


h1 {
  font-size : 100px;
  margin: 1% 1% 1% 6.5%;
		font-family: 'Hepta Slab', serif;
    color: #1b152c;
    width : 80%;
    }

.article{
  display: block;
  width: 100%;
margin : 0 0 15% 0;
}
#art10{margin:0;
padding:0;}
.grid {
/* background-color: black; */
    display: grid;
  	width: 100%;
  grid-template-columns: 35% 50% 15%;
    grid-auto-rows: minmax(100px, auto);
  margin : 0;
}


#epongear {
  margin : 0;
  padding : 0;
}

#epongeimg {
  margin : 0% 0% 0% 0%;
  padding : 2% 0 0 2%;
}

h2 {
  width: 80%;
  font-size : 50px;
		font-family: 'Hepta Slab', serif;
    color: #aeb5e8;
    opacity:0.5;
    margin : 0 0 5% 5%;
}
h2:hover {
  opacity:1;
  }

i {
  font-size : 20px;
  opacity:0.8;
}
i:hover {
  opacity:1;
}

.texte {
  grid-column :1;
color: #aeb5e8;
opacity:0.3;
width : 68%;
margin : 0 0 5% 15%;
}
.texte:hover {
  opacity:100;
}
.italic {
  font-size: 20px;
  font-style: italic;
  margin-top : 5%;
}

b {
line-height : 2em;
}
p{margin-bottom: 30%;}

.legende {
  font-size: 15px;
  font-style: italic;
  color: #aeb5e8;
  grid-column : 3;
}
.credit{
padding-top:50%;
color: #575a73;
font-style: normal;
}
a{color: #575a73;
text-decoration:none;
}
a:hover {  color: #aeb5e8;}

.zoneimg {
  margin : 0% 0% 5% 0%;
  padding : 2%;
  grid-column: 2;
  }

.illu {
    width :90%;
    z-index: 1;
}
#baudroie {
  width: 73%;
}
#crevette {
  width : 80%;
}

@media (min-width: 500px) and (max-width: 700px) {
  body{width:100%;}
  .article {
          display: block;
      width:97%;
    padding : 0;
  margin : 30% 0 10% 0;}
  .texte {opacity:1;
      width: 90%;
      margin : 2% 0 8% 2.5%;
      padding : 2%;
  }
#plancton {
  width :300%;
}

  h1{
    font-size : 60px;
    margin : 0 0 0 2.5%;
    padding : 2%;
  }

h2{
  font-size : 35px;
  width : 60%;
  opacity :1;
  margin : 0 0 3% 2.5%;
  padding : 2%;
}
  .illu {
    width: 90%;
    margin : 0 0 0 5%;
  }
#baudroie{
  width: 100%;}
#crevette{
    width: 100%;}
#art10{
  margin-bottom : 0;
}
  .grid {
  /* background-color: black; */
      display: block;
    	width: 100%;
      column-count: 1;
      margin: 0 0 0 0;
  }
  .zoneimg {
    margin : 0% 0% 5% 0%;
    padding : 2% 2% 0 2%;
    }
.legende {display : none;}
.dropdown {display:none;}