body {
    --sans: "Gill Sans", sans-serif;
    --serif: "Optima", serif;
    --fixed: "Monaco", fixed;
    font-family: var(--serif);
    font-size: 16px;
    /* 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;
}

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

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

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;
    /* 0.5rem on the left roughly matches the dotat logo;
       1rem between items */
    margin-inline: 0.5rem;
}

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