/* Follow the visitor's system preference; light is the default. */
:root {
  color-scheme: light;
  --color-background: #faf7fa;
  --color-text: #322432;
  --color-accent: #f0c;
  --color-accent-secondary: #e0a;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-background: #222;
    --color-text: #dcd;
    --color-accent: #f0c;
    --color-accent-secondary: #e0a;
  }
}

body {
  background-color: var(--color-background);
  color: var(--color-text);
}

/* animated dot accent <-> secondary accent */
/* 2s? */

.dot {
  width: 1rem;
  height: 1rem;
  background-color: var(--color-accent);
  border-radius: 50%;
  will-change: background-color;
  animation: pulse 2s infinite;
  animation-timing-function: ease-in-out;
}

@keyframes pulse {
  0%, 100% {
    background-color: var(--color-accent);
  }
  50% {
    background-color: var(--color-accent-secondary);
  }
}

.dot:hover {
  animation-play-state: paused;
}

.glitch {
  --glitch-accent: color-mix(in srgb, var(--color-accent) 50%, transparent);
  --glitch-accent-secondary: color-mix(in srgb, var(--color-accent-secondary) 50%, transparent);
  text-shadow: -0.04em 0 var(--glitch-accent), 0.04em 0 var(--glitch-accent-secondary);
}

@media (prefers-reduced-motion: no-preference) {
  .glitch {
    animation: glitch 3s steps(1, end) infinite;
  }
}

@keyframes glitch {
  0%, 90%, 100% {
    text-shadow: -0.04em 0 var(--glitch-accent), 0.04em 0 var(--glitch-accent-secondary);
  }
  92%, 96% {
    text-shadow: 0.06em -0.02em var(--glitch-accent), -0.06em 0.02em var(--glitch-accent-secondary);
  }
  94%, 98% {
    text-shadow: -0.03em 0.03em var(--glitch-accent), 0.03em -0.03em var(--glitch-accent-secondary);
  }
}

.top-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-background);
  color: var(--color-text);
  /* border-bottom: 1px solid var(--color-accent); */

}