:root {
    --text-base:    #0b0c0c;
    --text-link:    #1a65a6;
    --text-visited: #54319f;
    --text-hover:   #0f385c;
    --text-active:  #0b0c0c;
    --text-focus:   #0b0c0c;

    --bg-sheet:  #f4f8fb;
    --bg-focus:  #ffdd00;
    --bg-border: #cccccc;

    --line-height: 2

    font-size: clamp(0.9rem, 0.6rem + 0.5svw, 1.5rem);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: sans-serif;
    font-size: 1rem;
    background-color: var(--bg-sheet);
    color: var(--text-base);
    line-height: var(--line-height);
    max-width: 600px;
    margin: 1rem auto;
}

.stack > * + * {
    margin-top: 0.75em;
}

body > footer {
    padding: 1rem 0;
    border-top: 1px solid var(--text-focus);
}

blockquote {
    border-left: 2px solid var(--bg-border);
    padding: 0.5rem 1rem;
}

a {
    padding: 0 1em;
    font-weight: bold;
    text-decoration-offset: 0.1em;
    text-decoration-thickness: 1px;
}

a:link {
    color: var(--text-link);
}
a:visited {
    color: var(--text-visited);
}
a:hover {
    color: var(--text-hover);
    text-decoration-thickness: 3px;
}
a:active {
    color: var(--text-active);
}
a:focus {
    outline: 3px solid transparent;
    color: var(--text-focus);
    background-color: var(--bg-focus);
    box-shadow: 0 -2px var(--bg-focus), 0 4px var(--text-focus);
    text-decoration: none;
}