:root {
  color-scheme: dark;
}

html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
  background: #09090b;
}

body {
  background: #09090b;
}

body {
  -webkit-font-smoothing: antialiased;
}

.bg-grid {
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
}

.glow-text {
  text-shadow: 0 0 24px rgba(255, 255, 255, 0.08);
}

.spotlight-card:hover::before {
  opacity: 1;
}

.spotlight-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: radial-gradient(
    800px circle at var(--mouse-x) var(--mouse-y),
    rgba(255, 255, 255, 0.1),
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.45s;
  border-radius: inherit;
}

.scroll-anchor {
  scroll-margin-top: 96px;
}