.article {
    color: var(--color-content-font);

    h1,
    h2 {
        color: var(--color-content-heading);
        margin: 2rem 0;
    }

    h3,
    h4,
    h5,
    h6 {
        color: var(--color-content-heading);
        margin: 2rem 0 .5rem;
    }

    p {
        font-size: var(--font-content-size);
    }

    li {
        margin: .4em 0;
    }

    li:first-child {
        margin-top: 0;
    }

    blockquote {
        margin: 1.5em 0;
        padding: .2em 1.25em;
        border-left: 3px solid var(--color-content-heading);
        color: var(--color-metadata-font);
        font-style: italic;
    }

    blockquote p:last-child {
        margin-bottom: 0;
    }

    hr {
        margin: 2.5em 0;
        border: none;
        border-top: 1px solid #ffffff1a;
    }

    table:not(.hljs-ln) {
        border-collapse: collapse;
    }

    table:not(.hljs-ln) th,
    table:not(.hljs-ln) td {
        padding: .5em 1em;
        border-bottom: 1px solid #ffffff1a;
        text-align: left;
    }

    table:not(.hljs-ln) th {
        color: var(--color-content-heading);
        font-weight: var(--font-bold);
        border-bottom: 1px solid #ffffff33;
    }

    .header {
        text-align: center;
        margin-bottom: 4rem;

        h1 {
            margin-bottom: 0;
        }
    }

    .title {
        font-size: 32px;
    }

    img {
        width: 100%;
    }

    iframe {
        width: 100%;
    }

    > p,
    pre,
    ul,
    .katex-display {
        overflow-x: auto;
    }

    pre {
        margin: 1.5em 0;
    }

    .gist {
        .gist-data {
            max-height: 60vh;
            overflow: scroll;
        }
    }

    .footnote-backref {
        font-family: monospace;
    }
}

.card {
    margin-bottom: 2rem;

    h2 {
        margin: 0;
    }

    p {
        font-size: 14px;
        margin: 0;
    }

    .tag:after {
        content: " /";
    }

    .tag:last-child:after {
        content: "";
    }
}

.card-link {
    text-decoration: none;

    &:hover {
        color: var(--color-link);
    }
}

.card-meta,
.post-meta {
    color: var(--color-metadata-font);
    font-size: var(--font-metadata-size);
}

.kg-width-full.kg-content-wide {
    --gap: 4vw;
    --main: min(var(--content-width, 720px), 100% - var(--gap) * 2);
    --wide: minmax(0, calc((var(--container-width, 1200px) - var(--content-width, 720px)) / 2));
    --full: minmax(var(--gap), 1fr);

    display: grid;
    grid-template-columns:
        [full-start] var(--full) [wide-start] var(--wide) [main-start] var(--main) [main-end] var(--wide) [wide-end] var(--full) [full-end];
}

.kg-width-wide,
.kg-content-wide>div {
    grid-column: wide-start / wide-end;
}

.kg-width-full {
    grid-column: full-start / full-end;
}

.kg-width-full img {
    width: 100%;
}