@import url(/css/components/footer.css);

body > footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 1rem;

    color: var(--clr-light);
    background-color: var(--clr-dark);

    text-align: center;

    padding-block: 1.5rem 1rem;
}

body > footer > * {
    margin: 0;
}

body > footer > .copyright {
    font-family: var(--ff-title);
    font-weight: 200;
    font-style: italic;
}

body > footer nav ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;

    max-width: 80vw;
    padding: 0;
    margin-block: 0;
    margin-inline: auto;

    list-style: none;
}

body > footer nav li {
    flex-basis: 5rem;
    text-align: center;

    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    outline: var(--clr-primary) solid 0;

    transition: outline-width 225ms ease-in;
}
body > footer nav li:is(:hover, :focus, :focus-within, :focus-visible) {
    outline-width: 0.25rem;
    transition-timing-function: ease-out;
}

body > footer a {
    outline: none;
    text-decoration: none;
}