<section>
  <h1>slide 1</h1>
</section>
<section>
  <h1>slide 2</h1>
</section>
<section>
  <h1>slide 3</h1>
</section>
<section>
  <h1>slide 4</h1>
</section>
<section>
  <h1>slide 5</h1>
</section>

html, body, section {
  block-size: 100%;
}

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

section {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

section:nth-of-type(even) {
  color: white;
  background: black;
}

section:nth-of-type(odd) {
  color: black;
  background: white;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  font-size: 4rem;
}