:root {
    --markdown-border-color: rgba(0, 0, 0, .12);
    --markdown-pre-background-color: #f4f5f7;
    --markdown-code-background-color: #f4f5f7;
    --markdown-blockquote-color: rgba(0, 0, 0, .24);
    --markdown-link-color: #1976d2;
}

[data-theme="dark"] {
    --markdown-border-color: rgba(255, 255, 255, .12);
    --markdown-pre-background-color: #161819;
    --markdown-code-background-color: #161819;
    --markdown-blockquote-color: rgba(255, 255, 255, .24);
}

.markdown-body {
    h1 {
        margin: 48px 0 24px;
        padding-bottom: 16px;
        font-weight: 500;
        font-size: 1.857rem;
        border-bottom: 1px solid var(--markdown-border-color);
    }

    h2 {
        margin: 48px 0 24px;
        padding-bottom: 10px;
        font-weight: 500;
        font-size: 1.571rem;
        border-bottom: 1px solid var(--markdown-border-color);
    }

    h3 {
        margin: 48px 0 24px;
        padding-bottom: 10px;
        font-size: 1.286rem;
        font-weight: 500;
    }

    h4 {
        margin: 48px 0 24px;
        font-size: 1.143rem;
        font-weight: 400;
    }

    h5 {
        margin: 48px 0 24px;
        font-size: 1.143rem;
        font-weight: 400;
    }

    p, ul, ol {
        margin: 24px 0 24px;
        font-size: 0.875rem;
        line-height: 1.8;

        li {
            ul, ol {
                margin: 8px 0 0;
            }
        }
    }

    ul, ol {
        padding-left: 20px;
    }

    li {
        margin: 0 0 8px;
    }

    hr {
        margin: 48px 0;
        border: 0;
        border-bottom: 1px solid var(--markdown-border-color);
    }

    img {
        max-width: 100%;
    }

    .table-wrapper {
        margin: 48px 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        width: 100%;
        min-width: max-content;
        border-spacing: 0;
        border-collapse: collapse;

        thead {
            text-align: left;
        }

        tr {
            border-top: 1px solid var(--markdown-border-color);
        }

        td, th {
            padding: 6px 12px;
            border: 1px solid var(--markdown-border-color);
            min-width: 120px;
            word-break: break-word;
        }
    }

    pre {
        padding: 0;
        overflow: auto;
        font-size: 0.875rem;
        border-radius: 4px;

        code {
            width: 100%;
            margin: 0;
            padding: 16px;
            font-size: 0.875rem;
            line-height: 1.8;
            word-break: normal;
            white-space: pre;
            background: transparent;
            border: 0;
        }

        .syntax-highlighter {
            code {
                padding: 0;
            }
        }
    }

    pre:has(.syntax-highlighter) {
        padding: 0;
        background: transparent;
    }

    code {
        display: inline-block;
        padding: .1em .6em;
        margin: 0;
        font-size: 0.8em;
        border-radius: 2px;
    }

    blockquote {
        margin: 24px 0;
        padding: 5px 16px;
        font-size: 1rem;
        color: var(--markdown-blockquote-color);
        border-left: 4px solid var(--markdown-border-color);

        blockquote {
            margin: 12px 0;
        }

        p {
            margin: 0;
        }
    }

    a {
        color: var(--markdown-link-color);
        transition: color 0.1s ease-in-out;

        &:hover {
            opacity: 0.8;
            text-decoration: none;
        }
    }

    .markdown-alert {
        .markdown-alert-title {
            margin-bottom: calc(var(--rehype-github-alerts-default-space) / 2);
        }

        p {
            margin: 0;
        }
    }

    .katex {
        position: relative;
        font-size: 1.143rem;
    }
}