:root {
	--twinkle-duration: 4s;
  --stars-opacity : 1;
  --sky-opacity: 0.52;
  --sun-day-opacity: 0.5;
  --sun-set-opacity: 0.3;
  --moon-opacity: 0;
  --darkness-overlay-opacity: 0;
  --darkness-overlay-sky-opacity: 0;

  --sun-position-x: 0;
  --sun-position-y: 0;
  --base-z-index: 0;
}


@keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#skyheader {
  margin: 0;
  padding: 0;
  position: fixed;
  overflow: hidden;
  background-color: black;
  width: 100%;
  height: 100vh;
  z-index: calc(var(--base-z-index) - 8);
  /* animation: linear 0.1s appear; */
}

#sky {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: calc(var(--base-z-index) - 7);
  background: -webkit-linear-gradient(bottom, rgba(249,251,240,1) 10%, rgba(215,253,254,1) 20%, rgba(167,222,253,1) 40%, rgba(110,175,255,1) 100%);
  background: -moz-linear-gradient(bottom, rgba(249,251,240,1) 10%, rgba(215,253,254,1) 20%, rgba(167,222,253,1) 40%, rgba(110,175,255,1) 100%);
  background: -ms-linear-gradient(bottom, rgba(249,251,240,1) 10%, rgba(215,253,254,1) 20%, rgba(167,222,253,1) 40%, rgba(110,175,255,1) 100%);
  background: linear-gradient(bottom, rgba(249,251,240,1) 10%, rgba(215,253,254,1) 20%, rgba(167,222,253,1) 40%, rgba(110,175,255,1) 100%);
  opacity: var(--sky-opacity);
}

#sun {
  position: absolute;
  top: 0px;
  left: 0%;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background: -webkit-radial-gradient(var(--sun-position-x) var(--sun-position-y), circle, rgba(242,248,247,1) 0%,rgba(249,249,28,1) 3%,rgba(247,214,46,1) 8%, rgba(248,200,95,1) 12%,rgba(201,165,132,1) 30%,rgba(115,130,133,1) 51%,rgba(46,97,122,1) 85%,rgba(24,75,106,1) 100%);
  background: -moz-radial-gradient(var(--sun-position-x) var(--sun-position-y), circle, rgba(242,248,247,1) 0%,rgba(249,249,28,1) 3%,rgba(247,214,46,1) 8%, rgba(248,200,95,1) 12%,rgba(201,165,132,1) 30%,rgba(115,130,133,1) 51%,rgba(46,97,122,1) 85%,rgba(24,75,106,1) 100%);
  background: -ms-radial-gradient(var(--sun-position-x) var(--sun-position-y), circle, rgba(242,248,247,1) 0%,rgba(249,249,28,1) 3%,rgba(247,214,46,1) 8%, rgba(248,200,95,1) 12%,rgba(201,165,132,1) 30%,rgba(115,130,133,1) 51%,rgba(46,97,122,1) 85%,rgba(24,75,106,1) 100%);

  z-index: calc(var(--base-z-index) - 6);
  opacity: 0.5;
  }

#sunDay {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background: -webkit-radial-gradient(var(--sun-position-x) var(--sun-position-y), circle, rgba(252,255,251,0.9) 0%,rgba(253,250,219,0.4) 30%,rgba(226,219,197,0.01) 70%, rgba(226,219,197,0.0) 70%,rgba(201,165,132,0) 100%);
  background: -moz-radial-gradient(var(--sun-position-x) var(--sun-position-y), circle, rgba(252,255,251,0.9) 0%,rgba(253,250,219,0.4) 30%,rgba(226,219,197,0.01) 70%, rgba(226,219,197,0.0) 70%,rgba(201,165,132,0) 100%);
  background: -ms-radial-gradient(var(--sun-position-x) var(--sun-position-y), circle, rgba(252,255,251,0.9) 0%,rgba(253,250,219,0.4) 30%,rgba(226,219,197,0.01) 70%, rgba(226,219,197,0.0) 70%,rgba(201,165,132,0) 100%);
  z-index: calc(var(--base-z-index) - 4);
  opacity: var(--sun-day-opacity);
}

#sunSet {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background: -webkit-radial-gradient(var(--sun-position-x) var(--sun-position-y), circle, rgba(254,255,255,0.8) 5%,rgba(236,255,0,1) 10%,rgba(253,50,41,1) 25%, rgba(243,0,0,1) 40%,rgba(93,0,0,1) 100%);
  background: -moz-radial-gradient(var(--sun-position-x) var(--sun-position-y), circle, rgba(254,255,255,0.8) 5%,rgba(236,255,0,1) 10%,rgba(253,50,41,1) 25%, rgba(243,0,0,1) 40%,rgba(93,0,0,1) 100%);
  background: -ms-radial-gradient(var(--sun-position-x) var(--sun-position-y), circle, rgba(254,255,255,0.8) 5%,rgba(236,255,0,1) 10%,rgba(253,50,41,1) 25%, rgba(243,0,0,1) 40%,rgba(93,0,0,1) 100%);

  z-index: calc(var(--base-z-index) - 4);
  opacity: var(--sun-set-opacity);
}

#moon {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background: -webkit-radial-gradient(40% 55%, circle, rgba(249,249,250,1) -1%, rgba(189,255,254,1) 1%, rgba(8,49,78,1) 1%, rgba(8,26,56,1) 10%, rgba(4,16,46,1) 40%, rgba(2,8,13,1) 70%);
  background: -moz-radial-gradient(40% 55%, circle, rgba(249,249,250,1) -1%, rgba(189,255,254,1) 1%, rgba(8,49,78,1) 1%, rgba(8,26,56,1) 10%, rgba(4,16,46,1) 40%, rgba(2,8,13,1) 70%);
  background: -ms-radial-gradient(40% 55%, circle, rgba(249,249,250,1) -1%, rgba(189,255,254,1) 1%, rgba(8,49,78,1) 1%, rgba(8,26,56,1) 10%, rgba(4,16,46,1) 40%, rgba(2,8,13,1) 70%);

  z-index: calc(var(--base-z-index) - 2);
  opacity: var(--moon-opacity);
}

#darknessOverlay {
  background-color: #000;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: calc(var(--base-z-index) - 5);
  opacity: var(--darkness-overlay-opacity);
}

#darknessOverlaySky {
  background-color: #000;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: calc(var(--base-z-index) - 3);
  opacity: var(--darkness-overlay-sky-opacity);
}

#starsOverlay {
  background-color: linear-gradient(#16161d, #1f1f3a, #3b2f4a);
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: calc(var(--base-z-index) - 1);
  opacity: var(--stars-opacity);
	pointer-events: none;
}

.stars {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  animation: twinkle var(--twinkle-duration) ease-in-out infinite;
}
.stars:nth-child(2) {
  animation-delay: calc(var(--twinkle-duration) * -0.33);
}
.stars:nth-child(3) {
  animation-delay: calc(var(--twinkle-duration) * -0.66);
}

@keyframes twinkle {
  25% {
    opacity: 0;
  }
}

.star {
  fill: white;
}
.star:nth-child(3n) {
  opacity: 0.8;
}
.star:nth-child(7n) {
  opacity: 0.6;
}
.star:nth-child(13n) {
  opacity: 0.4;
}
.star:nth-child(19n) {
  opacity: 0.2;
}

.comet {
  transform-origin: center center;
  animation: comet 10s linear infinite;
}

@keyframes comet {
  0%, 40% {
    transform: translateX(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  60%, 100% {
    transform: translateX(-100vmax);
    opacity: 0;
  }
}

.comet-b {
  animation-delay: -3.3s;
}

.comet-c {
  animation-delay: -5s;
}