html {
  background: #1E1D20;
}

body {
  height: 100dvh;
  min-height: 0 !important;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.page-scroll {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.page-scroll::-webkit-scrollbar {
  display: none;
}

header {
  padding-top: env(safe-area-inset-top);
}

footer {
  padding-bottom: env(safe-area-inset-bottom);
}

.page-wipe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  z-index: 9999;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.page-wipe--covering,
html.page-wipe-revealing .page-wipe,
html.page-wipe-entering .page-wipe {
  height: 100vh;
  visibility: visible;
  pointer-events: auto;
  touch-action: none;
}

.page-wipe__bar {
  position: absolute;
  top: calc(-8.333333vw - 1px);
  left: calc(var(--column) * 16.666667% - 1px);
  width: calc(16.666667% + 2px);
  height: calc(100% + 16.666667vw + 2px);
  border-radius: 9999px;
  background: #55525B;
  animation-duration: 750ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both;
  animation-delay: calc(var(--column) * 150ms);
}

.page-wipe__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.page-wipe--canvas-ready .page-wipe__bar {
  display: none;
}

.page-wipe__bar:nth-child(even) {
  background: #FF789B;
}

.page-wipe--covering .page-wipe__bar {
  animation-name: bar-cover;
}

html.page-wipe-revealing .page-wipe__bar {
  animation-name: bar-reveal;
}

@keyframes bar-cover {
  from { transform: translateY(-110%); }
  to { transform: translateY(0); }
}

@keyframes bar-reveal {
  from { transform: translateY(0); }
  to { transform: translateY(110%); }
}