.landing {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    h2 {
        margin-top: clamp(60px, 5vw, 100px);
        font-weight: 800;
        font-size: clamp(10px, 10vw, 65px);
        text-align: center;
        white-space: nowrap;

        .accent {
            background: linear-gradient(to right, #0059ff, #FF0083);
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        br.mobile {
            display: none;
        }

        @media screen and (width < 1045px) {
            text-align: left;

            br.mobile {
                display: unset;
            }
        }
    }

    pre {
        margin-top: clamp(90px, 15vw, 150px);
        width: clamp(250px, 90vw, 800px);
        height: fit-content;
        padding: 20px;
        font-family: var(--secondary-font-family);
        background-color: rgba(0, 0, 0, 0.8);
        border-radius: 5px;
        position: relative;
        white-space: pre-wrap;

        code {
            font-family: inherit;

            .comment {
                color: green;
            }

            .key {
                color: lightblue;
            }

            .string {
                color: orange;
            }

            .table {
                color: gold;
            }

            .bool {
                color: dodgerblue;
            }

            .number {
                color: greenyellow;
            }

            a {
                color: deepskyblue;
            }
        }
    }

    pre::before,
    pre::after {
        position: absolute;
        content: "";
        inset: -2px;
        z-index: -1;
        border-radius: inherit;
        background: conic-gradient(from var(--gradient-angle), #FF0083, #0059ff, #FF0083);
        animation: rotate-gradient 20s linear infinite;
    }

    pre::after {
        filter: blur(100px);
    }
}

@media screen and (width < 1045px) {

    .landing pre::before,
    pre::after {
        animation-play-state: paused !important;
    }
}

@property --gradient-angle {
    syntax: "<angle>";
    initial-value: 70deg;
    inherits: false;
}

@keyframes rotate-gradient {
    0% {
        --gradient-angle: 70deg;
    }

    100% {
        --gradient-angle: 430deg;
    }
}