:root {
    --footer-bg: var(--primary);
    --footer-text-color: var(--color-on-primary);
    --footer-text-color-hover: var(--color-light-on-primary);

    --shadow-footer: 0 -8px 14px 0 rgba(0, 0, 0, .04)
}

.footer {
    background-color: var(--footer-bg);
    color: var(--footer-text-color);
    padding: 1em;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: row;
    width: 100%;
    height: var(--footer-height);
    box-shadow: var(--shadow-footer);
    border-top: var(--smooth-border);;
}

/** A global container */
.footer div:first-child {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer .menu {
    width: 90%;
    list-style-type: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;

}

.footer .menu a {
    text-decoration: underline;
    font-size: var(--footer-text-size);
    color: var(--footer-text-color);
}
.footer .menu a:hover {
    color: var(--footer-text-color-hover);
    text-decoration-color: var(--footer-text-color-hover);
}