* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* color vars here */
  --background: hsl(265, 100%, 5%);
  --border-color: hsl(0, 0%, 95%);
  --sun-color: hsl(50, 100%, 50%);
  --sun-glow: hsl(25, 100%, 50%);
  --moon-color: hsl(180, 100%, 95%);
  --moon-glow: hsl(0, 0%, 100%);
}

body {
  background-color: var(--background);
}

main {
  margin: 5svh auto;
  height: 90svh;
  width: 95svw;
  position: relative;
  /* background-color: red; */
}

#sun-dial {
  position: absolute;
  background: transparent;
  outline: 5px solid var(--border-color);
  height: 60%;
  width: 50%;
  top: 10%;
  left: 25%;
  clip-path: fill-box;
}

.day {
  background: linear-gradient(
    0deg,
    hsl(0, 0%, 90%) 0%,
    hsl(225, 100%, 50%) 50%
  );
  transition: opacity 1s ease;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.night {
  background: linear-gradient(0deg, hsl(0, 0%, 90%) 0%, hsl(265, 100%, 5%) 35%);
  transition: opacity 1s ease;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#sun-container,
#moon-container {
  position: absolute;
  top: 35%;
  left: 0%;
  width: 100%;
}

/* Class for when an element is within it's correct range */
.motion {
  transition: all 0.5s ease;
}

/* Range of the rotate containers: -40 to 230 deg / 270deg. */
#sun-container {
  rotate: -60deg;
}

#moon-container {
  rotate: -60deg;
}

#sun {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--sun-color) 45%,
    var(--sun-glow) 100%
  );
  box-shadow: 0 0 50px 20px var(--sun-glow);
}

#moon {
  height: 80px;
  width: 80px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--moon-color) 45%,
    var(--moon-glow) 100%
  );
  box-shadow: 0 0 40px 15px var(--moon-glow);
}

#ground {
  background-color: green;
  width: 120%;
  height: 50%;
  position: absolute;
  bottom: -25%;
  left: -10%;
  border-radius: 50%;
  z-index: 10;
}

#controller {
  width: 50%;
  height: 20%;
  background-color: black;
  position: absolute;
  bottom: 7.5%;
  left: 25%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
  align-items: center;
  z-index: 5;
}

#icon-container,
#slider-container {
  width: 75%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

img {
  filter: invert(100%);
}

#day-dial {
  width: 100%;
}