:root {
  --red: #d13438;
  --white: #ffffff;
  --bg: #000000;
  --panel: rgba(0,0,0,.84);
  --border: rgba(255,255,255,.22);
}

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

body {
  background: var(--bg);
  color: var(--white);
  font-family: Arial, Helvetica, sans-serif;
  overflow-y: scroll;
}

.slide {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;

  scroll-snap-align: start;
  scroll-snap-stop: always;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #000;
  position: relative;
}

.slide img {
  max-width: 100%;
  max-height: 100dvh;

  width: auto;
  height: auto;

  object-fit: contain;
  display: block;
}

.slide-number {
  position: absolute;
  right: 14px;
  bottom: 14px;
  background: rgba(0,0,0,.72);
  border: 1px solid var(--border);
  color: var(--red);
  padding: 7px 10px;
  font-family: Consolas, "Courier New", monospace;
  font-size: .68rem;
}