@charset 'UTF-8';
/* See https://brm.us/css-scroll-velocity for details */

@property --scroll-position {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --scroll-position-delayed {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@keyframes adjust-pos {
  to {
    --scroll-position: 1;
    --scroll-position-delayed: 1;
  }
}

:root {
  animation: adjust-pos linear both;
  animation-timeline: scroll(root);
}

#debug {
  counter-reset: scroll-position calc(var(--scroll-position) * 100) scroll-position-delayed calc(var(--scroll-position-delayed) * 100);
  
  [data-id="--scroll-position"]::after {
    content: "--scroll-position: " counter(scroll-position);
  }
  [data-id="--scroll-position-delayed"]::after {
    content: "--scroll-position-delayed: " counter(scroll-position-delayed);
  }
}

body {
  font-size: 1.25rem;
}
@media (min-width: 680px) {
  body {
    font-size: 1.5rem;
  }
}
@media (min-width: 900px) {
  body {
    font-size: 2rem;
  }
}

#debug {
  position: fixed;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  background: white;
  border: 1px solid #ccc;
  padding: 1rem;
  
  & li {
    list-style: none;
  }
}

main {
  overflow-y: visible;
  color: #ccc;
}

body {
  padding: 2rem;
  color: #333;
  font-style: italic;
}
p {
  margin: 0 0 2rem 0;
}

* {
  margin: 0;
  padding: 0;
}