_vscode.css

/* Styles for Mardown preview on VSCode */

html {
    /* Variables */
    --code-font: var(--vscode-editor-font-family, "SF Mono", Monaco, Menlo, Consolas, "Ubuntu Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace);

    /* Colors (light) */
    --link-color:#0366d6;
    --link-hover-color: #0158ba; 
    --alt-link-color: #013375;
    --alt-link-hover-color:#044ba8;
    --border-color: #e5e5e5;
    --code-color: #333;
    --code-back-color: #f6f8fa;
}

pre {
    background: var(--code-back-color);
    font-family: var(--code-font);
    font-size: 1em;
    line-height: 1.3;
    background: var(--code-back-color);
    border: 1px solid var(--border-color);
}

img {
    max-width: 100%;
    margin: 10px 5px;
    display: inline-block;

    clip-path: inset(2px 2px 2px 2px round 0);
    border: 3px solid var(--border-color);
}

h3 {
    font-weight: bold;
}

a {
    color: var(--link-color);
    text-decoration: none;
}
a:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}
.color-cell {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-radius: 3px;
    display: inline-block;
    vertical-align: middle;
    margin:0 5px;
}
.badge {
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    line-height: 1;
    text-transform: uppercase;
    background-color: #f2f1f3;
    color: #333;
    padding: 8px 12px;
    border-radius: 5px;
    border: 1px solid #e4e4e4;
    letter-spacing: .5px;
    cursor: default;
}
    .badge.availability {
        background-color: #e6d7fd;
        color: #333;
        border-color: #c7badc;
    }
    .badge.version {   
        text-transform: lowercase;
        background-color: #f1f8ff;
        color: #333;
        border-color: #c8e1ff;
    }
    .badge.premium {
        background-color: #353535;
        color: #fff;
        border-color: #292929;
    }

.todo {
    display: block !important;

    background-color: #f6fdff;
    border: 1px solid #e2ebed;
    border-radius: 8px;
    margin: 30px 0;
    padding: 20px;

    font-size: 15px;
    line-height: 1.5;

    &:before {
        content: "Upcoming Content";
        text-transform: uppercase;
        font-weight: 700;
        margin:0 0 10px 0;
        display: block;
    }
}

.blockquote {
    display: inline-block;
    background-color: #f6f8fa;
    color: #4b4b4b;
    border-radius: 8px;
    border: 1px solid #e1e4e8;
    margin: 10px 0 30px 0;
    padding: 0 20px;
    align-items: center;
    font-size: 15px;
    line-height: 1.5;

    p {
        margin:0;
        padding: 15px 0;
    }

    .blockquote {
        margin: 0;
        padding: 0;
        border: 0;
        background-color: transparent;
    }
    
    &:has(.blockquote) {
        
        background: #fcf5f4 !important;
        border-color: #fae4e1 !important;

        p {
            color:#775954 !important;
        }
    }
}