/* The ground the celestial pattern is drawn on. galaxy.js paints only the
   line art; the paper and the night sky live here so they are painted before
   the first frame and never flash. */

html {
  background-color: var(--pg-bg);
  background-image:
    radial-gradient(120% 80% at 80% 6%, rgba(220, 174, 63, 0.14) 0%, rgba(220, 174, 63, 0) 58%),
    radial-gradient(90% 60% at 8% 92%, rgba(184, 134, 31, 0.10) 0%, rgba(184, 134, 31, 0) 62%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

html[data-theme="dark"] {
  background-color: var(--pg-bg);
  background-image:
    radial-gradient(110% 70% at 78% 4%, rgba(58, 92, 160, 0.34) 0%, rgba(58, 92, 160, 0) 60%),
    radial-gradient(90% 60% at 12% 88%, rgba(120, 78, 160, 0.22) 0%, rgba(120, 78, 160, 0) 62%),
    linear-gradient(180deg, #0b1430 0%, #070d1c 55%, #050a17 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

#pg-galaxy {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: block;
}