body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

#bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: background-image 3s ease-in-out;
  
  /* 🌈 Fancy CSS blend mode */
  background-blend-mode: overlay;
}

#bg::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  /* Fade layer for moodiness */
  background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.4));
  opacity: 0.6;
  pointer-events: none;
}
#bg::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;

  background: radial-gradient(
    circle at center,
    rgba(255, 255, 224, 0.15),
    transparent 60%
  );
  mix-blend-mode: screen;
  animation: lightingShift 15s infinite alternate ease-in-out;
  pointer-events: none;
}

@keyframes lightingShift {
  0% {
    background-position: 20% 30%;
    opacity: 0.3;
  }
  100% {
    background-position: 80% 70%;
    opacity: 0.6;
  }
}