/* General Card Styling */
.main-index,
.main-playground {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;

    /* Base Markdown Styles */

    & .md-body,
    & .md-body {
        line-height: 1.6;
        padding: 0 1rem;
        max-width: 960px;
        margin: 0 auto;

        & h1,
        & h2,
        & h3,
        & h4,
        & h5,
        & h6 {
            &:not(:first-child) {
                margin-top: 1.5em;
            }

            margin-bottom: 0.5em;
            font-weight: 600;
        }

        & img {
            height: auto;
            border-radius: 4px;
        }

        & p {
            margin: 0.5em 0;
        }

        & p.intro > img[alt*="Marked Extensions Logo"] {
            border-radius: 10%;
        }

        & p:not(.intro) > img {
            width: calc((100% / 3) * 2);
            aspect-ratio: 16 / 9;
        }

        & a {
            color: #0366d6;
            text-decoration: none;
        }

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

        & blockquote {
            padding: 0.5em 1em;
            margin: 0.8em 0;
            border-left: 0.25em solid #dfe2e5;
            color: #6a737d;
            background-color: #f6f8fa;
            border-radius: 4px;
        }

        & code {
            padding: 0.2em 0.4em;
            margin: 0;
            font-size: 0.9rem;
            background-color: rgba(27, 31, 35, 0.05);
            border-radius: 4px;
        }

        & code[class^="language-"] {
            background-color: transparent;
        }

        & pre {
            display: flex;
            align-items: center;
            padding: 1em;
            overflow: auto;
            font-size: 0.9rem;
            line-height: 1.45;
            background-color: #1e1e1e;
            border-radius: 4px;
            position: relative;

            & .copy-btn {
                position: absolute;
                top: 8px;
                right: 10px;
                background-color: #ffffff12;
                border: none;
                border-radius: 4px;
                color: #fff;
                cursor: pointer;
                font-size: 11px;
                padding: 4px 8px;
                min-width: 50px;
                width: auto;
                transition: all 0.25s ease-out;

                &:hover {
                    background-color: #ffffff24;
                }
            }
        }

        & table {
            width: 100%;
            border-collapse: collapse;
        }

        & th,
        & td {
            padding: 0.6em 1em;
            border: 1px solid #ccc;
        }

        & th {
            background-color: #d8ecff;
            font-weight: 600;
            color: #24292e;
        }
    }
}