/*
==============
=== FOOTER ===
==============
*/

footer {
    background-color: var(--neutral-800);
    border-top: 1px solid var(--neutral-700);
    padding: var(--spacing-md);
    margin-top: auto;
    min-height: 265px;
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--neutral-500);
    text-shadow: 0 0 3px var(--neutral-900);

    * {
        text-align: center;
    }

    .content {
        max-width: var(--max-width);
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: stretch;
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-md);
        flex-wrap: wrap;
        align-content: center;
    }

    .brand,
    .links1,
    .links2,
    .legal,
    .social {
        flex: 1 1 170px;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
        justify-content: flex-start;
        align-items: center;
        align-content: center;
        flex-wrap: wrap;
        min-width: 170px;
    }

    a {
        color: var(--neutral-400);
        text-shadow: 0 0 1px black, 0 0 5px black;
        text-decoration: none;
    }

    a:hover {
        color: var(--color-accent);
        text-shadow: 0 0 1px black, 0 0 5px black;
        text-decoration: underline;
        text-underline-position: under;
        text-underline-offset: 3x;
        text-decoration-thickness: 1px;
    }

    .brand {
        div {
            display: flex;
            flex-direction: row;
            gap: var(--spacing-xs);
            align-items: center;

            img {
                width: 90px;
                height: 90px;
                aspect-ratio: 1/1;
                border-radius: 50%;
            }

            span {
                font-family: var(--font-cn) !important;
                font-size: 200%;
            }
        }
    }

    .copyright {
        text-align: center;
        color: var(--neutral-100);
        padding-top: var(--spacing-md);
        border-top: 1px solid rgba(0, 0, 0, 0.5);
        max-width: var(--max-width);
        margin: auto !important;
    }
}