html,body {
  margin: 0;
  padding: 0;
  max-width: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}
[data-slideshow] {
  margin: 0;
  padding: 0;
  position: relative;
}
[data-slide] {
  position: absolute;
  left: 100vmax;
  z-index: 50;
  transition: left .5s ease-in-out;
  overflow-y: scroll;
}
[data-slide]:first-of-type {
  left: 0;
}
[data-slideshow] nav {
  margin: 0;
  padding: 0;
  position: fixed;
  bottom: 1em;
  right: .75em;
  z-index: 100;
}
[data-slideshow] nav input {
  font-size: 18pt !important;
  margin: 0 .25em !important;
  width: auto !important;
  min-width: 2.25em;
  background: rgba(0,0,0,.5) !important;
  color: white !important;
  border: 1px solid currentColor !important;
  border-radius: 2px;
  text-shadow: rgba(0,0,0,.7) 1px 1px 0 !important;
  box-shadow: inset rgba(0,0,0,.15) 1px 1px 0;
  transition: color .1s ease-in-out;
}
[data-slideshow] nav input:focus,
[data-slideshow] nav input:hover {
  color: white !important;
  background: rgba(0,0,0,.7) !important;
}
[data-slideshow] nav input:active {
  color: #0cf !important;
  background: rgba(0,0,0,.7) !important;
}
[data-slide] h1 {
  margin: 10vmin 0 4vmin 0 !important;
  font-size: 12vmin !important;
}
[data-slide] h1 + h2 {
  margin-top: -4vmin !important;
  font-size: 5.5vmin !important;
}
[data-slide] p {
  margin: 0 auto;
  max-width: 80%;
  font-size: 10pt;
 
}
@media (orientation: portrait) {
  [data-slideshow],
  [data-slide] {
    width: 100vmin;
    height: 100vmax;
  }
}
@media (orientation: landscape) {
  [data-slideshow],
  [data-slide] {
    width: 100vmax;
    height: 100vmin;
  }
}