* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
}

.carousel {
  position: fixed;
  inset: 0;
}

.slide {
  position: absolute;
  inset: 0;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  animation: carousel 15s infinite;
}

.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 5s; }
.slide:nth-child(3) { animation-delay: 10s; }

@keyframes carousel {
  0% { opacity: 0; }
  3% { opacity: 1; }
  30% { opacity: 1; }
  33% { opacity: 0; }
  100% { opacity: 0; }
}