body>footer {
    align-items: center;
    display: flex;
    flex-direction: column;

    --_col: color-mix(in srgb, color-mix(in srgb, var(--clr-text), var(--clr-base) 50%), black 60%);

    margin-block-start: auto;
    padding-block: var(--space-xl);

    background: color-mix(in srgb, var(--_col), black 60%);
    border-block-start: 2px solid var(--clr-high);
    color: color-mix(in srgb, var(--_col), white 60%);
    font-size: var(--fs-100);
    text-align: center;

    &>*+* {
        margin-block-start: var(--space-s);
    }

    & #nav {
        list-style: none;
        display: flex;
        gap: var(--space-s);
    }

    & #contact {
        list-style: none;
        display: flex;
        gap: var(--space-xs-s);
        align-items: center;
        justify-content: center;

        & a {
            display: flex;
            border-radius: var(--space-3xs);

            & .icon {
                height: 100%;
                aspect-ratio: 1;
                transition: scale var(--animate-t) var(--animate-f);
                font-size: var(--fs-400);
            }

            &:hover,
            &:focus,
            &:focus-visible {
                & .icon {
                    scale: 0.7;
                }
            }
        }
    }
}
