body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: black;
  padding: 0;
  margin: 0;
}

@-webkit-keyframes sunrise {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-75vh);
  }
}

@keyframes sunrise {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-75vh);
  }
}
@-webkit-keyframes skyOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.72;
  }
}
@keyframes skyOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.72;
  }
}
@-webkit-keyframes sunSetOpacity {
  0% {
    opacity: 0.32;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-75vh);
  }
}
@keyframes sunSetOpacity {
  0% {
    opacity: 0.32;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-75vh);
  }
}
@-webkit-keyframes darknessOpacity {
  0% {
    opacity: 80%;
  }
  100% {
    opacity: 0%;
  }
}
@keyframes darknessOpacity {
  0% {
    opacity: 80%;
  }
  100% {
    opacity: 0%;
  }
}
#sun {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200vh;
  background: radial-gradient(circle at center, rgb(242, 248, 247) 0%, rgb(249, 249, 28) 3%, rgb(247, 214, 46) 8%, rgb(248, 200, 95) 12%, rgb(201, 165, 132) 30%, rgb(115, 130, 133) 51%, rgb(46, 97, 122) 85%, rgb(24, 75, 106) 100%);
  transform: translateY(-75vh);
  z-index: 10;
  opacity: 0.5;
  -webkit-animation-name: sunrise;
          animation-name: sunrise;
  -webkit-animation-duration: 45s;
          animation-duration: 45s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

#sun-day {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200vh;
  background: radial-gradient(circle at center, 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) 70%, rgba(201, 165, 132, 0) 100%);
  transform: translateY(-75vh);
  z-index: 999;
  opacity: 0.5;
  -webkit-animation-name: sunrise;
          animation-name: sunrise;
  -webkit-animation-duration: 45s;
          animation-duration: 45s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

#darkness-overlay {
  background-color: #000000;
  opacity: 0%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  -webkit-animation-name: darknessOpacity;
          animation-name: darknessOpacity;
  -webkit-animation-duration: 45s;
          animation-duration: 45s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

#sky {
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  background: linear-gradient(to bottom, rgb(249, 251, 240) 10%, rgb(215, 253, 254) 20%, rgb(167, 222, 253) 40%, rgb(110, 175, 255) 100%);
  opacity: 0.72;
  -webkit-animation-name: skyOpacity;
          animation-name: skyOpacity;
  -webkit-animation-duration: 45s;
          animation-duration: 45s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

#business-card {
  color: rgba(252, 255, 251, 0.9);
  font-weight: 300;
  font-family: "Nunito Sans", sans-serif;
  position: absolute;
  left: 32px;
  bottom: 32px;
  z-index: 99999;
  font-size: 14px;
  line-height: 20px;
}
#business-card strong {
  font-weight: 700;
}
#business-card a {
  text-decoration: none;
  color: rgba(252, 255, 251, 0.9);
}