@font-face {
    font-family: "IBM Plex Sans";
    src: url(../fonts/IBMPlexSans-Light.ttf) format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url(../fonts/IBMPlexSans-LightItalic.ttf) format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url(../fonts/IBMPlexSans-Regular.ttf) format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url(../fonts/IBMPlexSans-Italic.ttf) format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url(../fonts/IBMPlexSans-Bold.ttf) format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url(../fonts/IBMPlexSans-BoldItalic.ttf) format('truetype');
    font-weight: 700;
    font-style: italic;
}

:root {
    --primary-color: #D45151;
    --background-color: #f2f2fa;
    --text-color: #333;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-size: 15px;

    font-family: "IBM Plex Sans", sans-serif;
    display: grid;
    justify-content: center;
    gap: 1rem;
    grid-template-columns: minmax(0, 800px);
    grid-template-areas:
      "header"
      "content"
      "footer";

    @media screen and (max-width: 800px) {
        padding: 0 1rem;
        justify-content: start;
        gap: 0;
        font-size: 13px;
    }
}

header {
    grid-area: header;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--text-color);
    padding-bottom: .5rem;

    nav > ul {
        padding-left: 1rem;
        list-style: none;
        display: flex;
        gap: 1rem;

        li {
            display: inline-block;

            a {
                font-size: 1rem;
            }

            a.active {
                text-decoration: underline;
            }
        }

        &::before {
            content: "/";
        }

        @media screen and (max-width: 800px) {
            padding-left: 0;
            margin-block: 0;
            flex-wrap: wrap;

            li a {
                font-size: 13px;
            }

            &::before {
                display: none;
            }
        }
    }
}

main {
    grid-area: content;
    min-width: 0;
    max-width: 800px;
    width: 100%;
    line-height: 23px;

    figure, img {
        max-width: 100%;
    }

    ul.tags {
        list-style: none;
        padding-left: 0;
        margin: 0;

        li {
            display: inline-block;

            a {
                text-decoration: none;
                font-weight: 400;
            }
        }
    }

    .all-tags {
        list-style: none;
        padding-left: 0;
        margin: 0 0 1.5rem;
        display: flex;
        flex-wrap: wrap;
        gap: .25rem .75rem;

        a {
            text-decoration: none;
            font-weight: normal;
        }
    }

    .pages-list {
        padding: 0;
    }

    .pages-list li {
        display: flex;
        gap: .5rem;
    }

    .list-tags a {
        font-weight: normal;
        font-size: 13px;
        text-decoration: none;
    }
}

.section-title {
    font-weight: 700;
    text-transform: uppercase;
}

.featured-post {
    margin-bottom: 1.5rem;

    .section-title {
        padding-bottom: .5rem;
    }

    a {
        text-decoration: none;
        font-weight: normal;
    }

    img {
        width: 100%;
        height: auto;
        border: 1px solid #333;
    }

    h3 {
        margin: .5rem 0 .25rem;
        font-size: 1rem;
        line-height: 1.3;
    }

    p {
        margin: 0;
        line-height: 1.4;
    }
}

.home-intro {
    padding-bottom: 6rem;
    padding-top: 2.5rem;
}

.home-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;

    @media screen and (max-width: 800px) {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .home-featured {
        max-width: 300px;
    }

    .all-posts-link {
        display: inline-block;
        margin-top: .5rem;
    }
}

footer {
    grid-area: footer;
}

/* Links */
a {
    color: var(--text-color);
    text-decoration: none;
    &:hover {
        text-decoration: underline;
    }
}

main h1 a {
    text-decoration: none;
    &:hover {
        color: var(--text-color)
    }
}

main a {
    text-decoration: underline;
    font-weight: bold;
    &:hover {
        color: var(--primary-color);
    }
}

figure {
    margin: 0;
}

.featured-dot {
    color: #ff4136;
    font-size: 11px;
    vertical-align: text-bottom;
}

h1 {
    font-size: 3rem;
    line-height: 4rem;
    font-weight: 700;
    margin-top: 0;

    @media screen and (max-width: 800px) {
        font-size: 2rem;
        line-height: 2.5rem;
        margin-bottom: 1rem;
    }
}

code {
    border-radius: 3px;
    font-family: "Jetbrains Mono", monospace;
    padding: 0 .2em;
    color: #111;
    background-color: #fff;
}

#title {
    font-size: 1.3rem;
    font-weight: 600;

    @media screen and (max-width: 800px) {
        width: 100%;
        font-size: 1.1rem;
    }
}

/* Block geometry follows Discourse's code blocks: 14px/1.3077 JetBrains
   Mono, 12px padding, 4px radius. Sizing goes on `code`, not `pre` —
   all the text lives inside <code>, so a font-size on the <pre> never
   shows, and the bare `code` rule further down would win anyway. */
.highlight {
    pre {
        padding: 12px;
        overflow-x: auto;
        border-radius: 4px;
    }
    code {
        padding: 0;
        border-radius: unset;
        background-color: unset;
        color: unset;
        font-size: 14px;
        line-height: 1.3076923077;
    }
}

.tags-title {
    font-weight: bold;
    margin: 4rem 0;
}

.callout {
    margin: 2.5rem 0;

    .callout-body > :first-child {
        margin-top: 0;
    }

    .callout-body > :last-child {
        margin-bottom: 0;
    }
}

.callout-tag {
    display: inline-block;
    margin-bottom: .5rem;
    padding: .25rem .6rem;
    background: var(--callout-accent, var(--text-color));
    font-family: "Jetbrains Mono", monospace;
    font-size: 13px;
    line-height: 18px;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
}

.callout-tag::before {
    content: "\2193";
    margin-right: .5em;
    line-height: 1;
    color: #fff;
}

.callout-visualization {
    --callout-accent: #2a8a80;
    font-style: italic;
}

code {
    font-size: 13px;
}

pre {
    line-height: 13px;
}

.callout-body {
    margin-left: 2rem;
}