link.css

/**
 * Link styles. See
 * Styling links - Learn web development | MDN
 * <https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_links>
 */

:root {
    --main-link-color: deeppink;
    --main-link-bg-color: pink;
}

a {
    outline: none;
    text-decoration: none;
    padding: 2px 1px 0;
}

a:link {
    color: var(--main-link-color);
}

a:visited {
    filter: brightness(2%);
}

a:focus {
    background-color: var(--main-link-bg-color);
    border-bottom: 1px solid;
}

a:hover {
    background-color: var(--main-link-bg-color);
    border-bottom: 1px solid;
}

a:active {
    background: var(--main-link-color);
    color: white;
}

header a:hover,
header a:focus,
footer a:hover,
footer a:focus {
    background: initial;
    border: initial;
}