:root{
    /* Tweak these to taste */
    --blur: 28px;           /* softness of the colors */
    --opacity: 0.6;        /* overall strength of the bg */
    --spin-seconds: 60s;    /* how fast the hues move */
  }

  /* Make the whole page a stacking context for the background layers */
  body.light-theme {
    min-height: 100svh;
    background: #fff; /* fallback */
    position: relative;
    overflow-x: hidden;
  }

  /* Main pastel rainbow layer */
  body.light-theme::before {
    content: "";
    position: fixed;
    inset: -10vmax; /* oversize so rotation never shows edges */
    z-index: -2;
    background: conic-gradient(
	from 0deg at 50% 50%,
    hsl(205 65% 85%),   /* deeper sky blue */
    hsl(210 70% 88%),   /* bright blue */
    hsl(0 0% 97%),      /* creamy white */
    hsl(200 70% 80%),   /* rich turquoise blue */
    hsl(220 60% 86%),   /* soft periwinkle */
    hsl(0 0% 98%),      /* cloud white */
    hsl(205 65% 85%)    /* loop back */
    );
    filter: blur(var(--blur));
    opacity: var(--opacity);
    animation: spin var(--spin-seconds) linear infinite;
    will-change: transform;
    transform: rotate(0deg) scale(1.1);
    pointer-events: none;
  }

  body.light-theme::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 25% 35%, rgba(255,255,255,0.55), transparent 65%),
              radial-gradient(circle at 65% 55%, rgba(255,255,255,0.5), transparent 60%),
              radial-gradient(circle at 80% 20%, rgba(255,255,255,0.4), transparent 70%);
  mix-blend-mode: lighten;
  opacity: 0.5;
  pointer-events: none;
}

  
  @keyframes spin {
    to { transform: rotate(360deg) scale(1.1); }
  }

  /* Respect reduced-motion preferences */
  @media (prefers-reduced-motion: reduce) {
    body.light-theme::before { animation: none; }
  }