/* ==========================================================
   B.  STARS ON BLACK BACKGROUND
   ========================================================== */
html {
  background: #000; /* base sky colour */
}

body {
  background: transparent;
  margin: 0;
  position: relative;
  z-index: 1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html::before,
html::after {
  content: "";
  position: fixed;
  inset: 0;
  width: 200%;
  height: 200%;
  background-repeat: repeat;
  pointer-events: none;
  z-index: 0; /* sit above the base background but below content */
}

html::before {
  opacity: .5;
  background-size: 350px 350px;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff 60%, transparent 61%),
    radial-gradient(1px 1px at 45% 82%, #fff 60%, transparent 61%),
    radial-gradient(1px 1px at 70% 8%, #fff 60%, transparent 61%),
    radial-gradient(1px 1px at 88% 57%, #fff 60%, transparent 61%),
    radial-gradient(1px 1px at 96% 37%, #fff 60%, transparent 61%),
    radial-gradient(1px 1px at 38% 44%, #fff 60%, transparent 61%);
  animation: starDrift1 40s linear infinite;
}

html::after {
  opacity: .9;
  background-size: 550px 550px;
  background-image:
    radial-gradient(2px 2px at 28% 63%, #fff 70%, transparent 71%),
    radial-gradient(3px 3px at 72% 22%, #fff 70%, transparent 71%),
    radial-gradient(2px 2px at 58% 77%, #fff 70%, transparent 71%),
    radial-gradient(3px 3px at 84% 49%, #fff 70%, transparent 71%);
  animation: starDrift2 70s linear infinite, starPulse 2.2s ease-in-out infinite alternate;
}

@keyframes starDrift1 {
  from { transform: translateX(0); }
  to   { transform: translateX(-350px); }
}

@keyframes starDrift2 {
  from { transform: translateX(0); }
  to   { transform: translateX(-550px); }
}

@keyframes starPulse {
  from { opacity: .4; }
  to   { opacity: .95; }
}