:root {
    color-scheme: light dark;
}

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

h1, h2, h3, h4, h5, h6 {
    font-family: var(--sans);
    font-weight: normal;
}

h1 > a {
    font-family: var(--sans);
    color: CanvasText;
    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;
}

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;
}

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

/* used in the header and the social page */
svg {
    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;
}

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

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

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

div#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;
}

div#header > ul > li > a {
    color: CanvasText;
    text-decoration: none;
}

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

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

div.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;
}

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

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

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