@layer base {
  html {
    overflow-y: scroll;

    @supports (scrollbar-gutter: stable) {
      overflow-y: auto;
      scrollbar-gutter: stable;
    }
  }

  body {
    color: var(--gray-200);
    background: var(--gray-950);
    background-image:
      radial-gradient(at 40% 20%, hsla(28,100%,74%,1) 0px, transparent 50%),
      radial-gradient(at 80% 0%, hsla(0,100%,93%,1) 0px, transparent 50%),
      radial-gradient(at 0% 50%, hsla(355,100%,45%,1) 0px, transparent 50%),
      radial-gradient(at 80% 50%, hsla(340,100%,50%,1) 0px, transparent 50%),
      radial-gradient(at 0% 100%, hsla(22,100%,77%,1) 0px, transparent 50%),
      radial-gradient(at 80% 100%, hsla(0,100%,52%,1) 0px, transparent 50%),
      radial-gradient(at 0% 0%, hsla(343,100%,76%,1) 0px, transparent 50%);
    background-attachment: fixed;
  }

  a:not([class]) {
    color: var(--brand-400);
    text-decoration: underline;
    text-decoration-color: currentColor;

    &:hover {
      text-decoration: none;
    }
  }
}