/* header */
        div#header {
            background:     var(--lgray2);
            height:         50px;
            width:          100%;
        }

        img#header-logo {
            height:         40px;
            margin-top:     5px;
            margin-bottom:  5px;
            margin-left:    5px;
        }


.main {
    padding-top: 20px;
}

.content-diagram {
    max-width: 100%;
    margin:    0 auto;
    padding:   0 auto;
}


/* Pandoc makes some wacky choices with how it lays out code blocks
 *
 * this means all <code> blocks that do not have a <pre> block as an ancestor
 *
 * ie the `inline code`
 */
code:not(pre *) {
    border-radius:  6px;
    border:         1px solid var(--lgray1);
    padding-left:   3px;
    padding-right:  3px;
    padding-top:    1px;
    padding-bottom: 1px;
    background:     var(--lgreen1);
}

/* this is specifically for ```fenced blocks``` */
pre {
    border-radius:  6px;
    border:         1px solid var(--lgray1);
    padding:        5px;
    background:     var(--lgreen1);
    overflow:       scroll;
}

/* All `unfenced` or ```fenced``` blocks */
code {
    font-family:    Liberation Mono, Roboto Mono, monospace;
    color:          var(--dgreen1);
}