body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  min-height: 100vh;
}
body *,
body *:before,
body *:after {
  box-sizing: border-box;
}

svg {
  position: absolute;
}

.scene {
  font-size: .55vmin;
  position: relative;
  overflow: hidden;
  width: 50vmin;
  height: 50vmin;
  transition: all .2s ease-in;
  border-radius: 100%;
  background-image: linear-gradient(to bottom, #ff3800, #ffd938 60%);
  box-shadow: 0 10em 15em rgba(255, 56, 0, 0.2);
}
.scene * {
  transition: all .2s ease-in;
}
.scene:before {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  -webkit-filter: url(#grain);
          filter: url(#grain);
}

.sky {
  position: relative;
  width: 100%;
  height: 64%;
}

.sun {
  position: absolute;
  right: 7em;
  bottom: 0;
  width: 30em;
  height: 30em;
  border-radius: 100%;
  background: #ffe535;
  -webkit-filter: saturate(90%);
          filter: saturate(90%);
}

.moon {
  position: absolute;
  z-index: 1;
  top: 10em;
  left: 10em;
  width: 20em;
  height: 20em;
  -webkit-transform: rotate(0);
          transform: rotate(0);
  -webkit-transform-origin: 50% 200%;
          transform-origin: 50% 200%;
  opacity: 0;
  border-radius: 100%;
  background: white;
  -webkit-clip-path: url(#moon);
          clip-path: url(#moon);
}

.stars {
  position: absolute;
  top: 7em;
  right: 0;
  left: 0;
  width: 45em;
  height: 15em;
  margin: 0 auto;
  background: rgba(255, 183, 37, 0.5);
  -webkit-clip-path: url(#stars);
          clip-path: url(#stars);
}

.clouds {
  position: absolute;
  top: 27em;
  width: 100em;
  height: 19em;
  background-image: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.15), transparent 50em), radial-gradient(circle at 60% 90%, rgba(255, 255, 255, 0.5), transparent 15em), radial-gradient(circle at 100% 80%, rgba(255, 255, 255, 0.5), transparent 30em);
  -webkit-clip-path: url(#clouds);
          clip-path: url(#clouds);
}

.foreground {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 55%;
}

.mountain {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}
.mountain:nth-of-type(1) {
  -webkit-clip-path: url(#mountain-1);
          clip-path: url(#mountain-1);
}
.mountain:nth-of-type(2) {
  -webkit-clip-path: url(#mountain-2);
          clip-path: url(#mountain-2);
}
.mountain:nth-of-type(3) {
  -webkit-clip-path: url(#mountain-3);
          clip-path: url(#mountain-3);
}
.mountain:nth-of-type(4) {
  -webkit-clip-path: url(#mountain-4);
          clip-path: url(#mountain-4);
}
.mountain:nth-of-type(5) {
  -webkit-clip-path: url(#mountain-5);
          clip-path: url(#mountain-5);
}
.mountain:nth-of-type(6) {
  -webkit-clip-path: url(#mountain-6);
          clip-path: url(#mountain-6);
}
.mountain:nth-of-type(1) {
  height: 37em;
  background-image: radial-gradient(circle at top right, rgba(255, 182, 49, 0.9), transparent 60em);
}
.mountain:nth-of-type(2) {
  height: 100%;
  background-image: radial-gradient(circle at top left, #ff5f25, transparent 60em), radial-gradient(circle at 90% 30%, rgba(255, 95, 37, 0.8), transparent 10em), radial-gradient(circle at 67% 40%, rgba(255, 95, 37, 0.3), transparent 10em);
}
.mountain:nth-of-type(3) {
  height: 39em;
  background-image: radial-gradient(circle at top left, #eb2e19, transparent 90em);
}
.mountain:nth-of-type(4) {
  height: 32em;
  background-image: radial-gradient(circle at top left, #c00e0a, #fa4b18, transparent 80em);
}
.mountain:nth-of-type(5) {
  height: 27em;
  background-image: linear-gradient(to left, #d62d00, #f14116 70%);
}
.mountain:nth-of-type(6) {
  height: 18em;
  background: black;
  background-image: linear-gradient(to right, #ab1514, #f23113 50em);
}

.background {
  background: white;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  transition: all .3s linear;
}

.hover {
  position: absolute;
  z-index: 3;
  top: 50%;
  width: 50vmin;
  height: 50vmin;
  margin: 0 auto;
  content: '';
  cursor: pointer;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border-radius: 100%;
}
.hover:before {
  content: "hover";
  opacity: .2;
  text-transform: uppercase;
  letter-spacing: 1vmin;
  font-size: 2vmin;
  position: absolute;
  bottom: -4vmin;
  left: 0;
  right: 0;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.hover:hover:before {
  color: white;
}
.hover:hover ~ .scene {
  -webkit-filter: hue-rotate(-180deg) brightness(70%);
          filter: hue-rotate(-180deg) brightness(70%);
}
.hover:hover ~ .scene .sun {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}
.hover:hover ~ .scene .moon {
  -webkit-transform: rotate(20deg);
          transform: rotate(20deg);
  opacity: 1;
}
.hover:hover ~ .scene .stars {
  -webkit-transform: scale(1.2) translateY(5em);
          transform: scale(1.2) translateY(5em);
}
.hover:hover ~ .scene .clouds {
  opacity: .5;
}
.hover:hover ~ .background {
  background: #111;
}