:root {
    --link-color: rgb(170, 214, 211);
    --link-color-hover: rgb(131, 195, 191);
}

.link {
    color: var(--link-color);
    text-decoration: none;
}

.link:hover {
    text-decoration: underline;
    color: var(--link-color-hover);
}

.link-reversed {
    color: #fafae7;
    text-decoration: none;
    text-shadow:
        1px  1px 0 rgba(0, 0, 0, 0.3),
        -1px  1px 0 rgba(0, 0, 0, 0.3),
        1px -1px 0 rgba(0, 0, 0, 0.3),
        -1px -1px 0 rgba(0, 0, 0, 0.3);
}
.link-reversed:hover {
    text-decoration: underline;
    color: #f3ecdb;
}

[data-tooltip]:hover::after {
    display: block;
    position: absolute;
    content: attr(data-tooltip);
    border: 1px solid black;
    background: #eee;
    padding: .25em;
}