footer {
    color: var(--gray-mid-dark);
    text-align: center;
    padding-bottom: 20px;
    margin-top: 55px;
    border-top: 1px solid var(--white-gray-dark);
    background-color: var(--white);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
body.dark footer {
    color: var(--white);
    border-top: 1px solid var(--gray);
    background-color: var(--gray-deep);
}

footer div {
    padding: 20px 0;
    margin-bottom: 20px;
    border-bottom: 2px solid transparent;
    border-image: repeating-linear-gradient(
        to right,
        var(--white-gray-dark) 0 10px,
        transparent 10px 20px
    );
    border-image-slice: 1;
}
body.dark footer div {
    border-bottom: 2px solid transparent;
    border-image: repeating-linear-gradient(
        to right,
        var(--gray) 0 10px,
        transparent 10px 20px
    );
    border-image-slice: 1;
}

footer a {
    color: var(--green);
    text-decoration: none;
}

footer a:hover {
    color: var(--green-dark);
    text-decoration: underline;
}

footer a:not(:last-child) {
    margin-right: 20px;
}

footer p {
    font-style: italic;
    margin-bottom: 0;
}

@media screen and (max-width: 650px) {
    footer {
        text-align: center;
    }

    footer div a {
        display: inline-block;
        text-align: center;
        width: fit-content;
    }

    footer div a:not(:last-child) {
        margin-bottom: 8px;
    }

    footer div {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}