body {
    margin:0;
}

.gauche div.rideau{
  position:fixed;
  left:0;
  top:0;
  width:17%;
  z-index: -1;
}
.logo{
  height:667px;
  position:fixed;
  left:0;
  top:0;
  width:16.5%;
  z-index: 1;
}

.rideau img{
height:667px;
width:100%;
}
.logo img{
  width:100%;
 border:solid white;
}

.droite img{
  height:667px;
  position:fixed;
  right:0;
  top:0;
  width:17%;
}

.milieu {
  background-color: black;
  height:667px;
    position: fixed;
  right: 17%;
  left: 17%;
  top: 0;
}

.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;
    
}
    
.allez {
    background-color: black;
    width:100%;
    height:667px;
    margin-top:0;
    overflow:scroll;
}

ul {
    padding-top: 50px;
    padding-bottom:300px;
    list-style-type: none;
    text-align:center;
    margin-right: 34px;
    text-transform: uppercase;
  font-size: 1.5vw;
    color:white
    
}

li {
    padding-top: 20px;
}

.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;
}

.sieges img{
    position: fixed;
    margin:0;
    bottom:0;
}