:root {
  --bg: #f6f8f2;
  --bg-2: #edf2e2;
  --fg: #1b2217;
  --muted: #4c5a47;
  --card: color-mix(in srgb, #ffffff 75%, #d8e3c0 25%);
  --ring: #97c66a;
  --ring-2: #597f36;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121711;
    --bg-2: #1b2418;
    --fg: #e7efdf;
    --muted: #afbeab;
    --card: color-mix(in srgb, #1f271b 82%, #2f3d25 18%);
    --ring: #b8dd8e;
    --ring-2: #8ab45e;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: "Space Grotesk", "Avenir Next", "Segoe UI", sans-serif;
  color: var(--fg);
  background:
    radial-gradient(110vmax 65vmax at 5% -20%, color-mix(in srgb, var(--ring) 20%, transparent), transparent 55%),
    radial-gradient(80vmax 40vmax at 110% 110%, color-mix(in srgb, var(--ring-2) 16%, transparent), transparent 60%),
    linear-gradient(135deg, var(--bg), var(--bg-2));
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
}

main {
  width: min(760px, 100%);
}

cuckoo-home {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  body {
    animation: shift 14s ease-in-out infinite alternate;
  }
}

@keyframes shift {
  from {
    background-position: 0 0, 0 0, 0 0;
  }
  to {
    background-position: 1.2rem -1.2rem, -1rem 1rem, 0 0;
  }
}