:root {
  --font-color-h1: var(--bs-emphasis-color);
  --font-color-h2: var(--bs-body-color);
  --font-color-h3: var(--bs-secondary-color);
  --font-color-h4-h6: var(--bs-tertiary-color);
  --font-color-p: var(--bs-body-color);
  --link-color: var(--bs-link-color);
  --blockquote-border: var(--bs-border-color);
  --blockquote-bg: var(--bs-tertiary-bg);
  --blockquote-color: var(--bs-secondary-color);
  --code-bg: var(--bs-body-bg);
  --code-color: var(--bs-code-color);
  --pre-bg: var(--bs-body-bg);
  --pre-color: var(--bs-code-color);
  --code-block-bg: var(--bs-tertiary-bg);
  --code-block-border: var(--bs-border-color);
}

.f-rich-text-content h1 {
    font-size: 2em;
    font-weight: bold;
    color: var(--font-color-h1);
}

.f-rich-text-content h2 {
    font-size: 1.75em;
    font-weight: bold;
    color: var(--font-color-h2);
}

.f-rich-text-content h3 {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--font-color-h3);
}

.f-rich-text-content h4,
.f-rich-text-content h5,
.f-rich-text-content h6 {
    font-size: 1.25em;
    font-weight: bold;
    color: var(--font-color-h4-h6);
}

.f-rich-text-content p {
    line-height: 1.6;
    color: var(--font-color-p);
}

.f-rich-text-content a {
    color: var(--link-color);
    text-decoration: none;
}

.f-rich-text-content a:hover {
    text-decoration: underline;
}

.f-rich-text-content ul {
    padding-left: 40px;
    list-style-type: disc;
}

.f-rich-text-content ol {
    padding-left: 40px;
    list-style-type: decimal;
}

.f-rich-text-content li {}

.f-rich-text-content blockquote {
    padding: 0.5em 10px;
    border-left: 5px solid var(--blockquote-border);
    background: var(--blockquote-bg);
    color: var(--blockquote-color);
}

.f-rich-text-content code {
    font-family: monospace;
    background: var(--code-bg);
    padding: 2px 4px;
    border-radius: 4px;
    color: var(--code-color);
}

.f-rich-text-content pre {
    font-family: monospace;
    background: var(--pre-bg);
    padding: 10px;
    border-radius: 4px;
    overflow: auto;
    color: var(--pre-color);
}

.f-rich-text-content .ql-align-left {
    text-align: left;
}

.f-rich-text-content .ql-align-center {
    text-align: center;
}

.f-rich-text-content .ql-align-right {
    text-align: right;
}

.f-rich-text-content .ql-align-justify {
    text-align: justify;
}

.f-rich-text-content .ql-indent-1 {
    padding-left: 3em;
}

.f-rich-text-content .ql-indent-2 {
    padding-left: 6em;
}

.f-rich-text-content .ql-indent-3 {
    padding-left: 9em;
}

.f-rich-text-content .ql-direction-ltr {
    direction: ltr;
}

.f-rich-text-content .ql-direction-rtl {
    direction: rtl;
}

.f-rich-text-content .ql-font-serif {
    font-family: serif;
}

.f-rich-text-content .ql-font-sans {
    font-family: sans-serif;
}

.f-rich-text-content .ql-font-monospace {
    font-family: monospace;
}

.f-rich-text-content .ql-bold {
    font-weight: bold;
}

.f-rich-text-content .ql-italic {
    font-style: italic;
}

.f-rich-text-content .ql-underline {
    text-decoration: underline;
}

.f-rich-text-content .ql-strike {
    text-decoration: line-through;
}

.f-rich-text-content .ql-list-ordered {
    list-style-type: decimal;
}

.f-rich-text-content .ql-list-bullet {
    list-style-type: disc;
}

.f-rich-text-content .ql-code-block {
    background-color: var(--code-block-bg);
    border-left: 4px solid var(--code-block-border);
    padding: 0.5em;
    font-family: monospace;
}

.f-rich-text-content .ql-script-sub {
    vertical-align: sub;
    font-size: smaller;
}

.f-rich-text-content .ql-script-super {
    vertical-align: super;
    font-size: smaller;
}