style.css

html,
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.scroller {
  height: 100dvh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  & > section {
    scroll-snap-align: center;
    scroll-snap-stop: always;
    height: 100dvh;
    background: black;
    img,
    video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

.scroll-nav {
  position: absolute;
  right: 50px;
  height: 100%;
  display: grid;
  place-content: center;
  gap: 5px;
  z-index: 2;
  a {
    background: white;
    text-align: center;
    aspect-ratio: 1 / 1;
    border-radius: 900px;
    text-decoration: none;
    color: black;
    transition: padding 0.2s;
    &.active {
      background: black;
      padding-block: 10px;
      color: white;
    }
  }
}