@font-face {
    font-family: "Streamster";
    src: url("../fonts/Streamster.ttf")
}
:root {
    --color-red: #fa4b58;
    --color-blue: #4f6dd5;
    --color-yellow: #ffdd63;
    --color-black: #101010;
    --color-white: #ededf3;
    --horizon-top: 60%;
}
* {
    user-select: none;
    -webkit-user-drag: none;
}
html, body {
    width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;
}
main-container {
    position: relative;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    background-image: radial-gradient(var(--color-black) 50%, var(--color-red) 100%);
    display: flex;
    justify-content: center;
}
#epic-background {
    opacity: 0.25;
}
#powerful-thunder {
    position: absolute;
}
awesome-title {
    color: var(--color-white);
    text-align: center;
    font-family: "Streamster";
    font-size: clamp(3rem, 10vw, 8rem);
    text-shadow:
        0 0 8px var(--color-white),
        0 0 24px var(--color-white),
        0 0 32px var(--color-red),
        0 0 40px var(--color-red);
    position: absolute;
    top: var(--horizon-top);
    transform: rotate(-6deg);
    z-index: 100;
}
awesome-title span:nth-child(1) {
    animation: neon-glitching 1.9s infinite alternate;
}
awesome-title span:nth-child(2) {
    animation: neon-glitching 1.5s infinite alternate-reverse;
}
awesome-title::before {
    display: block;
    content: "{";
    position: absolute;
    transform: rotate(3deg);
    width: 100%;
    padding-block-start: 1rem;
}
@keyframes neon-glitching {
    0%, 18%, 22%, 26%, 58%, 62%, 100%{
        text-shadow:
        0 0 8px var(--color-white),
        0 0 24px var(--color-white),
        0 0 32px var(--color-red),
        0 0 40px var(--color-red);
    }
    20%, 24%, 60%{        
        text-shadow: none;
    }    
}
awesome-logo {
    position: absolute;
    top: 2rem;
    width: clamp(300px, 80%, 768px);
    height: fit-content;
    transition: transform 500ms ease-out;
    animation: logo-anim 6s infinite alternate-reverse ease-in-out;
}
awesome-logo img {
    position: relative;
    display: block;
    margin: 0 auto;
    width: clamp(300px, 80%, 768px);
    height: auto;
    z-index: 1;
}
awesome-logo fantastic-triangle {
    display: block;
    margin: 0 auto;
    position: absolute;
    top: 1.5em;
    width: 100%;
    height: 100%;
}
awesome-logo fantastic-triangle svg {
    width: 100%;
    height: 100%;
    stroke: var(--color-red);
    z-index: 0;
    filter: drop-shadow(0px 0px 5px var(--color-red));
    animation: glowing-anim 0.8s infinite alternate-reverse linear;
}
@keyframes glowing-anim {
    100%{
        filter: drop-shadow(0px 0px 15px var(--color-red));
    }
}
@keyframes logo-anim {
    100%{
      transform: scale(.95) translateY(2.25vh);
    }
}
epic-grid {
    margin: auto;
    width: 180%;
    height: 100%;
    background: var(--color-black);
    display: grid;
    grid-template: repeat(16,1fr) / repeat(40,1fr);
    position: absolute;
    top: calc(75% - var(--horizon-top));
    transform: perspective(60vh) rotateX(75deg) translateY(-6.25vh);
    animation: grid-anim 1s infinite linear;
}
@keyframes grid-anim {
    100%{
      transform: perspective(60vh) rotateX(75deg) translateY(6.25vh);
    }
}
epic-grid div {
    width: 100%;
    height: 100%;
    border: 1px solid var(--color-blue);
    filter: blur(1px);
}
wonderful-skyline {
    position: absolute;
    top: calc(var(--horizon-top) - .5rem);
    transform: translateY(-100%);
    width: 100%;
    height: auto;
    z-index: 1;
}
wonderful-skyline::after {
    content: "";
    width: 100vw;
    height: 3px;
    background: var(--color-blue);
    box-shadow:
        0 0 8px var(--color-blue),
        0 0 16px var(--color-blue),
        0 0 24px var(--color-red),
        0 0 32px var(--color-red);
    position: absolute;
    bottom: 3px;
    left: 0;
    filter: blur(1px);
    z-index: 2;
}

/* epic-mountain {
    width: 100%;
    position: absolute;
    top: calc(var(--horizon-top) - 2%);
}
epic-mountain::after {
    content: "";
    width: 100vw;
    height: 4px;
    background: var(--color-blue);
    box-shadow:
        0 0 8px var(--color-blue),
        0 0 16px var(--color-blue),
        0 0 24px var(--color-red),
        0 0 32px var(--color-red);
    position: absolute;
    bottom: 0;
    filter: blur(1px);
    z-index: 20;
}
epic-mountain div {
    background: linear-gradient(
        var(--color-red) 40%,
        var(--color-blue) 100%
    );
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    position: absolute;
    z-index: 10;
}
epic-mountain div:nth-child(1) {
    width: 24vw;
    height: 14vw;
    max-height: 16vh;
    inset: auto auto 45% -5%;
}
epic-mountain div:nth-child(2) {
    width: 30vw;
    height: 22vw;
    max-height: 22vh;
    inset: auto auto 45% 5%;
}
epic-mountain div:nth-child(3) {
    width: 30vw;
    height: 10vw;
    max-height: 10vh;
    inset: auto auto 45% 15%;
}
epic-mountain div:nth-child(4) {
    width: 24vw;
    height: 6vw;
    max-height: 6vh;
    inset: auto auto 45% 30%;
}
epic-mountain div:nth-child(5) {
    width: 24vw;
    height: 8vw;
    max-height: 8vh;
    inset: auto 30% 45% auto;
}
epic-mountain div:nth-child(6) {
    width: 30vw;
    height: 10vw;
    max-height: 10vh;
    inset: auto 15% 45% auto;
    z-index: 9;
}
epic-mountain div:nth-child(7) {
    width: 24vw;
    height: 12vw;
    max-height: 12vh;
    inset: auto 5% 45% auto;
    z-index: 8;
}
epic-mountain div:nth-child(8){
    width: 30vw;
    height: 18vw;
    max-height: 18vh;
    inset: auto -5% 45% auto;
    z-index: 7;
} */