body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: black;
  font-family: sans-serif;
}

#controls {
  position: absolute;
  top: 20px;
  left: 20px;
  color: white;
  z-index: 10;
  background: rgba(0, 0, 0, 0.2);
  padding: 10px 14px;
  border-radius: 6px;
  backdrop-filter: blur(3px);
}

#sky {
  width: 100%;
  height: 100%;
  position: relative;
  background: linear-gradient(to top, #000011, #000022);
  transition: background 1s linear;
}

#sun {
  position: absolute;
  bottom: -120px;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  background: rgb(255, 200, 50);
  border-radius: 50%;
  box-shadow:
    0 0 40px rgba(255, 220, 50, 0.8),
    0 0 120px rgba(255, 200, 0, 0.6),
    0 0 250px rgba(255, 180, 0, 0.4),
    0 0 400px rgba(255, 150, 0, 0.3);
  filter: blur(2px);
}

#horizon {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 20px;
  background: black;
  z-index: 2;
}