/* links should use a pointer cursor and the standard color */
a {
    color: var(--dark);
    cursor: pointer;
}
a:hover {
    color: var(--medium);
}

/* links are sometimes styled to look like buttons */
a.button {
    background: var(--dark);
    border: 1px solid var(--dark);
    border-radius: 4px;
    color: #fff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.5em;
    padding: 6px 12px;
    text-decoration: none;
}
a.button:hover {
    background: var(--medium);
}

/* linked images should always have a tiny bit of padding around them, and a colored border */
a.image {
    border: solid 1px var(--dark);
    display: inline-block;
    padding: 3px;
}
a.image:hover {
    border-color: var(--medium);
}