@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./inter-latin-wght-normal.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  background: #080a10;
  color: #f0f1f5;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.scene {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}

.halo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse at 50% 45%, #4d4a8517 0, transparent 48%),
    radial-gradient(ellipse at 42% 65%, #244b7510 0, transparent 42%);
  pointer-events: none;
}

canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

h1 {
  position: relative;
  margin: 0;
  padding: 0 0.13em 0.12em 0;
  font-size: clamp(4.5rem, 13.5vw, 10rem);
  font-weight: 440;
  letter-spacing: -0.075em;
  line-height: 1;
  text-shadow:
    0 2px 36px #080a10,
    0 0 72px #080a10;
}

h1 span {
  color: #9a9db9;
}

::selection {
  background: #7c7fbb55;
  color: #fff;
}

@media (max-width: 420px) {
  h1 {
    font-size: clamp(3.4rem, 16vw, 4.2rem);
  }
}