* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: #444; 
}

.instructions {
  z-index: 2;
  color: white; 
  top: 50%; 
  left: 50%;
  display: block; 
  position: absolute; 
  transform: translateX(-50%) translateY(-50%);
  font-size: 1rem;
  text-align: center; 
  background-color: #00000080;
}

.slideBox {
  width: 100vw;
  height: 100vh;
}
  
.slide {
  opacity: 0;
  position: absolute; 
  display: flex;
  inset: 0 0;
  align-items: center; 
  transition: 300ms opacity ease-in-out;
  transition-delay: 300ms;
}

.slide[data-active] {
  opacity: 1; 
  transition-delay: 0ms;
}

.slide img {
  display: block; 
  width: 100vw;
  height: 100vh; 
  object-fit: contain; 
}