.editor-container.rich-text > .ProseMirror {

    font-size: 16px;
    line-height: 150%;
    
    white-space: normal;
    word-break: break-word;
    
    margin: 0 auto;
    color: #211f27;

    caret-color: #211f27;
    & ::selection {
        background-color: #ddedff;
    }

    // border-radius
    & blockquote, & code, & .cm-editor, & .math-block, & .math-inline, & .pre {
        border-radius: 3px;
    }
    // border-radius (special handles)
    & blockquote {
        border-radius: 0px 3px 3px 0px;
    }

    & blockquote {
        border-left: 3px solid #767268;
        padding-left: 22px;
        padding-top: 1px;
        padding-bottom: 1px;

        margin: 4px 0;
        color: #555;
        background-color: #f9f9f9;
    }

    // outer blockquote: 4px border-left rather than 3px.
    & > blockquote {
        border-left: 4px solid #5a564d;

        // leave some spaces between the content and the outer blockquote
        padding-top: 22px;
        padding-bottom: 22px;
    }

    & p {
        margin: 8px 0;
    }

    & h1, & h2, & h3, & h4, & h5, & h6 {
        margin: 22px 0 16px;
        line-height: 1.2;
    }
    & h1 { font-size: 2em; }
    & h2 { font-size: 1.75em; }
    & h3 { font-size: 1.5em; }
    & h4 { font-size: 1.25em; }
    & h5 { font-size: 1.1em; }
    & h6 { font-size: 1em; }

    & ul, & ol {
        margin: 4px 0;
        padding-left: calc(22px + 2px);
    }

    & li::marker {
        color: #747474;
        size: 150%;
    }

    & pre {
        background-color: #f5f5f5;
        padding: 16px;
        overflow-x: auto;
        font-family: 'Consolas', monospace;
        font-size: 14px;
    }
    
    & code {
        background-color: #f0f0f0;
        font-family: 'Consolas', monospace;
        padding: 2px 4px;
        // consolas looks bigger than normal text, we reduce for 1 px to maintain balance.
        font-size: 90%;
    }

    & .cm-editor {
        background-color: #f9f9f9;
        outline: none;
        padding: 18px;
        & .cm-line {
            font-family: 'Consolas', monospace;
            // Consolas looks bigger than normal text, we reduce for 1 px to maintain balance.
            font-size: 90%;
        }
    }

    & a {
        color: #2aa882;
        text-decoration: underline;
    }

    & img {
        max-width: 100%;
        height: auto;
        margin: 4px 0;
    }

    & hr {
        border: 0;
        height: 2px;
        background: #ddd;
        margin: 22px 0;
    }

    // hover effect for both inline/block
    & .math-inline, & .math-block {
        // animation: background color
        background-color: transparent;
        transition: background-color 0.3s ease;
        &:hover {
            background-color: #f0f0f0;
            cursor: pointer;
        }
    }

    & .math-block {
        padding: 4px;

        &.empty, &.rendering, &.render-error {
            display: flex;
            justify-content: center; // horizontal align
            align-items: center; // vertical align

            min-height: 50px;
            
            font-family: 'sans-serif';
            font-style: italic;
            font-size: 18px;
        }
    }
}
