body {
  background-color: dimgray;
  margin:0;
}

.gauche {
   background-color: hotpink;
  height:667px;
  position:fixed;
  left:0;
  top:0;
  width:17%;
}

.logo img{
  width:100%;
 border:solid white;
}

.droite {
  background-color: hotpink;
  height:667px;
  position:fixed;
  right:0;
  top:0;
  width:17%;
}

.milieu {
  background-color: lightpink;
  height:667px;
    position: fixed;
  right: 17%;
  left: 17%;
  top: 0;
  border-left:solid white;
  border-right: solid white;
}
.header {
  background-color: black;
  align-content: center;
  width:100%;
  height: 15%;
  text-transform:uppercase;
  font-size:1.5vw;
}

.trous {
    background-color: black;
    height:80%;
    border-top:dashed white;
    border-bottom:dashed white;
    border-width: thick;
}

.cases{
   display: grid;
  grid-template-areas:
'. vu avoir blog jeux nous .';
  height: 100%;
  justify-content: space-evenly;
}

.cases div {
    background-color: lightgray;
  border: solid black;
  margin-top: 1 em;
  margin-bottom: 1 em;
  width: 8vw;
  align-content: center;
  text-align: center;
    
}

.vu .dropbtn { 
border:none;
background-color: inherit;
height:100%
}

.vu:hover, .dropbtn {
  background-color: hotpink;
}

.dropdown-content {
  display: none;
border:none;
  position: absolute;
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding-bottom:25px;
    padding-top: 25px;
  text-decoration: none;
  display: block;
  text-align: center;
    background-color: lightpink;
}

.dropdown-content a:hover {
  background-color: white;
}

.vu:hover .dropdown-content {
  display: block;
border:none;
}

.allez {
    width:67%;
    height:667px;
   margin:auto;
    border-right:2px solid black;
    border-left:2px solid black;
}