AstralRinth/src/package/styles/classes/markdown.postcss

.markdown {
    display: flex;
    flex-direction: column;
    grid-gap: 1rem;

    blockquote,
    details,
    dl,
    ol,
    p,
    code,
    pre,
    table,
    ul {
        margin: 0;
    }

    p {
        line-height: 1.5;
        word-wrap: break-word;
        overflow-wrap: anywhere;
    }

    h1,
    h2 {
        padding-bottom: 0.2em;
        border-bottom: 1px solid var(--color-divider);
    }

    blockquote {
        padding: 0 1rem;
        color: var(--color-text);
        border-left: 0.25rem solid var(--color-divider);
    }

    a {
        color: var(--color-link);

        &:hover {
            text-decoration: underline;
        }
    }

    img,
    iframe {
        max-width: 100%;
        height: auto;
        border-radius: var(--rounded-sm);
    }

    iframe {
        width: 35rem;
        aspect-ratio: 16/9;
    }

    code {
        padding: 0.2rem 0.4rem;
        font-size: 80%;
        border-radius: var(--rounded-sm);
        background-color: var(--color-code-bg);
        color: var(--color-code-text);
    }

    pre {
        padding: 1rem;
        border-radius: var(--rounded-sm);
        overflow-x: auto;

        code {
            font-size: 80%;
            padding: 0;
            border-radius: 0;
            background-color: unset;
        }
    }

    hr {
        margin: 0;
        color: var(--color-divider);
    }

    table {
        display: block;
        width: max-content;
        max-width: 100%;
        overflow: auto;
        border-collapse: collapse;
        line-height: 1.5;

        th {
            font-weight: 600;
        }

        td,
        th {
            padding: 0.4rem 0.85rem;
            border: 0.1rem solid var(--color-table-border);
        }

        tr:nth-child(2n) {
            background-color: var(--color-table-alternate-row);
        }
    }

    details {
        border: 0.15rem solid var(--color-button-bg);
        border-radius: var(--rounded-sm);
        padding: 0.5rem 0.5rem 0;
        overflow: hidden;

        summary {
            font-weight: bold;
            margin: -0.5rem -0.5rem 0;
            padding: 0.5rem 0.8rem;
            cursor: pointer;
            background-color: var(--color-button-bg);

            &:hover {
                background-color: var(--color-button-bg-hover);
            }
        }

        &[open] {
            padding: 0.5rem;

            summary {
                margin-bottom: 0.5rem;
            }
        }
    }

    li:has(> input) {
        list-style: none;
        margin: 0;
        padding: 0;
    }
}