@import url("pygment.css");
@import url("typogrify.css");

:root {
  --brand-color: #e81c4f;
}

body {
    margin: 1em auto;
    max-width: 650px;
    line-height: 1.5;
    font-size: 16px;
    font-family: "Helvetica", "Arial", sans-serif;
    padding: 0 10px;
    -webkit-hyphens: auto;
    hyphens: auto;
}

footer {
    font-size: 0.8em;
    margin-top: 2em;
}

time {
    font-style: italic;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Helvetica", "Arial", sans-serif;
}

hr {
    margin-top: 2em;
    margin-bottom: 2em;
}

#banner h1 {
    margin-top: 0;
    margin-bottom: 0;
}

.entry-title {
    margin-bottom: 0;
}

.literal {
    background: #eee;
    padding: 1px;
}

a {
    color: var(--brand-color);
    text-decoration: none;
}

a .literal {
    background: inherit;
    padding: inherit;
}

pre {
    padding: 1em;
    background: #eee;
    font-size: 14px;
    overflow: scroll;
    line-height: 1.2;
}


.entry-content img {
    display: block;
    margin: 0 auto;
    max-height: 30em;
    max-width: 80%;
}

.admonition {
    border-left: 4px solid var(--brand-color);
    padding-left: 1em;
}

.admonition-title {
    font-family: "Helvetica", "Arial", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
}

#banner a {
    color: black;
    text-decoration: none;
}

#menu ul {
    margin-top: 0px;
}

nav ul {
    padding-left: 1em;
}

nav li {
    display: inline-block;
}

nav li:before {
    content: " | ";
}
nav li:first-child:before {
    content: "";
}

.footnote:first-of-type {
    margin-top: 2em;
}