* {
    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;
}

.instruction-wrapper-wrapper {
    display: flex;
    top: 1.5%;
    left: 2.5%;
}

#instruction {
    font-family: 'VT323', monospace;
    font-size: 4.5vh;
    letter-spacing: 0.07em;
    border-right: 0.15em solid white;
    color: white;
    overflow: hidden;
    white-space: nowrap;
    animation: typing 5s steps(31),
        blinking 1s steps(1) infinite,
        hiding 7s linear 6s 1;
    animation-fill-mode: forwards;
}

iframe {
    position: absolute;
    top: 1.5vh;
    right: 1.5vh;
    z-index: 2;
    width: 40vh;
    min-width: 250px;
    height: 10vh;
    min-height: 80px;
    border-radius: 12px;
}

.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%;
    }
}