#ballpool {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 10000;
  background: var(--bg);
}
#ballpool .ball {
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: 10000px;
  cursor: grab;
  background: var(--bgt);
  transform: translateX(0);
  will-change: transform;
}
#ballpool .filter {
  z-index: 1000;
  pointer-events: none;
  backdrop-filter: blur(90px);
}

#nav,
#main,
#footer {
  position: relative;
  width: 100%;
  z-index: 10000000;
}
#nav {
  padding-top: var(--line-space-gap);
  padding-bottom: calc(var(--line-height) * 3);
}
#nav .title {
  text-decoration: none;
}
#main {
  display: block;
  overflow-x: hidden;
  overflow-y: hidden;
  min-height: calc(100vh - (var(--line-height) * 4 + var(--line-space-gap)));
  min-height: calc(100svh - (var(--line-height) * 4 + var(--line-space-gap)));
}
#footer {
  padding-top: calc(var(--line-height) * 5);
  padding-bottom: var(--line-space-gap);
}
@media (max-width: 600px) {
  #nav .wide-about {
    display: none;
  }
  #nav .narrow-about {
    display: unset;
  }
  #nav .content.half {
    width: calc((100% - 2rem) / 2);
  }
}
@media (max-width: 600px) {
  #main {
    min-height: calc(100vh - (var(--line-height) * 2));
    min-height: calc(100svh - (var(--line-height) * 2));
  }
}