/* src/templates/css/pages/home.css */
body {
  color: var(-dark-fg);
  background-color: var(-dark-bg);
}
main {
  --body-padding-width: 20px;
  --canvas-desired-width: calc(60vh * 9 / 7);
  font-family: var(--font-mono);
  position: absolute;
  bottom: 0;
  padding: 0 clamp(var(--body-padding-width), (100vw - var(--canvas-desired-width)) / 2, 8vh);
  margin-bottom: 8vh;
}
h1 {
  color: var(--color-red);
  font-weight: 700;
  font-size: calc((64 / 16) * 1em);
  margin-top: 12px;
  letter-spacing: -0.04em;
}
h1::before {
  content: "://";
  color: var(--color-fg-dull);
  letter-spacing: -0.14em;
  margin-right: 0.04em;
  margin-left: -0.2em;
}
#primary-nav {
  padding: 0;
  font-size: calc((20 / 16) * 1em);
}
#webgl-canvas {
  --corner-length: 16px;
  --corner-stroke: 1px;
  --color-corner: var(--color-fg-low-contrast);
  position: relative;
  aspect-ratio: 9 / 7;
  width: min(var(--canvas-desired-width), 100vw - 2 * var(--body-padding-width));
}
#webgl-canvas canvas {
  width: 100%;
  height: 100%;
}
#fps {
  font-size: calc((14 / 16) * 1em);
  color: var(--color-fg-dull);
  margin-top: 4px;
}
@media only screen and (max-width: 842px) {
  h1 {
    font-size: calc((48 / 16) * 1em);
  }
  #primary-nav {
    font-size: calc((18 / 16) * 1em);
  }
  #fps {
    font-size: calc((12 / 16) * 1em);
  }
}