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

body {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  filter: saturate(150%);
}

.absolute {
  position: absolute;
}

.sky {
  width: 100%;
  height: 108vh;
  z-index: -3;
  overflow: hidden;
  background: linear-gradient(
    rgb(68, 47, 121),
    rgb(68, 47, 121) 30%,
    rgb(54, 29, 77) 45%,
    rgb(90, 0, 74),
    rgb(90, 45, 45) 85%,
    rgb(90, 74, 0)
  );
  animation: darken-sky 60s alternate 0s 2;
}

.plain {
  overflow: hidden;
  width: 100%;
  height: 40vh;
  margin-top: 60vh;
  background-color: black;
}

/* Horizontal Grid Lines */
/* Perspective given by y=6.75log(x)+3.25 */
.horizontal-line {
  width: 100%;
  background-color: magenta;
  filter: blur(1.2px);
}

.horizontal-line.first {
  height: 0.5025vh;
  bottom: 32.5%;
  animation: hl1-perspective 0.5s linear 0s infinite,
    darken-plain 60s alternate 0s 2;
}

.horizontal-line.second {
  height: 0.44154vh;
  bottom: 52.82%;
  animation: hl2-perspective 0.5s linear 0s infinite,
    darken-plain 60s alternate 0s 2;
}

.horizontal-line.third {
  height: 0.40587vh;
  bottom: 64.71%;
  animation: hl3-perspective 0.5s linear 0s infinite,
    darken-plain 60s alternate 0s 2;
}

.horizontal-line.fourth {
  height: 0.38058vh;
  bottom: 73.14%;
  animation: hl4-perspective 0.5s linear 0s infinite,
    darken-plain 60s alternate 0s 2;
}

.horizontal-line.fifth {
  height: 0.36096vh;
  bottom: 79.68%;
  animation: hl5-perspective 0.5s linear 0s infinite,
    darken-plain 60s alternate 0s 2;
}

.horizontal-line.sixth {
  height: 0.34491vh;
  bottom: 85.03%;
  animation: hl6-perspective 0.5s linear 0s infinite,
    darken-plain 60s alternate 0s 2;
}

.horizontal-line.seventh {
  height: 0.33138vh;
  bottom: 89.54%;
  animation: hl7-perspective 0.5s linear 0s infinite,
    darken-plain 60s alternate 0s 2;
}

.horizontal-line.eighth {
  height: 0.31962vh;
  bottom: 93.46%;
  animation: hl8-perspective 0.5s linear 0s infinite,
    darken-plain 60s alternate 0s 2;
}

.horizontal-line.ninth {
  height: 0.30927vh;
  bottom: 96.91%;
  animation: hl9-perspective 0.5s linear 0s infinite,
    darken-plain 60s alternate 0s 2;
}

.horizontal-line.tenth {
  height: 0.3vh;
  bottom: 100%;
  animation: hl10-perspective 0.5s linear 0s infinite,
    darken-plain 60s alternate 0s 2;
}

/* Vertical Grid Lines */
/* Perspective focus point a little above the sun's center */
.vertical-line {
  width: 0.5vh;
  height: 80vh;
  background-color: magenta;
  filter: blur(1.2px);
  animation: darken-plain 60s alternate 0s 2;
}

.vertical-line.minus11 {
  top: -65%;
  right: -18.75%;
  transform: rotate(-68.75deg);
}

.vertical-line.minus10 {
  top: -55%;
  right: -12.5%;
  transform: rotate(-62.5deg);
}

.vertical-line.minus9 {
  top: -45.5%;
  right: -6.25%;
  transform: rotate(-56.25deg);
}

.vertical-line.minus8 {
  top: -37%;
  right: 0%;
  transform: rotate(-50deg);
}

.vertical-line.minus7 {
  top: -29%;
  right: 93.75%;
  transform: rotate(43.75deg);
}

.vertical-line.minus6 {
  top: -22%;
  right: 87.5%;
  transform: rotate(37.5deg);
}

.vertical-line.minus5 {
  top: -16%;
  right: 81.25%;
  transform: rotate(31.25deg);
}

.vertical-line.minus4 {
  top: -10%;
  right: 75%;
  transform: rotate(25deg);
}

.vertical-line.minus3 {
  top: -6%;
  right: 68.75%;
  transform: rotate(18.75deg);
}

.vertical-line.minus2 {
  top: -3%;
  right: 62.5%;
  transform: rotate(12.5deg);
}

.vertical-line.minus1 {
  top: -1%;
  right: 56.25%;
  transform: rotate(6.25deg);
}

.vertical-line.zero {
  right: 50%;
}

.vertical-line.plus1 {
  top: -1%;
  right: 43.75%;
  transform: rotate(-6.25deg);
}

.vertical-line.plus2 {
  top: -3%;
  right: 37.5%;
  transform: rotate(-12.5deg);
}

.vertical-line.plus3 {
  top: -6%;
  right: 31.25%;
  transform: rotate(-18.75deg);
}

.vertical-line.plus4 {
  top: -10%;
  right: 25%;
  transform: rotate(-25deg);
}

.vertical-line.plus5 {
  top: -16%;
  right: 18.75%;
  transform: rotate(-31.25deg);
}

.vertical-line.plus6 {
  top: -22%;
  right: 12.5%;
  transform: rotate(-37.5deg);
}

.vertical-line.plus7 {
  top: -29%;
  right: 6.25%;
  transform: rotate(-43.75deg);
}

.vertical-line.plus8 {
  top: -37%;
  right: 100%;
  transform: rotate(50deg);
}

.vertical-line.plus9 {
  top: -45.5%;
  right: 106.25%;
  transform: rotate(56.25deg);
}

.vertical-line.plus10 {
  top: -55%;
  right: 112.5%;
  transform: rotate(62.5deg);
}

.vertical-line.plus11 {
  top: -65%;
  right: 118.75%;
  transform: rotate(68.75deg);
}

/* Mountain Horizon */
.mountains {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.mountain {
  background-color: black;
  z-index: -1;
  filter: blur(1px);
}

.mountain.bottom {
  top: 55%;
  width: 100%;
  height: 5vh;
  z-index: 1;
  border-bottom: 0.3vh solid cyan;
  filter: blur(2px);
  animation: darken-mountain 60s alternate 0s 2;
}

.mountain.first {
  top: 45%;
  left: -4%;
  width: 48vh;
  height: 48vh;
  transform: rotate(30deg);
}

.mountain.second {
  top: 37%;
  left: 8%;
  width: 36vh;
  height: 36vh;
  transform: rotate(45deg);
}

.mountain.third {
  top: 45%;
  left: 17%;
  width: 34vh;
  height: 34vh;
  transform: rotate(45deg);
}

.mountain.fourth {
  top: 35%;
  left: 22%;
  width: 0;
  height: 0;
  background-color: transparent;
  border-left: 42vh solid transparent;
  border-right: 42vh solid transparent;
  border-bottom: 37vh solid black;
  transform: rotate(-2deg);
}

.mountain.fifth {
  top: 27.5%;
  left: 49%;
  width: 0;
  height: 0;
  background-color: transparent;
  border-left: 22vh solid transparent;
  border-right: 22vh solid transparent;
  border-bottom: 36vh solid black;
}

.mountain.sixth {
  top: 32.5%;
  left: 53%;
  width: 0;
  height: 0;
  background-color: transparent;
  border-left: 22vh solid transparent;
  border-right: 22vh solid transparent;
  border-bottom: 36vh solid black;
}

.mountain.seventh {
  top: 39%;
  left: 54%;
  width: 0;
  height: 0;
  background-color: transparent;
  border-left: 45vh solid transparent;
  border-right: 45vh solid transparent;
  border-bottom: 34vh solid black;
  transform: rotate(5deg);
}

.mountain.eighth {
  top: 30%;
  left: 73%;
  width: 0;
  height: 0;
  background-color: transparent;
  border-left: 27vh solid transparent;
  border-right: 27vh solid transparent;
  border-bottom: 35vh solid black;
}

.mountain.ninth {
  top: 35%;
  left: 83%;
  width: 43vh;
  height: 43vh;
  transform: rotate(45deg);
}

#sun-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

#sun {
  width: 45vh;
  height: 45vh;
  z-index: -2;
  margin: 3vh;
  border-radius: 50%;
  background: linear-gradient(
    rgb(255, 255, 0) 0%,
    rgb(255, 153, 102) 40%,
    transparent 40%,
    transparent 41%,
    rgb(255, 150, 105) 41%,
    rgb(255, 140, 115) 45%,
    transparent 45%,
    transparent 47%,
    rgb(255, 135, 120) 47%,
    rgb(255, 122, 133) 52%,
    transparent 52%,
    transparent 55%,
    rgb(255, 115, 140) 55%,
    rgb(255, 99, 156) 61%,
    transparent 61%,
    transparent 65%,
    rgb(255, 89, 166) 65%,
    rgb(255, 71, 184) 72%,
    transparent 72%,
    transparent 77%,
    rgb(255, 59, 196) 77%,
    rgb(255, 38, 217) 85%,
    transparent 85%,
    transparent 100%
  );
  filter: blur(1.2px) drop-shadow(16px 16px 20px rgba(255, 0, 200, 0.3));
  animation: sunset 60s alternate 0s 2;
}

/* Animations */
@keyframes sunset {
  40% {
    filter: blur(1.2px);
  }

  100% {
    transform: translateY(52vh) scale(1.3);
    filter: blur(15px);
  }
}

@keyframes darken-sky {
  100% {
    transform: translateY(-50%);
  }
}

@keyframes darken-plain {
  100% {
    background-color: rgb(66, 33, 33);
  }
}

@keyframes darken-mountain {
  100% {
    filter: brightness(40%) blur(2px);
  }
}

@keyframes typing {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@keyframes blinking {
  0%,
  100% {
    border-color: transparent;
  }

  50% {
    border-color: white;
  }
}

@keyframes hiding {
  100% {
    transform: translate(-2.5vh, -7vh);
  }
}

@keyframes hl1-perspective {
  100% {
    height: 0.6vh;
    bottom: 0%;
  }
}

@keyframes hl2-perspective {
  100% {
    height: 0.5025vh;
    bottom: 32.5%;
  }
}

@keyframes hl3-perspective {
  100% {
    height: 0.44154vh;
    bottom: 52.82%;
  }
}

@keyframes hl4-perspective {
  100% {
    height: 0.40587vh;
    bottom: 64.71%;
  }
}

@keyframes hl5-perspective {
  100% {
    height: 0.38058vh;
    bottom: 73.14%;
  }
}

@keyframes hl6-perspective {
  100% {
    height: 0.36096vh;
    bottom: 79.68%;
  }
}

@keyframes hl7-perspective {
  100% {
    height: 0.34491vh;
    bottom: 85.03%;
  }
}

@keyframes hl8-perspective {
  100% {
    height: 0.33138vh;
    bottom: 89.54%;
  }
}

@keyframes hl9-perspective {
  100% {
    height: 0.31962vh;
    bottom: 93.46%;
  }
}

@keyframes hl10-perspective {
  100% {
    height: 0.30927vh;
    bottom: 96.91%;
  }
}