.auto-grid {
  --auto-grid-min-size: 16rem;
     list-style-type: none;
}

.auto-grid > * {
  max-width: 400px;
}

.auto-grid > * + * {
  margin-top: 0rem;
}

@supports(display: grid) {
  .auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
    grid-gap: 0rem;
      margin:0;
      margin-left:-50px;
  }
  
  .auto-grid > * {
    max-width: unset;
  }

  .auto-grid > * + * {
    margin-top: unset;
  }
}


.wrapper {
    opacity:0;
  max-width: 100vw;
  margin: 0;
  padding: 0;
    animation: opacityOff 3s normal forwards;
    animation-delay: 0s;
}



body {
  background: #fff;
  padding: 0;
    margin:0;
  line-height: 1;
  font-family: sans-serif;
}

li {
  padding: 0;
    margin:0;
    height:16rem;
  text-align: center;
     background-position: center;
      background-repeat: no-repeat;
     background-size: cover;
    
}

li img {  max-width: 100%;
    max-height: 100%; object-fit: cover !important;
}

.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidebar a:hover {
  color: #f1f1f1;
}

.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.openbtn {
  font-size: 40px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
}

.openbtn:hover {
  background-color: #444;
}

#main {
    position:fixed;
    top:5px;left:5px;
  transition: margin-left .5s;
  padding: 16px;
    z-index:1000;
}

#main2 {
    position:fixed;
     opacity: 1; 
    width:800px;
    top:calc(50vh - 450px);
    left:calc(50vw - 400px);
  padding: 16px;
    z-index:-1;
      animation: opacityOn 3s normal forwards;
    animation-delay: 0s;
}

.poule {width:800px; max-width:90vw;}

@media screen and (max-width: 750px) {
    
    #main2 {top:30vh;left:calc(50vw - 400px);}
    
    }


@keyframes opacityOn {
    0% {
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    100% {
        opacity: 0;
       
    }
}

@keyframes opacityOff {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    75% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
       
    }
}


/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}

}