*{margin:0;padding:0;}
html, body {
  height: 100%;
  background-color: #112;
}

input[type="checkbox"] {
  display: none;
}
input[type="checkbox"]:checked ~ label {
  -webkit-transform: translate(0, -0.65em);
          transform: translate(0, -0.65em);
  padding-bottom: 0.65em;
}
input[type="checkbox"]:checked ~ .scene {
  background-color: #00ffff;
  -webkit-animation: hue-rotate 60s linear infinite 0s;
          animation: hue-rotate 60s linear infinite 0s;
}
input[type="checkbox"]:checked ~ .scene .container {
  -webkit-filter: blur(0.75vw) contrast(3);
          filter: blur(0.75vw) contrast(3);
}
input[type="checkbox"]:checked ~ .scene .container .sun {
  background: radial-gradient(transparent 65%, #fd1 100%), linear-gradient(#f53 0, #fd1 100%);
  -webkit-animation: initial;
          animation: initial;
}
input[type="checkbox"]:checked ~ .scene .container .band {
  background-color: #5affff;
}

label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding-left: 0.1em;
  font-size: 4em;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);
}

.scene {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #112;
}

.container {
  position: relative;
  height: 30vw;
  width: 30vw;
  overflow: hidden;
}

.sun {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  width: 30vw;
  height: 30vw;
  background: radial-gradient(transparent 65%, #ff0488 100%), linear-gradient(#ffcb55 0, #ff0488 100%);
  border-radius: 50%;
  -webkit-animation: hue-rotate 60s ease-in-out infinite 5s;
          animation: hue-rotate 60s ease-in-out infinite 5s;
}

.band {
  position: absolute;
  bottom: -6vw;
  width: 100%;
  height: 10%;
  background: #112;
  -webkit-animation: wave 10s linear infinite;
          animation: wave 10s linear infinite;
}

@-webkit-keyframes wave {
  0% {
    -webkit-transform: translateY(0) scaleY(1);
            transform: translateY(0) scaleY(1);
  }
  100% {
    -webkit-transform: translateY(-24vw) scaleY(0);
            transform: translateY(-24vw) scaleY(0);
  }
}

@keyframes wave {
  0% {
    -webkit-transform: translateY(0) scaleY(1);
            transform: translateY(0) scaleY(1);
  }
  100% {
    -webkit-transform: translateY(-24vw) scaleY(0);
            transform: translateY(-24vw) scaleY(0);
  }
}
@-webkit-keyframes hue-rotate {
  0% {
    -webkit-filter: hue-rotate(360deg);
            filter: hue-rotate(360deg);
  }
  100% {
    -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
  }
}
@keyframes hue-rotate {
  0% {
    -webkit-filter: hue-rotate(360deg);
            filter: hue-rotate(360deg);
  }
  100% {
    -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
  }
}