body {
    background: radial-gradient(ellipse at center, rgb(0 173 23 / 60%) 0%, rgba(0, 0, 0, 0.8) 60%, rgba(0, 0, 0, 1) 90%), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/31787/stars.jpg);
    background-size: cover;
    z-index: -5;
    color: white;
    overflow: hidden;
    font-size: 2em;
}

h1 {
    animation: neon1 1.5s ease-in-out infinite alternate;
    font-family: 'Monoton', monospace;
}

a {
    background-color: #1DB954 !important;
    width: fit-content;
    color: black;
    font-family: "Poppins", sans-serif;
    text-decoration: none;
    font-weight: 600;
    padding: 7px 30px;
    border-radius: 50px;
    font-size: 14px;
    box-shadow: rgb(0 0 0 / 17%) 0px 5px 15px;
    transition: .3s ease-in-out;
    position: relative;
    z-index: 1000;
}

a:hover {
    background-color: #21c55a;
    box-shadow: rgba(29, 185, 84, 0.35) 0px 5px 15px;
}

#overlay {
    height: 100svh;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
}

#layer-0 {
    background: rgba(92, 71, 255, 0);
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 25%, #1f1f1f 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(92, 71, 255, 0)), color-stop(25%, rgba(0, 0, 0, 1)), color-stop(100%, #1f1f1f));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 25%, #1f1f1f 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 25%, #1f1f1f 100%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 25%, #1f1f1f 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 25%, #1f1f1f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5c47ff', endColorstr='#ff47ff', GradientType=0);
    height: 400px;
    width: 200vw;
    opacity: 1;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 -50%;
    overflow: hidden;
    transform: perspective(200px) rotateX(60deg);
    z-index: -5;
}

#layer-1 {
    background: rgb(49, 247, 91);
    background: -moz-linear-gradient(45deg, rgb(49, 247, 91) 0%, rgba(92, 71, 255, 0) 50%, rgba(92, 71, 255, 0) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgb(49, 247, 91)), color-stop(50%, rgba(92, 71, 255, 0)), color-stop(100%, rgba(92, 71, 255, 0)));
    background: -webkit-linear-gradient(45deg, rgb(49, 247, 91) 0%, rgba(92, 71, 255, 0) 50%, rgba(92, 71, 255, 0) 100%);
    background: -o-linear-gradient(45deg, rgb(49, 247, 91) 0%, rgba(92, 71, 255, 0) 50%, rgba(92, 71, 255, 0) 100%);
    background: -ms-linear-gradient(45deg, rgb(49, 247, 91) 0%, rgba(92, 71, 255, 0) 50%, rgba(92, 71, 255, 0) 100%);
    background: linear-gradient(45deg, rgb(49, 247, 91) 0%, rgba(92, 71, 255, 0) 50%, rgba(92, 71, 255, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5c47ff', endColorstr='#5c47ff', GradientType=1);
    height: inherit;
    width: inherit;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: -5;
}

#layer-2 {
    background: rgba(92, 71, 255, 0);
    background: -moz-linear-gradient(-45deg, rgba(92, 71, 255, 0) 0%, rgba(92, 71, 255, 0) 50%, rgb(49, 247, 91) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(92, 71, 255, 0)), color-stop(50%, rgba(92, 71, 255, 0)), color-stop(100%, rgb(49, 247, 91)));
    background: -webkit-linear-gradient(-45deg, rgba(92, 71, 255, 0) 0%, rgba(92, 71, 255, 0) 50%, rgb(49, 247, 91) 100%);
    background: -o-linear-gradient(-45deg, rgba(92, 71, 255, 0) 0%, rgba(92, 71, 255, 0) 50%, rgb(49, 247, 91) 100%);
    background: -ms-linear-gradient(-45deg, rgba(92, 71, 255, 0) 0%, rgba(92, 71, 255, 0) 50%, rgb(49, 247, 91) 100%);
    background: linear-gradient(135deg, rgba(92, 71, 255, 0) 0%, rgba(92, 71, 255, 0) 50%, rgb(49, 247, 91) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5c47ff', endColorstr='#5c47ff', GradientType=1);
    height: inherit;
    width: inherit;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: -5;
}

#layer-corner {
    background: #1DB954;
    background: -moz-linear-gradient(top, #1DB954 0%, rgba(96, 130, 223, 0) 54%, rgba(117, 24, 240, 0) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #1DB954), color-stop(54%, rgba(96, 130, 223, 0)), color-stop(100%, rgba(117, 24, 240, 0)));
    background: -webkit-linear-gradient(top, #1DB954 0%, rgba(96, 130, 223, 0) 54%, rgba(117, 24, 240, 0) 100%);
    background: -o-linear-gradient(top, #1DB954 0%, rgba(96, 130, 223, 0) 54%, rgba(117, 24, 240, 0) 100%);
    background: -ms-linear-gradient(top, #1DB954 0%, rgba(96, 130, 223, 0) 54%, rgba(117, 24, 240, 0) 100%);
    background: linear-gradient(to bottom, #1DB954 0%, rgba(96, 130, 223, 0) 54%, rgba(117, 24, 240, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#47ffcb', endColorstr='#7518f0', GradientType=0);
    height: inherit;
    width: inherit;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: -5;
    animation: layercorneranim 2.5s ease-in-out infinite alternate;
}

#hey {
    width: 100%;
    background-color: #011;
    position: absolute;
    bottom: 253px;
    right: 0;
    left: 0;
    margin: auto;
    z-index: -10;
    transform: perspective(200px);
}

#layer-up {
    background: rgba(71, 255, 203, 0);
    background: -moz-linear-gradient(top, rgba(71, 255, 203, 0) 0%, rgba(71, 255, 203, 0) 50%, #1DB954 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(71, 255, 203, 0)), color-stop(50%, rgba(71, 255, 203, 0)), color-stop(100%, #1DB954));
    background: -webkit-linear-gradient(top, rgba(71, 255, 203, 0) 0%, rgba(71, 255, 203, 0) 54%, #1DB954 100%);
    background: -o-linear-gradient(top, rgba(71, 255, 203, 0) 0%, rgba(71, 255, 203, 0) 50%, #1DB954 100%);
    background: -ms-linear-gradient(top, rgba(71, 255, 203, 0) 0%, rgba(71, 255, 203, 0) 50%, #1DB954 100%);
    background: linear-gradient(to bottom, rgba(71, 255, 203, 0) 0%, rgba(71, 255, 203, 0) 50%, #1DB954 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#47ffcb', endColorstr='#47ffcb', GradientType=0);
    height: 300px;
    width: inherit;
    opacity: 1;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    overflow: hidden;
    z-index: -5;
    animation: layerupanim 2.5s ease-in-out infinite alternate;
}

#lines {
    background-size: 40px 40px;
    background-image: repeating-linear-gradient(0deg, #1DB954, #1DB954 2px, transparent 1px, transparent 40px), repeating-linear-gradient(-90deg, #1DB954, #1DB954 2px, transparent 2px, transparent 40px);
    height: 400px;
    width: 100%;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -4;
}

#mtn {
    background-color: purple;
    height: 300px;
    width: 1200px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: -8;
    transform: perspective(600px);
}

@keyframes neon1 {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #1DB954, 0 0 70px #1DB954, 0 0 80px #1DB954, 0 0 100px #1DB954, 0 0 150px #1DB954;
    }

    to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #1DB954, 0 0 35px #1DB954, 0 0 40px #1DB954, 0 0 50px #1DB954, 0 0 75px #1DB954;
    }
}

@keyframes layerupanim {
    from {
        height: 140px;
    }

    to {
        height: 155px;
    }
}

@keyframes layercorneranim {
    from {
        height: 400px;
    }

    to {
        height: 540px;
    }
}

.sun {
    width: 200px;
    height: 200px;
    border-radius: 100%;
    position: absolute;
    background-color: yellow;
    left: calc(50%);
    bottom: 25%;
    transform: translateX(-50%);
    background-image: linear-gradient(red, yellow), linear-gradient(black, white);
    clip-path: polygon(-50% 0px, 150% -50%, 150% 55%, -50% 55%,
            -50% 62%, 150% 62%, 150% 70%, 0 70%,
            -50% 75%, 150% 75%, 150% 80%, 0 80%,
            -50% 82%, 150% 82%, 150% 85%, 0 85%,
            -50% 87%, 150% 87%, 150% 90%, 0 90%,
            -50% 92%, 150% 92%, 150% 95%, 0 95%,
            -50% 96%, 150% 96%, 150% 150%, 0 150%);
    box-shadow: rgba(255, 128, 0, 0.7) 0px 0 20px;

}

.mountain {
    position: absolute;
    content: '';
    bottom: 24%;
    left: calc(50% + var(--mountain-offset, 0px));
    border-left: calc(var(--mountain-base) / 2) solid transparent;
    border-bottom: var(--mountain-height, 100px) solid var(--mountain-color1, white);
    border-top: 0px solid transparent;
    border-right: calc(var(--mountain-base, 100px) / 2) solid transparent;
    transform-origin: bottom;
    transform: skewX(var(--mountain-tilt, 0deg));
}

.mountain:after {
    content: '';
    border-left: calc(var(--mountain-base) / 2) solid transparent;
    border-bottom: var(--mountain-height, 100px) solid var(--mountain-color2, black);
    border-top: 0px solid transparent;
    border-right: calc(var(--mountain-base, 100px) / 2) solid transparent;
    transform: translate(-50%) scale(0.98);
    position: absolute;
    left: 0;
    top: 0;
}

.background-80s {
    background: linear-gradient(to bottom, #010310 0, #0c1142 44%, #45125e 65%, #d53567 80%, #f0c3d9 85%, #0c1142 85%) fixed;
    background-size: 100% var(--background-height, 100vh);
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: var(--background-height, 100vh);
    z-index: -30;
}


.animated-clouds:before {
    filter: url(#filter);
}

.background-80s:before {
    content: '';
    background: linear-gradient(to bottom, #010310 0, #0c1142 44%, #45125e 65%, #d53567 80%, #f0c3d9 85%, #0c1142 85%) fixed;
    width: 100%;
    height: 55%;
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    opacity: 0.2;
}

@media only screen and (max-width:720px) {
    .mountain, .sun, #mtnZZZ, #layer-0, .sun_mountain, #hey {
        display:none;
    }
    
    h1 {
        font-size: 50px;
        line-height:40px;
        padding: 0 20px;
    }
}