:root {
    --base: #2C313C;
    --text: #9FB2BF;
    --green: #a6d189;
    --peach: #ef9f76;
    --mauve: #ca9ee6;
    --sky: #99d1db;
}

body {
    margin: 0;
    padding: 1rem;
    background: var(--base);
    color: var(--text);
    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 16px;
    line-height: 1.6;
}

main {
    max-width: 46rem;
    margin: 0 auto;
}

.site-title,
header pre {
    margin: 0 0 0.5rem;
    color: var(--text);
    white-space: pre;
    line-height: 1;
    letter-spacing: 0;
    font-variant-ligatures: none;
    font-family: inherit;
}

.site-title {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

nav {
    margin-bottom: 3.1rem;
}

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

a:hover {
    color: var(--sky);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--green);
}

em {
    color: var(--peach);
}

strong {
    color: var(--mauve);
}

main > p {
    margin: 0 0 0.5em;
}

article h1 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: normal;
}

article time {
    display: block;
    margin-bottom: 1.25rem;
}

article h2,
article h3,
article h4 {
    margin: 1.25rem 0 0.5rem;
    font-size: 1rem;
}

article p,
article ul,
article ol,
article pre,
article blockquote {
    margin: 0 0 0.75rem;
}

article ul,
article ol {
    padding-left: 1.5rem;
}

article pre,
article code {
    font-family: inherit;
}

article pre {
    overflow-x: auto;
}

article blockquote {
    padding-left: 0.75rem;
    border-left: 1px solid var(--text);
}

article blockquote p {
    margin-bottom: 0;
}

img {
    max-width: 100%;
    height: auto;
}