.canvas-body b, .hero-slideshow-description b{
    font-weight: 700
}

.canvas-body i, .hero-slideshow-description i{
    font-style: italic
}

.canvas-body u, .hero-slideshow-description u{
    text-decoration: underline;
}

.canvas-body h1,
.canvas-body h2,
.canvas-body h3,
.canvas-body h4,
.canvas-body h5,
.canvas-body h6 {
    -moz-osx-font-smoothing: grayscale;
    -moz-text-rendering: optimizeLegibility;
    -ms-font-smoothing: antialiased;
    -ms-text-rendering: optimizeLegibility;
    -o-font-smoothing: antialiased;
    -o-text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -webkit-text-rendering: optimizeLegibility;
    font-smoothing: antialiased;
    margin: .5em 0;
    text-rendering: optimizeLegibility;
}

.canvas-body h2 {
    font-size: 1.4em;
    line-height: 1.4em;
}

.canvas-body h3 {
    font-size: 1.2em;
    line-height: 1.2em;
}

.canvas-body ul, .canvas-body ol {
    padding-left: 20px;
    margin: 0 0 1.5em 0;
}

.canvas-body li img {
    max-width: 100%;
    height: auto;
}

.canvas-body .canvas-list ul {
    list-style-type: disc;
}

.canvas-body .canvas-list ol {
    list-style-type: decimal;
}

/*
 * this is css used for dark mode 
*/
html[data-color-theme-enabled] .cover-community-bar {
    --bg-1: #fff;
    --bg-2: #fff;
    --bg-3: #fff;
    --bg-4: #fff;
    --btn-bg: #fff;
    --btn-bg-hover: #000;
    --btn-bg-2-hover: #188FFF;
    --btn-bd: #000;
    --btn-bd-hover: #0f69ff;
    --link: #0f69ff;
    --text-1: #000;
}

@media (prefers-color-scheme: dark) {
    html[data-color-theme-enabled] .cover-community-bar {
        --bg-1: #000;
        --bg-2: #101518;
        --bg-3: #1d2228;
        --bg-4: #232a31;
        --btn-bg: #0f69ff;
        --btn-bg-hover: #0c54cc;
        --btn-bg-2-hover: transparent;
        --btn-bd: #0f69ff;
        --btn-bd-hover: #0c54cc;
        --link: #12a9ff;
        --text-1: #fff;
    }
}