/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
}

#slideshow {
  position: relative;
  width: 100vw;
  margin-top: 60px;
  height: calc(100vh - 60px);

}

#slideshow img {
  padding: 16px;
  border-radius: 26px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;

  animation: fadeSlideshow 35s infinite;
}

/* Stagger each image */
#slideshow img:nth-child(1) { animation-delay: 0s; }
#slideshow img:nth-child(2) { animation-delay: 3.5s; }
#slideshow img:nth-child(3) { animation-delay: 7s; }
#slideshow img:nth-child(4) { animation-delay: 10.5s; }
#slideshow img:nth-child(5) { animation-delay: 14s; }
#slideshow img:nth-child(6) { animation-delay: 17.5s; }
#slideshow img:nth-child(7) { animation-delay: 21s; }
#slideshow img:nth-child(8) { animation-delay: 24.5s; }
#slideshow img:nth-child(9) { animation-delay: 28s; }
#slideshow img:nth-child(10) { animation-delay: 31.5s; }

@keyframes fadeSlideshow {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  25%  { opacity: 1; }
  30%  { opacity: 0; }
  100% { opacity: 0; }
}