body{
  height: 100vh;
  margin: 0;
  padding: 0;
}

.photogrid{
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: auto;   
}
.photogrid img{
  width: 100%;
  display: none;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.photogrid :hover{
  opacity: 0.7;
} 
img.displaySlide{
   display: block;
   animation-name: fade;
   animation-duration: 1.5s;
}

button{
  position: absolute;
  top: 50%;
  font-size: 25px;
  transform: translateY(-50%);
  padding: 10px 15px;
  background-color: rgb(179, 179, 111) ;
  border: none;
  cursor: pointer;
}
.prev{
  left: 0;
}
.next{
  right:0;
}
@keyframes fade{
  from {opacity: .5}
  to{opacity: 1}
}