html {
    overflow-x: clip;
    overscroll-behavior: none;
    scroll-behavior: smooth;
}

body {
    overflow-x: clip;
    overscroll-behavior: none;
    position: relative;
}

#backdrop {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

#canvas {
  width: 100%;
  flex: 0 0 60px;
  transform: translateY(1px);
}

@keyframes grow {
  0% {
    flex: 0 0 0;
  }

  50% {
    flex: 0 0 calc(100% - 15rem);
  }

  100% {
    flex: 0 0 0;
  }
}

.grow {
    animation: grow 600s ease-in-out infinite;
}

#filler {
  background-image: linear-gradient(#b3e5fc, #425cfc 1000px);
  flex: 0 0 0;
  forced-color-adjust: none;
}

@keyframes wave {
  20% {
    transform: rotate(-.3deg) translatex(-.7rem);
  }
  40% {
    transform: rotate(.15deg) translatex(.7rem);
  }
  60% {
    transform: rotate(-.15deg) translatex(-.7rem);
  }
  80% {
    transform: rotate(.3deg) translatex(.7rem);
  }
}

:is(h2, p, blockquote, footer > div), .refs::before {
    animation: wave 40s infinite ease-in-out var(--play);
}

footer {
    overflow-y: clip;
}

footer > div > span {
    margin-bottom: 2px;  /* For Firefox */
}

.refs::before {
    display: inline-block;
}