<div class="slides">
  <div class="slides__item">
    <p>Hi there!</p>
  </div>
  <div class="slides__item">
    <p>I'm a web developer.</p>
  </div>
  <div class="slides__item">
    <p>I prefer HTML, CSS, and JavaScript.</p>
  </div>
  <div class="slides__item">
    <p>See my <a href="https://www.silvestar.codes/portfolio/" target="_blank">portfolio</a> and <a href="https://www.silvestar.codes/testimonials/" target="_blank">testimonials</a>.</p>
  </div>
  <div class="slides__item">
    <p><a href="https://www.silvestar.codes/silvestar-bistrovic-cv.pdf" target="_blank">Download my cv</a>.</p>
  </div>
  <div class="slides__item">
    <p><a href="https://www.silvestar.codes/contact/#form" target="_blank">Hire me</a></p>
  </div>
</div>

body {
  all: unset;
}

.slides {
  --font-size: 10vh;
  --snap-height: 100vh;
  --snap-inline: 10px;
  --snap-bg1: hotpink;
  --snap-bg2: dodgerblue;
  --snap-color: white;
  
  color: var(--snap-color);
  font-family: cursive;
  font-size: var(--font-size);
  line-height: 1;
  max-height: var(--snap-height);
  overflow-y: auto;
  scrollbar-color: var(--snap-bg1) var(--snap-bg2);  

  &::-webkit-scrollbar {
    width: var(--snap-inline);
  }
  
  &::-webkit-scrollbar-thumb {
    background-color: var(--snap-bg1);
  }
  
  &::-webkit-scrollbar-track {
    background-color: var(--snap-bg2);
  }
}

.slides__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--snap-inline);
  min-height: var(--snap-height);
  position: relative;
  
  &:nth-child(odd) {
    background-color: var(--snap-bg1);
  }
  
  &:nth-child(even) {
    background-color: var(--snap-bg2);  
  }
  
  a {
    color: inherit;
  }
}

@supports (height: 100dvh) {
  .slides {
    --snap-height: 100dvh; 
    --font-size: 10dvh;
  }
}

@supports (scroll-snap-type: y mandatory) {
  .slides {
    scroll-snap-type: y mandatory;

    .slides__item {
      scroll-snap-align: start;
      scroll-snap-stop: always;
    }
  } 
}