body {
    font-family: "more_perfect_dos";
    font-size: 1rem;
    background-color: var(--dos-black);
    color: var(--dos-bright-white);

    text-shadow: 0 0 1px;

    padding: 0;
    margin: 0;

    font-weight: bold;
}

#main {
     height: 100vh;
    min-width: 640px;
    max-width: 1024px;
    margin: 0 auto;
    padding: 0;
}

.lander-container {
    display: grid;
    margin: 0 auto;
    place-items: center;
    height: 100%;

    .logo {
        width: fit-content;
        margin: auto;
        padding: 0;
        object-position: center;

        & img {
            margin: auto;

            background-color: var(--dos-blue);
            width: clamp(768px, 50vw, 1024px);

            image-rendering: pixelated;
        }

        .lower {
            display: flex;
            flex-direction: row;
            flex: 1 1 0;
            gap: 1rem;
            align-items: flex-end;

            .gradient {
                width: 24ch;
                height: 3rem;
                flex-shrink: 0;
                background: linear-gradient(
                    to right,
                    var(--dos-blue) 0% 6.25%,
                    var(--dos-green) 6.25% 12.5%,
                    var(--dos-cyan) 12.5% 18.75%,
                    var(--dos-red) 18.75% 25%,
                    var(--dos-magenta) 25% 31.25%,
                    var(--dos-brown) 31.25% 37.5%,
                    var(--dos-white) 37.5% 43.75%,
                    var(--dos-dark-grey) 43.75% 50%,
                    var(--dos-bright-blue) 50% 56.25%,
                    var(--dos-bright-green) 56.25% 62.5%,
                    var(--dos-bright-cyan) 62.5% 68.75%,
                    var(--dos-bright-red) 68.75% 75%,
                    var(--dos-bright-magenta) 75% 81.25%,
                    var(--dos-bright-yellow) 81.25% 87.5%,
                    var(--dos-bright-white) 87.5% 93.75%,
                    var(--dos-black) 93.75% 100%
                );
            }

            .text {
                flex: 1;
                display: flex;
                flex-direction: column;
                text-align: right;
                font-size: 1.25rem;
                line-height: 1;
                font-weight: bold;
            }
        }
    }

    #interface {
        .messages {
            text-align: left;
            display: block;
            margin: 2rem 0;
            font-size: larger;
            font-weight: 400;
            & ul {
                margin: 0;
                padding: 0;
                & li {
                    list-style-type: none;
                    margin: 0.5rem 0;
                }
            }

            & p {
                line-height: 1.25;
            }
            
            & a {
                text-decoration: none;
                color: var(--dos-bright-white);

                display: block;
                width: fit-content;
                flex-grow: 1;

                &:hover {
                    color: var(--dos-white);
                    text-decoration: 2px underline dotted;
                    text-underline-offset: 4px;
                }

                &:first-of-type {
                    margin-left: 0;
                    text-align: left;
                }

                &:last-of-type {
                    margin-right: 0;
                    text-align: right;
                }
            }
        }
    }
}

.text-uppercase {
    text-transform: uppercase;
}

.no-select {
    user-select: none;
}

@media (max-width: 640px) {
    :root {
        /* 0-7: Low Intensity (Deep, Smoldering Red) */
        --dos-black: hsl(10, 100%, 3%);
        --dos-blue: hsl(12, 100%, 10%);
        --dos-green: hsl(14, 100%, 15%);
        --dos-cyan: hsl(16, 100%, 20%);
        --dos-red: hsl(18, 100%, 25%);
        --dos-magenta: hsl(20, 100%, 30%);
        --dos-brown: hsl(22, 100%, 35%);
        --dos-white: hsl(24, 100%, 45%);
        --dos-dark-grey: hsl(20, 100%, 22%);
        --dos-bright-blue: hsl(26, 100%, 50%);
        --dos-bright-green: hsl(28, 100%, 55%);
        --dos-bright-cyan: hsl(30, 100%, 60%);
        --dos-bright-red: hsl(35, 100%, 65%);
        --dos-bright-magenta: hsl(40, 100%, 70%);
        --dos-bright-yellow: hsl(44, 100%, 75%);
        --dos-bright-white: hsl(48, 100%, 50%);
    }

    body {
        background-color: var(--dos-black);
        color: var(--dos-white);
    }

    .lander-container {
        min-width: 100vw;
        padding: 20px;
        grid-template-rows: auto 1fr; /* Stack elements vertically */

        .logo {
            & img {
                width: 90vw;
                filter: grayscale(101) brightness(0.5) sepia(31) hue-rotate(6deg) saturate(187);
                background-color: transparent;
            }
        }

        .buttons {
            flex-direction: column;
            gap: 1.5rem;
            width: 100%;
            text-align: center !important;
        }
    }
}