/*
    The privacy policy and the licence.

    Was css/docs_privacy.css, which also carried the documentation page; that page now has
    css/docs.css of its own, so the rules for its buttons and its video have gone with it.

    Colours come from one set of custom properties, redeclared under prefers-color-scheme.
    Before this the dark block set a whitesmoke background -- a light colour -- and never
    set a text colour at all, so 'dark mode' was the light page with a slightly grey ground.
*/

:root {
    --ground: #ffffff;
    --ink: #16211d;
    --ink-soft: #5c6b65;
    --rule: #dfe5e2;
    --accent: #0f8867;
    --link: #0a654d;
    --band: #000000;
}
@media (prefers-color-scheme: dark) {
    :root {
        --ground: #14181a;
        --ink: #e4ece8;
        --ink-soft: #9aa8a2;
        --rule: #2a3336;
        --accent: #22b98d;
        --link: #22b98d;
        --band: #000000;
    }
}

body {
    margin: auto;
    background-color: var(--ground);
    color: var(--ink);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
::selection {
    background-color: var(--accent);
    color: var(--ground);
}
html {
    scrollbar-color: var(--accent) transparent;
}

header {
    background-color: var(--band);
    text-align: left;
}
header #logo {
    padding-left: 10px;
    opacity: 100%;
}
header #logo:hover {
    opacity: 80%;
}
header a {
    text-decoration: none;
    cursor: default;
}
#logo {
    /* The wordmark drawn for a dark ground, which is what the black band is in both
       colour schemes, so this one picture works for either */
    width: 11%;
    min-width: 170px;
    height: auto;
    display: block;
}

p {
    text-align: center;
    margin: 2% 7%;
    line-height: 1.6;
}
h1, h2, h3, h4 {
    text-align: center;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: lighter;
}
a {
    color: var(--link);
}
sup a {
    text-decoration: none;
}

#refLinks {
    text-align: left;
    color: var(--ink-soft);
    font-size: 15px;
    border-top: 1px solid var(--rule);
    padding-top: 14px;
    /* The two references are bare URLs with nothing a line can be broken at, so on a
       phone they used to push the whole page 66px wider than the screen */
    overflow-wrap: anywhere;
}

/* Asks how wide the window is, not how wide the screen is. 'max-device-width' is out of
   the spec and reads the physical display, so a narrow window on a desktop never got
   these rules and a phone got them even in a small window */
@media only screen and (max-width: 550px) {
    #logo {
        width: 45%;
        min-width: 0;
    }
    p {
        margin: 4% 6%;
    }
}