.ablogpost {
    margin: 0 auto;
    align-items: left;
    width: 90%;
    margin-bottom: 150px;
}

.back-btn {
    display: block;
    margin-bottom: 1em;
}

.post-header {
    margin: 0 auto;
    margin-top: 80px;
    margin-bottom: 50px;

    h1 {
        font-size: 2em;
    }

    h2 {
        margin-top: 1em;
    }

    .date {
        opacity: 0.5;
        margin-top: 10px;
    }
}

.post-content {
    margin: 0 auto;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: 600;
        line-height: 1.25;
        margin-top: 1.7em;
        margin-bottom: 0.5em;
    }

    /* Reduce spacing for consecutive headings */
    h1 + h2,
    h2 + h3,
    h3 + h4,
    h4 + h5,
    h5 + h6 {
        margin-top: 0.7em;
    }

    h1 {
        font-size: 2rem;
        margin-top: 0; /* No top margin for h1 at page start */
        margin-bottom: 0.75em;
        padding-bottom: 0.3em;
    }

    h2 {
        font-size: 1.5rem;
        padding-bottom: 0.3em;
        border-bottom: 1px solid #30363dff;
    }

    h3 {
        font-size: 1.25rem;
        padding-bottom: 0.3em;
        border-bottom: 1px solid #30363dff;
    }

    h4 {
        font-size: 1rem;
    }

    h5 {
        font-size: 0.875rem;
    }

    h6 {
        font-size: 0.85rem;
        color: #8d96a0;
    }

    p,
    li {
        font-size: 1rem;
        opacity: 0.9;
        line-height: 1.7em;
    }

    li::marker {
        color: rgba(255, 255, 255, 0.415);
        font-size: 1rem;
    }

    blockquote {
        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: 20px;
        padding: 0 1em;
        color: #8d96a0;
        border-left: 0.25em solid #30363d;
    }

    ul,
    ol {
        margin-bottom: 20px;
        padding-left: 2em;
    }

    ol ol,
    ul ol {
        list-style-type: lower-roman;
    }

    ul ul ol,
    ul ol ol,
    ol ul ol,
    ol ol ol {
        list-style-type: lower-alpha;
    }

    pre {
        background-color: rgba(255, 255, 255, 0.15);
        box-shadow: 0 0 0 1px rgb(76, 76, 76);
        padding: 12px;
        border-radius: 12px;
        font-size: 1rem;
        overflow-x: auto;
        color-scheme: dark;

        font-family:
            ui-monospace,
            SFMono-Regular,
            SF Mono,
            Menlo,
            Consolas,
            Liberation Mono,
            monospace;
        word-wrap: normal;
        margin-top: 20px;
        margin-bottom: 20px;
        transition: cubic-bezier(0.075, 0.82, 0.165, 1) 500ms;
    }

    pre:hover {
        box-shadow:
            0 0 0 2px rgb(243, 243, 243),
            0 0px 50px rgba(255, 255, 255, 0.4);
        transform: scale(1.01);
    }

    code:not(pre code) {
        background-color: rgba(255, 255, 255, 0.15);
        box-shadow: 0 0 0 1px rgb(76, 76, 76);
        padding: 2px 4px;
        border-radius: 4px;
        font-family:
            ui-monospace,
            SFMono-Regular,
            SF Mono,
            Menlo,
            Consolas,
            Liberation Mono,
            monospace;
        font-size: 0.9em;
        margin-left: 6px;
        margin-right: 6px;
    }

    a {
        color: var(--special);
        text-decoration: none;
        font-weight: 600;
    }

    img,
    iframe {
        max-width: 95%;
        max-height: 600px;
        display: block;
        margin: 2em auto;
        border-radius: 12px;
        overflow: hidden;
    }
}

.tags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;

    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;

    .tag,
    .tag-year {
        padding: 8px 16px 8px 16px;
        border-radius: 500px;
        box-shadow: 0 0 0 1px rgb(76, 76, 76);
        width: fit-content;
        font-size: 1em;

        &:hover {
            transform: scale(1.05);
            box-shadow:
                0 0 0 2px rgb(243, 243, 243),
                0 0px 50px rgba(255, 255, 255, 0.4);
        }
    }

    .tag-year {
        background-color: rgba(250, 200, 150, 0.685);
    }
}

#blog-index {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    margin-top: 60px;
    width: 90%;
    max-width: 635px;

    .posts {
        margin-bottom: 100px;
        width: 100%;
    }

    .tags {
        margin-bottom: 50px;
        width: 100%;
        justify-content: center;
    }
}

#tag-page {
    .article-heading {
        margin-top: 80px;
    }

    .posts {
        margin: 0 auto;
        width: 90%;
        max-width: 635px;
        margin-bottom: 100px;
    }
}

@media screen and (min-width: 768px) {
    .ablogpost {
        width: 60%;
    }
}

@media screen and (min-width: 1700px) {
    .ablogpost {
        width: 40%;
    }
}