main {
    padding-bottom: 4rem;
}


.article-header {
    margin: 2.5rem 0 4rem;
}


.article-header h1 {
    font-size: clamp(2.75rem, 8vw, 5rem);
    margin-bottom: -1.5rem;
}


.post-topic {
    margin-bottom: 2.5rem;
}


.article-sub {
    max-width: 90%;
    font-size: 1.25rem;
    font-family: var(--font);
    color: var(--muted);
}


article {
    padding-bottom: 2.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--separator);
}


figcaption {
    font-size: .875rem;
    color: var(--muted);
    text-align: right;
    padding-top: .5rem;
    font-family: var(--font);
}


figure {
    margin: 2rem 0;
}


img {
    display: block;
    width: 100%;
    height: auto;
    padding: 5px;
    border: 1px solid var(--separator);
}


.article-body {
    margin: 3rem 0 0;
    line-height: 1.75;
}


.note {
    font-size: 1.175rem;
    color: var(--muted);
    padding: .5rem 0 .6rem 1rem;
    font-family: var(--font);
    border-left: 3px solid var(--separator);
    margin: 0;
}


.article-body h2 {
    font-size: 2rem;
    margin: 3rem 0 -0.5rem;
}


.article-body h3 {
    font-size: 1.5rem;
    margin: 1.5rem 0 -1rem;
}


code {
    font-family: ui-monospace, monospace;
    font-size: .875em;
    background: var(--code);
    border: 1px solid var(--accent);
    border-radius: 4px;
    padding: .15em .35em;
}


.code-block {
    background: var(--code-block);
    border: 1px solid var(--accent);
    line-height: 1.5;
    margin: 0 auto;
    max-width: 100%;
}


.code-block figcaption {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--accent);
    text-align: center;
}


.code-block pre {
    margin: 0;
    padding: 1rem;
    overflow-x: auto;
    tab-size: 2;
}


.code-block code {
    background: var(--code-block);
    border: none;
    border-radius: 0;
}


.article-body ul, .article-body ol {
    padding-left: 2rem;
}


.article-body hr {
    border: 0;
    border-top: 1px solid var(--separator);
    margin: 3rem 0;
}

.article-body iframe {
    width: 100%;
}


main nav {
    font-family: var(--font);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}