/* -*- mode: css -*- */
:root {
    --fg: #003500;
    --bg: #fafffa;
    --brand: #f50;
    --vspacing: 1.8em;
}

body {
    font-family: sans-serif;
    font-size: 13pt;
    color: var(--fg);
    background: var(--bg);
    margin: 0;
}

a {
    color: var(--brand);
}

main {
    margin-left: 0.8em;
    margin-right: 0.8em;
}

main h2,
main h3,
main h4,
main h5,
main h6 {
    font: serif;
    margin-top: calc(var(--vspacing ) * 2);
}

main h1 {
    margin-top: 0;
}

main p,
main li,
main pre,
main blockquote {
    line-height: var(--vspacing);
}

main p,
main ul,
main ol,
main img,
main pre,
main blockquote {
    margin-bottom: calc(var(--vspacing) * 1.5);
}

main li {
    margin-bottom: calc(var(--vspacing) / 2);
}

main img {
    display: block;
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
    border: 0.05em solid var(--fg);
}

main ul ul,
main ol ol,
main ul ol,
main ol ul {
    margin-top: calc(var(--vspacing) / 3);
    margin-bottom: calc(var(--vspacing) / 3);
}

blockquote {
    border: 0.05em solid var(--fg);
    border-radius: 0.05em;
    margin-left: 0.5em;
    margin-right: 0.5em;
    padding-bottom: 0.5em;
    border-radius: 1.0rem;
}

blockquote h3 {
    text-align: center;
    margin-top: 0;
    background: var(--fg);
    color: var(--bg);
    margin-left: 0;
    margin-right: 0;
    border-radius: 0.8rem 0.8rem 0 0;
}

blockquote p, blockquote pre {
    margin-left: 0.8em;
    margin-right: 0.8em;
}

blockquote p:last-child, blockquote pre:last-child {
    margin-bottom: 0.5em;
}

code {
    font-family: 'Fira Code', monospace;
}

pre code.hljs {
    display: block;
    border: 0.05em solid var(--fg);
    line-height: var(--vspacing);
}

code.hljs {
    display: inline;
    font-size: 80%;
    border: 0.05em solid var(--fg);
}

#site-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    font-family: sans-serif;
    font-weight: bold;
    border-bottom: 0.2em solid var(--fg);
    margin-top: calc(var(--vspacing) / 3);
    margin-bottom: calc(var(--vspacing) * 2);
    padding-right: 0;
    padding-left: 0;
}

#site-header a {
    text-decoration: none;
    text-shadow: 0.1em 0.1em 0.05em var(--fg);
}

#site-name {
    display: inline-block;
    padding-left: 0.5em;
}

#site-name img {
  height: 2.5em;
  width: auto;
}

.site-menu-item {
    font-size: 120%;
    list-style: none;
    display: inline-block;
    margin-right: 2em;
}

.post-list {
    list-style: none;
    padding-left: 0;
}

.post-list-item {
    border-bottom: 0.1em solid var(--fg);
}

.post-meta {
    font-style: italic;
}

.meta-tags .tag-name {
    margin-left: 0.4em;
    font-style: normal;
    font-weight: bold;
}

.meta-tags .tag-name a {
    font-size: 90%;
    text-decoration: none;
    border-radius: 1.0em;
    border: 0.1em solid var(--fg);
    padding: 0.2em 0.5em;
}

#site-footer {
    text-align: center;
    padding-top: calc(var(--vspacing));
    padding-bottom: calc(var(--vspacing));
    border-top: 0.2em solid var(--fg);
}