#sunset:checked ~ * {
  --sunset: 1;
  --sunrise: 0;
  --color-building-dark: #00436F;
  --color-building: #0258C6;
  --color-building-light: #1771C5;
  --color-cloud: #9ED5F8;
}

#sunrise:checked ~ * {
  --sunrise: 1;
  --sunset: 0;
  --color-building-dark: #50A8E3;
  --color-building: #9BD9FE;
  --color-building-light: #E5F7FE;
  --color-cloud: white;
}

:root {
  --color-window-dark: #3B98D8;
  --color-window-light: white;
}

#app {
  width: 800px;
  height: 370px;
  padding: 0 2rem;
  display: flex;
  flex-direction: row;
  z-index: 1;
  position: relative;
  font-family: Montserrat, sans-serif;
}
#app * {
  font-weight: 600;
  letter-spacing: 1px;
}
#app > .times {
  flex: 0 0 70%;
}
#app > .heavens {
  flex: 0 0 30%;
}
#app:before, #app:after {
  content: "";
  position: absolute;
  display: block;
  width: 100vw;
  height: 100vh;
  left: calc(50% - 50vw);
  top: calc(50% - 50vh);
  z-index: -10;
  transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
}
#app:before {
  background: linear-gradient(to bottom, #73DAF9, #E5F7FE);
  opacity: var(--sunrise);
}
#app:after {
  background: linear-gradient(to bottom, #0846B0, #23B2EE);
  opacity: var(--sunset);
}

.sky {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1);
}
.sky:before, .sky:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
  z-index: -1;
}
.sky:before {
  background: linear-gradient(to bottom, #2CA4F4, #C2E6FB);
  opacity: var(--sunrise);
}
.sky:after {
  background: linear-gradient(to bottom, #043385, #1797D7);
  opacity: var(--sunset);
}

.times {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-top: 0.5rem;
  overflow: hidden;
}

.time {
  color: white;
}
.time:nth-child(1) {
  -webkit-animation-delay: 0s !important;
          animation-delay: 0s !important;
}
.time:nth-child(2) {
  -webkit-animation-delay: 0.05s !important;
          animation-delay: 0.05s !important;
}
.time:nth-child(3) {
  -webkit-animation-delay: 0.1s !important;
          animation-delay: 0.1s !important;
}
.time:nth-child(4) {
  -webkit-animation-delay: 0.15s !important;
          animation-delay: 0.15s !important;
}
.time:nth-child(5) {
  -webkit-animation-delay: 0.2s !important;
          animation-delay: 0.2s !important;
}
.time:first-child:after {
  font-size: 2.5rem;
}
.time:first-child ~ .time {
  opacity: 0.5;
}
.time:before {
  content: "";
  display: block;
  left: calc(50% - 0.8rem);
  margin-bottom: 0.5rem;
  width: 0;
  height: 0;
  border-width: 0.8rem;
  border-style: solid;
  border-color: transparent;
  border-bottom-color: white;
}
.time:after {
  font-size: 2rem;
}

.city {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.windows {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: repeating-linear-gradient(to top, #044DA8 0, #044DA8 6px, transparent 6px, transparent var(--window-space, 14px));
  overflow: hidden;
}
.windows, .windows:before, .windows:after {
  background-clip: content-box !important;
}
.windows:before, .windows:after {
  transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.windows:before {
  background: repeating-linear-gradient(to top, var(--window-color, var(--color-window-light)) 0, var(--window-color, var(--color-window-light)) 6px, transparent 6px, transparent var(--window-space, 14px));
  opacity: var(--sunrise);
}
.windows:after {
  background: repeating-linear-gradient(to top, gold 0, gold 6px, transparent 6px, transparent var(--window-space, 14px));
  opacity: var(--sunset);
  transition-delay: calc(var(--sunset, 0) * 1.5s);
  transition-duration: 0.75s;
}

.ledge {
  width: 100%;
  height: 0;
  padding: 50% 0;
  overflow: hidden;
}
.ledge:before {
  transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transform-origin: right top;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent);
}
.ledge:after {
  transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
  content: "";
  display: block;
  position: absolute;
  top: 0;
  height: 4px;
  width: 100%;
  background: var(--color-building);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

.building {
  position: absolute;
  bottom: 0;
  height: 60%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
  z-index: 1;
}
.building > .tower {
  bottom: 0;
  z-index: 1;
  background: currentColor;
}
.building > .tower, .building > .tower:before, .building > .tower:after {
  transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
}
.building:nth-child(1) {
  left: 64px;
  height: 145px;
}
.building:nth-child(1) > .tower:nth-child(1) {
  --color-pointy: $color-building-dark;
  width: 21px;
  height: 70%;
  background: white;
  color: var(--color-building-dark);
  background: currentColor;
  --window-color: $color-window-dark;
}
.building:nth-child(1) > .tower:nth-child(1):after {
  content: "";
  display: block;
  position: absolute;
  width: 3px;
  height: 30px;
  bottom: 100%;
  box-shadow: 15px -5px 0 var(--color-pointy);
  z-index: -1;
}
.building:nth-child(1) > .tower:nth-child(1):before {
  content: "";
  display: block;
  position: absolute;
  bottom: 100%;
  left: 0;
  height: 2rem;
  width: 100%;
  z-index: -1;
  transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
  background: var(--color-pointy);
  transform-origin: bottom right;
  transform: skewY(-45deg);
  z-index: -1;
}
.building:nth-child(1) > .tower:nth-child(1) .windows, .building:nth-child(1) > .tower:nth-child(1) .windows:before, .building:nth-child(1) > .tower:nth-child(1) .windows:after {
  padding-right: 8px;
}
.building:nth-child(1) > .tower:nth-child(2) {
  --color-pointy: $color-building;
  width: 50px;
  height: 100%;
  color: var(--color-building);
}
.building:nth-child(1) > .tower:nth-child(2):before {
  content: "";
  display: block;
  position: absolute;
  bottom: 100%;
  left: 0;
  height: 45%;
  width: 100%;
  z-index: -1;
  transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
  background: var(--color-pointy);
  transform-origin: bottom right;
  transform: skewY(-55deg);
  z-index: -1;
}
.building:nth-child(1) > .tower:nth-child(2) .windows, .building:nth-child(1) > .tower:nth-child(2) .windows:before, .building:nth-child(1) > .tower:nth-child(2) .windows:after {
  padding-left: 12px;
}
.building:nth-child(1) > .tower:nth-child(3) {
  --color-pointy: $color-building;
  width: 21px;
  height: 90%;
  color: var(--color-building);
  transform-origin: bottom left;
}
.building:nth-child(1) > .tower:nth-child(3):after {
  content: "";
  display: block;
  position: absolute;
  width: 3px;
  height: 30px;
  bottom: 100%;
  box-shadow: 5px -15px 0 var(--color-pointy), 10px -5px 0 var(--color-pointy);
  z-index: -1;
}
.building:nth-child(1) > .tower:nth-child(3):before {
  content: "";
  display: block;
  position: absolute;
  bottom: 100%;
  left: 0;
  height: 2rem;
  width: 100%;
  z-index: -1;
  transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
  background: var(--color-pointy);
  transform-origin: bottom left;
  transform: skewY(30deg);
  z-index: -1;
}
.building:nth-child(1) > .tower:nth-child(3) .windows, .building:nth-child(1) > .tower:nth-child(3) .windows:before, .building:nth-child(1) > .tower:nth-child(3) .windows:after {
  padding-left: 12px;
}
.building:nth-child(2) {
  left: 284px;
  height: 250px;
}
.building:nth-child(2) > .tower:nth-child(1), .building:nth-child(2) > .tower:nth-child(3) {
  width: 38px;
  height: 50%;
}
.building:nth-child(2) > .tower:nth-child(1) .windows, .building:nth-child(2) > .tower:nth-child(1) .windows:before, .building:nth-child(2) > .tower:nth-child(1) .windows:after, .building:nth-child(2) > .tower:nth-child(3) .windows, .building:nth-child(2) > .tower:nth-child(3) .windows:before, .building:nth-child(2) > .tower:nth-child(3) .windows:after {
  padding: 0 6px;
}
.building:nth-child(2) > .tower:nth-child(1) {
  color: var(--color-building-dark);
  --color-pointy: $color-building-dark;
  --window-color: $color-window-dark;
  --window-space: 20px;
}
.building:nth-child(2) > .tower:nth-child(1):after {
  content: "";
  display: block;
  position: absolute;
  width: 3px;
  height: 30px;
  bottom: 100%;
  box-shadow: 10px 15px 0 var(--color-pointy), 20px 20px 0 var(--color-pointy);
  z-index: -1;
}
.building:nth-child(2) > .tower:nth-child(1):before {
  content: "";
  display: block;
  position: absolute;
  bottom: 100%;
  left: 0;
  height: 4px;
  width: 100%;
  background: var(--color-building);
}
.building:nth-child(2) > .tower:nth-child(2) {
  width: 62px;
  height: 100%;
  color: var(--color-building);
  --color-pointy: $color-building;
  --window-color: $color-window-light;
  --window-space: 20px;
}
.building:nth-child(2) > .tower:nth-child(2):after {
  content: "";
  display: block;
  position: absolute;
  width: 3px;
  height: 30px;
  bottom: 100%;
  box-shadow: 20px 5px 0 var(--color-pointy), 40px 15px 0 var(--color-pointy);
  z-index: -1;
}
.building:nth-child(2) > .tower:nth-child(2):before {
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  display: block;
  width: 20px;
  background: var(--color-building-dark);
}
.building:nth-child(2) > .tower:nth-child(2) .windows, .building:nth-child(2) > .tower:nth-child(2) .windows:before, .building:nth-child(2) > .tower:nth-child(2) .windows:after {
  padding-left: 30px;
}
.building:nth-child(2) > .tower:nth-child(3) {
  color: var(--color-building);
  --window-space: 20px;
}
.building:nth-child(3) {
  left: 554px;
  height: 180px;
}
.building:nth-child(3) > .tower:nth-child(1) {
  --color-pointy: $color-building-dark;
  width: 21px;
  height: 70%;
  background: white;
  color: var(--color-building-dark);
  background: var(--color-building-dark);
  --window-color: $color-window-dark;
}
.building:nth-child(3) > .tower:nth-child(1):before {
  content: "";
  display: block;
  position: absolute;
  bottom: 100%;
  left: 0;
  height: 2rem;
  width: 100%;
  z-index: -1;
  transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
  background: var(--color-pointy);
  transform-origin: bottom right;
  transform: skewY(-55deg);
  z-index: -1;
}
.building:nth-child(3) > .tower:nth-child(1) .windows, .building:nth-child(3) > .tower:nth-child(1) .windows:before, .building:nth-child(3) > .tower:nth-child(1) .windows:after {
  padding-right: 8px;
}
.building:nth-child(3) > .tower:nth-child(2) {
  --color-pointy: $color-building;
  width: 30px;
  height: 100%;
  color: var(--color-building);
}
.building:nth-child(3) > .tower:nth-child(2):after {
  content: "";
  display: block;
  position: absolute;
  width: 3px;
  height: 30px;
  bottom: 100%;
  box-shadow: 10px 20px 0 var(--color-pointy), 14px 23px 0 var(--color-pointy), 20px 15px 0 var(--color-pointy);
  z-index: -1;
}
.building:nth-child(3) > .tower:nth-child(2):before {
  content: "";
  display: block;
  position: absolute;
  bottom: 100%;
  left: 0;
  height: 4px;
  width: 100%;
  background: var(--color-building-light);
}
.building:nth-child(3) > .tower:nth-child(2) .windows, .building:nth-child(3) > .tower:nth-child(2) .windows:before, .building:nth-child(3) > .tower:nth-child(2) .windows:after {
  padding-left: 12px;
}
.building:nth-child(3) > .tower:nth-child(3) {
  --color-pointy: $color-building;
  width: 40px;
  height: 70%;
  color: var(--color-building);
  transform-origin: bottom left;
}
.building:nth-child(3) > .tower:nth-child(3):before {
  content: "";
  display: block;
  position: absolute;
  bottom: 100%;
  left: 0;
  height: 60px;
  width: 100%;
  z-index: -1;
  transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
  background: var(--color-pointy);
  transform-origin: bottom left;
  transform: skewY(50deg);
  z-index: -1;
}
.building:nth-child(3) > .tower:nth-child(3) .windows, .building:nth-child(3) > .tower:nth-child(3) .windows:before, .building:nth-child(3) > .tower:nth-child(3) .windows:after {
  padding-left: 12px;
}

.heavens {
  position: absolute;
  width: 200px;
  right: 0;
  top: 0;
  z-index: 10;
  height: 100%;
  overflow: hidden;
}

[class^=sun] {
  position: absolute;
  text-align: center;
  width: 100%;
  cursor: pointer;
}
[class^=sun]:before {
  content: attr(data-title);
  display: inline-block;
  width: 100%;
  margin: 2rem 0;
  color: white;
  font-size: 1.5rem;
}
[class^=sun]:after {
  transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
  margin-top: 1rem;
  content: "";
  display: inline-block;
  width: 100%;
  border-radius: 50%;
}

.glow {
  width: 200px;
  height: 200px;
  z-index: -1;
  position: absolute;
  right: 0;
  filter: blur(50px);
}
.glow:before, .glow:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.glow:before {
  background: #FFFAAD;
}
.glow:after {
  background: white;
}

.sunrise:after {
  width: 78px;
  height: 78px;
  background: #FFFAAD;
  box-shadow: 0 0 0 1rem rgba(255, 250, 173, 0.3);
}

.sunset:before {
  margin-bottom: 3rem;
}
.sunset:after {
  width: 52px;
  height: 52px;
  background: white;
  box-shadow: 0 0 0 1rem rgba(255, 255, 255, 0.3), 0 0 0 2rem rgba(255, 255, 255, 0.15);
}

.clouds {
  overflow: hidden;
  transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10rem;
  z-index: 1;
  transition: box-shadow 3s cubic-bezier(0.25, 0, 0.1, 1);
}
.clouds:before, .clouds:after {
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-timing-function: cubic-bezier(0.25, 0, 0.1, 1);
          animation-timing-function: cubic-bezier(0.25, 0, 0.1, 1);
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.clouds:before {
  background: white;
  box-shadow: 82px 44px 0 white, 157px 42px 0 white, 244px 14px 0 white, 317px 17px 0 white, 393px 25px 0 white, 473px 18px 0 white, 557px 17px 0 white, 647px 21px 0 white, 718px 29px 0 white, 793px 45px 0 white;
  -webkit-animation-name: clouds-sunrise;
          animation-name: clouds-sunrise;
}
.clouds:after {
  background: #9ED5F8;
  opacity: var(--sunset);
  box-shadow: 82px 44px 0 #9ED5F8, 157px 42px 0 #9ED5F8, 244px 14px 0 #9ED5F8, 317px 17px 0 #9ED5F8, 393px 25px 0 #9ED5F8, 473px 18px 0 #9ED5F8, 557px 17px 0 #9ED5F8, 647px 21px 0 #9ED5F8, 718px 29px 0 #9ED5F8, 793px 45px 0 #9ED5F8;
  -webkit-animation-name: clouds-sunset;
          animation-name: clouds-sunset;
}
@-webkit-keyframes clouds-sunrise {
  to {
    box-shadow: 82px 52px 0 white, 157px 29px 0 white, 244px 3px 0 white, 317px 6px 0 white, 393px 23px 0 white, 473px 26px 0 white, 557px 5px 0 white, 647px 19px 0 white, 718px 20px 0 white, 793px 46px 0 white;
  }
}
@keyframes clouds-sunrise {
  to {
    box-shadow: 82px 52px 0 white, 157px 29px 0 white, 244px 3px 0 white, 317px 6px 0 white, 393px 23px 0 white, 473px 26px 0 white, 557px 5px 0 white, 647px 19px 0 white, 718px 20px 0 white, 793px 46px 0 white;
  }
}
@-webkit-keyframes clouds-sunset {
  to {
    box-shadow: 82px 52px 0 #9ED5F8, 157px 29px 0 #9ED5F8, 244px 3px 0 #9ED5F8, 317px 6px 0 #9ED5F8, 393px 23px 0 #9ED5F8, 473px 26px 0 #9ED5F8, 557px 5px 0 #9ED5F8, 647px 19px 0 #9ED5F8, 718px 20px 0 #9ED5F8, 793px 46px 0 #9ED5F8;
  }
}
@keyframes clouds-sunset {
  to {
    box-shadow: 82px 52px 0 #9ED5F8, 157px 29px 0 #9ED5F8, 244px 3px 0 #9ED5F8, 317px 6px 0 #9ED5F8, 393px 23px 0 #9ED5F8, 473px 26px 0 #9ED5F8, 557px 5px 0 #9ED5F8, 647px 19px 0 #9ED5F8, 718px 20px 0 #9ED5F8, 793px 46px 0 #9ED5F8;
  }
}
.clouds:before, .clouds:after {
  transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
  transition-timing-function: ease-in-out;
  width: 10rem;
  height: 10rem;
  top: 5rem;
  left: -5rem;
  border-radius: 50%;
  content: "";
  display: block;
  position: absolute;
}

.stars {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.stars:before, .stars:after {
  transition: all 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1);
  opacity: var(--sunset);
  content: "";
  display: block;
  position: absolute;
  border-radius: 50%;
}
.stars:before {
  height: 3px;
  width: 3px;
  box-shadow: 402px 345px 3px white, 205px 12px 4px white, 425px 83px 3px white, 731px 7px 1px white, 183px 35px 2px white, 122px 311px 4px white, 432px 189px 3px white, 498px 188px 1px white, 663px 80px 4px white, 342px 142px 2px white, 338px 293px 1px white, 209px 297px 1px white, 561px 249px 2px white, 222px 96px 1px white, 633px 76px 2px white, 316px 337px 1px white, 231px 208px 1px white, 666px 134px 2px white, 173px 174px 1px white, 800px 323px 4px white, 87px 230px 3px white, 789px 255px 1px white, 59px 16px 4px white, 645px 107px 3px white, 546px 274px 1px white, 500px 81px 2px white, 622px 324px 3px white, 415px 173px 2px white, 446px 45px 1px white, 581px 141px 2px white;
}
.stars:after {
  height: 5px;
  width: 5px;
  box-shadow: 120px 236px 1px white, 531px 118px 2px white, 45px 198px 3px white, 127px 324px 3px white, 77px 320px 1px white, 164px 300px 3px white, 375px 209px 4px white, 291px 71px 3px white, 176px 135px 3px white, 398px 2px 1px white, 351px 319px 2px white, 387px 173px 2px white, 519px 186px 4px white, 770px 59px 3px white, 657px 128px 2px white, 89px 80px 1px white, 669px 248px 1px white, 420px 51px 4px white, 75px 242px 4px white, 250px 336px 2px white, 310px 74px 2px white, 16px 61px 4px white, 436px 197px 2px white, 477px 141px 3px white, 786px 318px 4px white, 365px 200px 3px white, 718px 284px 2px white, 333px 69px 2px white, 103px 193px 1px white, 758px 64px 3px white;
  transition-delay: calc(var(--sunset) * 1.5s);
}

input {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
}

#sunrise:checked ~ #app .time {
  -webkit-animation: time-move-sunrise 1.5s none;
          animation: time-move-sunrise 1.5s none;
}
#sunrise:checked ~ #app .time:after {
  content: "";
  -webkit-animation: time-change-sunrise 2.5s both;
          animation: time-change-sunrise 2.5s both;
}
#sunrise:checked ~ #app .heavens > .sunset:before {
  -webkit-animation: fade-out 0.75s cubic-bezier(0.25, 0, 0.1, 1) both;
          animation: fade-out 0.75s cubic-bezier(0.25, 0, 0.1, 1) both;
}
#sunrise:checked ~ #app .heavens > .sunset:after {
  -webkit-animation: circle-leave 1.5s cubic-bezier(0.25, 0, 0.1, 1) both;
          animation: circle-leave 1.5s cubic-bezier(0.25, 0, 0.1, 1) both;
}
#sunrise:checked ~ #app .heavens > .sunrise {
  pointer-events: none;
}
#sunrise:checked ~ #app .heavens > .sunrise:before {
  -webkit-animation: fade-in 0.75s 1.5s cubic-bezier(0.25, 0, 0.1, 1) both;
          animation: fade-in 0.75s 1.5s cubic-bezier(0.25, 0, 0.1, 1) both;
}
#sunrise:checked ~ #app .heavens > .sunrise:after {
  -webkit-animation: circle-enter 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1) both;
          animation: circle-enter 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1) both;
}
#sunrise:checked ~ #app .glow:before {
  -webkit-animation: circle-enter 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1) both;
          animation: circle-enter 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1) both;
}
#sunrise:checked ~ #app .glow:after {
  -webkit-animation: circle-leave 1.5s cubic-bezier(0.25, 0, 0.1, 1) both;
          animation: circle-leave 1.5s cubic-bezier(0.25, 0, 0.1, 1) both;
}
#sunrise:checked ~ #app .ledge:before {
  -webkit-animation: ledge-shadow-sunrise 1.5s cubic-bezier(0.25, 0, 0.1, 1) both;
          animation: ledge-shadow-sunrise 1.5s cubic-bezier(0.25, 0, 0.1, 1) both;
}

@-webkit-keyframes ledge-shadow-sunrise {
  50% {
    transform: skewX(-25deg);
  }
  60% {
    transform: skewX(-80deg);
  }
  from, to {
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    transform: skewX(-45deg);
  }
}

@keyframes ledge-shadow-sunrise {
  50% {
    transform: skewX(-25deg);
  }
  60% {
    transform: skewX(-80deg);
  }
  from, to {
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    transform: skewX(-45deg);
  }
}
@-webkit-keyframes time-move-sunrise {
  50% {
    transform: translateY(-25%);
    opacity: 0;
  }
}
@keyframes time-move-sunrise {
  50% {
    transform: translateY(-25%);
    opacity: 0;
  }
}
#sunset:checked ~ #app .time {
  -webkit-animation: time-move-sunset 1.5s none;
          animation: time-move-sunset 1.5s none;
}
#sunset:checked ~ #app .time:after {
  content: "";
  -webkit-animation: time-change-sunset 2.5s both;
          animation: time-change-sunset 2.5s both;
}
#sunset:checked ~ #app .heavens > .sunrise:before {
  -webkit-animation: fade-out 0.75s cubic-bezier(0.25, 0, 0.1, 1) both;
          animation: fade-out 0.75s cubic-bezier(0.25, 0, 0.1, 1) both;
}
#sunset:checked ~ #app .heavens > .sunrise:after {
  -webkit-animation: circle-leave 1.5s cubic-bezier(0.25, 0, 0.1, 1) both;
          animation: circle-leave 1.5s cubic-bezier(0.25, 0, 0.1, 1) both;
}
#sunset:checked ~ #app .heavens > .sunset {
  pointer-events: none;
}
#sunset:checked ~ #app .heavens > .sunset:before {
  -webkit-animation: fade-in 0.75s 1.5s cubic-bezier(0.25, 0, 0.1, 1) both;
          animation: fade-in 0.75s 1.5s cubic-bezier(0.25, 0, 0.1, 1) both;
}
#sunset:checked ~ #app .heavens > .sunset:after {
  -webkit-animation: circle-enter 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1) both;
          animation: circle-enter 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1) both;
}
#sunset:checked ~ #app .glow:after {
  -webkit-animation: circle-enter 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1) both;
          animation: circle-enter 0.75s 0.75s cubic-bezier(0.25, 0, 0.1, 1) both;
}
#sunset:checked ~ #app .glow:before {
  -webkit-animation: circle-leave 1.5s cubic-bezier(0.25, 0, 0.1, 1) both;
          animation: circle-leave 1.5s cubic-bezier(0.25, 0, 0.1, 1) both;
}
#sunset:checked ~ #app .ledge:before {
  -webkit-animation: ledge-shadow-sunset 1.5s cubic-bezier(0.25, 0, 0.1, 1) both;
          animation: ledge-shadow-sunset 1.5s cubic-bezier(0.25, 0, 0.1, 1) both;
}

@-webkit-keyframes ledge-shadow-sunset {
  50% {
    transform: skewX(-25deg);
  }
  60% {
    transform: skewX(-80deg);
  }
  from, to {
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    transform: skewX(-45deg);
  }
}

@keyframes ledge-shadow-sunset {
  50% {
    transform: skewX(-25deg);
  }
  60% {
    transform: skewX(-80deg);
  }
  from, to {
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    transform: skewX(-45deg);
  }
}
@-webkit-keyframes time-move-sunset {
  50% {
    transform: translateY(-25%);
    opacity: 0;
  }
}
@keyframes time-move-sunset {
  50% {
    transform: translateY(-25%);
    opacity: 0;
  }
}
@-webkit-keyframes circle-leave {
  50% {
    transform: translateY(-50%);
    opacity: 1;
  }
  to {
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    transform: translateY(60vh);
    opacity: 0;
  }
}
@keyframes circle-leave {
  50% {
    transform: translateY(-50%);
    opacity: 1;
  }
  to {
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    transform: translateY(60vh);
    opacity: 0;
  }
}
@-webkit-keyframes circle-enter {
  from {
    opacity: 0;
    transform: translateY(-50vh);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes circle-enter {
  from {
    opacity: 0;
    transform: translateY(-50vh);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes time-change-sunrise {
  from {
    content: attr(data-sunset);
  }
  to {
    content: attr(data-sunrise);
  }
}
@keyframes time-change-sunrise {
  from {
    content: attr(data-sunset);
  }
  to {
    content: attr(data-sunrise);
  }
}
@-webkit-keyframes time-change-sunset {
  from {
    content: attr(data-sunrise);
  }
  to {
    content: attr(data-sunset);
  }
}
@keyframes time-change-sunset {
  from {
    content: attr(data-sunrise);
  }
  to {
    content: attr(data-sunset);
  }
}
@-webkit-keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
body {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

*, *:before, *:after {
  box-sizing: border-box;
  position: relative;
}