body {
    max-width: 40em;
    margin: 2em auto;
    padding: 0 .5em;
    line-height: 1.6;
    font-family: sans-serif;
    font-size: 1.2em;
    background-color: #222;
    color: #eee;
}

h1, h2, h3 {
    line-height: 1.2;
    margin-left: -1em;
}

h1:hover, h2:hover, h3:hover {  }

h1 > .header-link, h2 > .header-link, h3 > .header-link {
    width: 1em;
    height: 1em;
    line-height: 1;
    display: inline-block;
    vertical-align: top;
    background: center center no-repeat;
    background-size: .75em;
}
h1:hover > .header-link, h2:hover > .header-link, h3:hover > .header-link, .header-link:focus {
    background-image: url("assets/link_light_24dp.svg");
}

a { color: #e8e; }

footer {
    text-align: center;
}

nav.horizontal {
    margin: unset;
    display: flex;
    justify-content: space-evenly;
}

@media (prefers-contrast: more) {
    body {
        background-color: #000;
        color: #fff;
    }
    h1:hover > .header-link, h2:hover > .header-link, h3:hover > .header-link, .header-link:focus {
        background-image: url("assets/link_white_24dp.svg");
    }
    a { color: #0ff; }
}

@media (prefers-color-scheme: light) {
    body {
        background-color: #eee;
        color: #222;
    }
    h1:hover > .header-link, h2:hover > .header-link, h3:hover > .header-link, .header-link:focus {
        background-image: url("assets/link_dark_24dp.svg");
    }
    a { color: #808; }

    @media (prefers-contrast: more) {
        body {
            background-color: #fff;
            color: #000;
        }
        h1:hover > .header-link, h2:hover > .header-link, h3:hover > .header-link, .header-link:focus {
            background-image: url("assets/link_black_24dp.svg");
        }
        a { color: #00f; }
    }
}

@media print {  body { max-width: none; }  }