html, body {
  margin: 0;
  padding: 0;
}

#pages {
  display: flex;
  /*inline-size: 100%;*/
  /*block-size: 100dvh;*/
  overflow-x: auto;
  overflow-y: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /*overscroll-behavior: contain;*/
  /*touch-action: pan-x;*/
  scrollbar-gutter: stable both-edges;
}

/* Hide horizontal scrollbar while keeping vertical scrollbar */
#pages::-webkit-scrollbar:horizontal {
  display: none;
  height: 0;
}

/* For Firefox and other browsers - hide horizontal scrollbar only */
#pages {
  scrollbar-width: none;
}


.page {
  min-height: 100vh;
  /* Use width instead of flex-basis: 100% so padding doesn't cause overflow */
  flex: 0 0 auto;
  inline-size: 100%;
  block-size: 100%;
  box-sizing: border-box;
  padding: 2rem;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}