html,
body {
  margin: 0;
  padding: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;
  background: black;

  cursor: pointer;
}


/* DESKTOP / DEFAULT */

.slideshow {
  position: fixed;

  top: 0;
  left: 0;

  width: 100vw;
  height: 100vh;

  overflow: hidden;
}


/* SLIDES */

.slide {
  display: none;

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

.slide.active {
  display: block;
}


/* PHONE HELD VERTICALLY */

@media (max-width: 900px) and (orientation: portrait) {

  .slideshow {
    position: fixed;

    top: 50%;
    left: 50%;

    width: 100vh;
    height: 100vw;

    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center center;
  }

}


/* PHONE HELD HORIZONTALLY */

@media (max-width: 900px) and (orientation: landscape) {

  .slideshow {
    position: fixed;

    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    transform: none;
  }

}