:root {
    --article-child-margin-vertical: 2em;
    --article-child-margin-right: 2em;
    --article-child-margin-left: 2em;
}

@media (max-width: 700px) {
    :root {
        --article-child-margin-right: 0em;
        --article-child-margin-left: 0em;
        --page-header-size: 3.5em;
    }
}

article {
    border-width: 4px;
    padding: 2em;
}

article p {
    margin-top: 0;
}

article > * + * {
    margin-bottom: var(--article-child-margin-vertical);
}

article h3 {
    font-family: 'Inter', sans-serif;
    font-weight: bold;
    font-size: 2rem;
    margin: 0;
    display: inline-block;
    border-bottom: 12px solid var(--font-color);
}

article > *:not(:first-child) {
    margin-left: var(--article-child-margin-left);
    margin-right: var(--article-child-margin-right);
}
article > h3 + * {
    margin-top: var(--article-child-margin-vertical);
}

article iframe, article img {
    border: none;
    border-radius: 5px;
    box-shadow: 0 0 5px gray;
    width: calc(100% - var(--article-child-margin-left) - var(--article-child-margin-right));
}