/* ========================================================================== Galaxy Background — CSS Drop this block into base.css (or link as its own file from base.html). The canvas sits fixed behind all page content, on top of your existing solid background color, and never intercepts clicks/taps. ========================================================================== */ #galaxy-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; /* keep this above your background but below content */ pointer-events: none; /* never blocks clicks on real UI */ display: block; } /* Make sure your normal page content sits above the canvas. If your existing wrapper already has a z-index, you can skip this and just ensure it's >= 1. Adjust the selector to match your actual layout. */ main, header, footer, .site-wrapper, .container { position: relative; } /* Respect users who've asked the OS/browser for reduced motion: the JS also checks this, but hiding via CSS is a safe fallback. */ @media (prefers-reduced-motion: reduce) { #galaxy-bg { animation: none !important; } }