:root {
    color-scheme: light dark;
}

body {
    --sans: "Gill Sans", sans-serif;
    --serif: "Optima", serif;
    --fixed: "Monaco", fixed;
    --font-size: 16px;
    --fg: CanvasText;
    color: var(--fg);
    font-family: var(--serif);
    font-size: var(--font-size);
    /* iPad viewport width is 810px */
    max-width: 864px;
    margin: 1rem;
}

/* because safari's default dark mode colours are terrible */
@media (prefers-color-scheme: dark) {
    body {
	--fg: #cccccc;
	background: black;
    }
    a:link {
	color: skyblue;
    }
    a:visited {
	color: plum;
    }
    h1 > img {
	opacity: 75%;
    }
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--sans);
    font-weight: normal;
    & > a:link {
	color: var(--fg);
	text-decoration: none;
    }
    & > a:visited {
	color: var(--fg);
	text-decoration: none;
    }
}

tt, code {
    /* relative to parent, for fixed width in headings */
    /* monaco is a bit larger than optima and gill sans */
    font-size: 0.9em;
}

blockquote {
    font-style: italic;
}

input, button {
    padding: 0.25em;
    font-size: 1.25em;
    font-family: var(--sans);
    font-weight: lighter;
    color: inherit;
    background: inherit;
    border-radius: 0;
    border-style: solid;
}

p, pre {
    margin-left: 1rem;
    margin-right: 1rem;

}

math {
    margin-left: 2rem;
}

div, h1, hr, address {
    margin: 1rem 0rem;
}

article svg,
article img,
main img {
  border: 1px solid var(--fg);
  width: 100%;
}

/* make link log landing page links less visually prominent */
a.date {
    color: var(--fg);
    text-decoration: none;
}

/* bi = bootstrap icons, used in the header and the social page */
svg.bi {
    width: 1.33em;
    height: 1.33em;
    margin: 0em 0.2em;
    vertical-align: -25%;
}

/* for unicode icons on the social page */
big {
    margin: 0em 0.2em;
}

header > h1 {
    font-size: 2.5rem;
}

header > h1 > img {
    vertical-align: middle;
    padding-right: 0.5rem;
}

header > ul {
    font-family: var(--sans);
    list-style: none;
    margin: 1rem 0rem;
    padding: 0rem;
}

header > ul > li {
    display: inline;
    break-inside: avoid;
    /* 0.5rem on the left roughly matches the dotat logo;
       1rem between items */
    margin-inline: 0.5rem;
}

header > ul > li > a {
    color: var(--fg);
    text-decoration: none;
}

nav.blognav > h1 {
    /* to match 0.5rem in previous clause */
    margin: 1rem 0.5rem;
}

nav.blognav > ul {
    font-size: 0.75em;
    list-style: none;
    margin: 1rem 0rem;
    padding: 0rem;
    display: flex;
    width: 100%;
}

nav.blognav > ul > li.blognav-spacer {
    flex-grow: 1;
    padding: 0rem;
    height: 0rem;
    border-bottom: 0.1rem dashed;

    /* the 0.75em here is a bullshit guess but it seems
       to put the dashed line in about the right place */
    margin: 0.75em 1rem 0rem 1rem;
}

nav.blognav > ul > li.blognav-link {
    flex-grow: 0;
    padding: 0rem;
}

nav.blognav > span.blognav-left {
    margin-bottom: 1rem;
    float: left;
}
nav.blognav > span.blognav-right {
    margin-bottom: 1rem;
    float: right;
}
nav.blognav + hr {
    clear: both;
}

nav.blognav a {
    font-family: var(--sans);
    color: var(--fg);
    text-decoration: none;
}

/*
:; perl -nE 'say for m{hilite([ a-z]*)}g' target/site/@/*.html | sort -u
*/

/*
 * Sigh, tree-sitter-rust likes to classify (some) punctuation, but
 * not variables; and tree-sitter-c likes to classify variables but
 * not punctuation. So we'll just leave those uncoloured.
 */

@media (prefers-color-scheme: dark) {
    code span.hilite.comment {
	color: #cb9;
    }
    code span.hilite.variable.builtin,
    code span.hilite.keyword,
    code span.hilite.tag {
	color: #9cc;
    }
    code span.hilite.constant,
    code span.hilite.number,
    code span.hilite.string {
	color: #99c;
    }
    code span.hilite.constructor,
    code span.hilite.type {
	color: #aca;
    }
    code span.hilite.function,
    code span.hilite.property {
	color: #cc9;
    }
    code span.hilite.macro {
	color: #cac;
    }
}

@media (prefers-color-scheme: light) {
    code span.hilite.comment {
	color: #840;
    }
    code span.hilite.variable.builtin,
    code span.hilite.keyword,
    code span.hilite.tag {
	color: #088;
    }
    code span.hilite.constant,
    code span.hilite.number,
    code span.hilite.string {
	color: #00a;
    }
    code span.hilite.constructor,
    code span.hilite.type {
	color: #080;
    }
    code span.hilite.function,
    code span.hilite.property {
	color: #660;
    }
    code span.hilite.macro {
	color: #606;
    }
}