:root{
  --sky: url('../../img/misc/bg/sunset.png');
  --clouds: url('../../img/misc/bg/clouds.png');
}

:root.dark{
  --sky: url('../../img/misc/bg/night_sunset.png');
  --clouds: url('../../img/misc/bg/night_clouds.png');
}

.background-sky {
  position: fixed;
  top: 0;
  left: 0;
  width: 200%; 
  height: 100%;
  z-index: -1; 
  pointer-events: none;
}

body {
	background-color: black;
}

.sunset {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background-image: var(--sky);
  background-repeat: repeat-x;
  animation: scrollSunset 210s linear infinite;
}

.clouds {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background-image: var(--clouds);
  background-repeat: repeat-x;
  opacity: 0.7;
  animation: scrollClouds 160s linear infinite;
}

/* Animation Stuff */
@keyframes scrollSunset {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes scrollClouds {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}