html[data-bs-theme="dark"] {
    body {
        background-color: #151514;
        color: #e7e6e1;
    }
    .header {
        background-color: #151514;
    }
    .menu {
        border: none;
        background-color: transparent;
        box-shadow: 0 1em 2em -1em rgba(0, 0, 0, 1.0) inset, 0 -1em 2em -1em rgba(0, 0, 0, 1.0) inset;
    }
    .squircle {
        background-image: url(/images/squircle-dark.png);
    }
    p {
        color: #ccccc9;
    }
    .autotoc {
        background-color: #121212;
        box-shadow: 0 0 1em rgba(0, 0, 0, 1.0);
    }
    .autotoc > .progress_spots_sm > div {
        background-color: rgba(255, 255, 255, 0.3);
    }
    .autotoc > .progress_sm {
        background-color: rgba(255, 255, 255, 0.7);
    }
    .autotoc > .progress_spots_lg > div {
        background-color: rgba(255, 255, 255, 0.15);
    }
    .autotoc > .progress_spots_lg > div.active {
        background-color: rgba(255, 255, 255, 0.4);
    }
    div.floatright {
        border: none;
    }
    div.floatright img {
        border-radius: 0.5em;
        box-shadow: 0 0 1em rgba(0,0,0,1);
    }
    code {
        color: #e5185d;
        background-color: rgba(243, 132, 175, 0.08);
    }
    kbd {
        border: 1px solid #555753;
        font-weight: bold;
    }
    .hint {
        border-top: 1px solid #232626;
        border-bottom: 1px solid #232626;
        background-color: #0c0d0d;
    }
    p a {
        color: #0d95fd;
    }
    footer {
        border-top: 1px solid #333;
        background-color: #0e0e0d;
        color: #e7e6e1;
    }
    .table th, .table td {
        color: #e7e6e1;
    }
    .dark-only-bg-contrast-light {
        /* background: none; */
        /* filter: invert(0.5); */
        /* filter:brightness(0.5) contrast(1.5); */
        /* background-color: #0e0e0d; */
    }
    pre, pre .w {
        background-color: #0a0a0a!important;
    }
    .scroll-x {
        box-shadow: 0 0 1em rgba(0,0,0,0.5);
    }
    .input-with-text-mod .input-group-text {
        background-color: unset;
    }
    hr {
        opacity: 0.5;
        box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 1.0);
    }

    div.floatright img {
        &.keep_padding {
            border: 0.5em solid #fff;
        }
    }

    .hscol {
        .tutorial_card3 {
            &:hover {
                background-color: #222;
            }
            border: 1px solid #333;
            h4 {
                color: #ccccc9;
                border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            }

            &:hover {
                text-decoration: none;
                box-shadow: 0 0.25em 0.75em rgba(0,0,0,0.3);
            }

            img {
                background-color: rgba(0,0,0,0.5);

                &.theme-image-light {
                    display: none;
                }

                &.theme-image-dark {
                    display: block;
                }
            }

            .card-content {
                color: #aaa;
                border-top: 1px solid rgba(255, 255, 255, 0.05);
                .abstract {
                    color: #ccccc9;
                }
            }
        }
        @media (max-width: 767.999999px) {
            .card-content {
                h4 {
                    border-bottom: none;
                }
            }
        }
        @media (min-width: 768px) and (max-width: 1199.999999px) {
            .card-content {
                h4 {
                    border-bottom: none;
                }
            }
            &.hor2 {
                .tutorial_card3 {
                    .card-content {
                        border-left: 1px solid rgba(255, 255, 255, 0.05);
                        h4 {
                            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
                        }
                    }
                }
            }
        }
        @media (min-width: 1200px) {
            .card-content {
                h4 {
                    border-bottom: none;
                }
            }
            &.hor3 {
                .tutorial_card3 {
                    .card-content {
                        border-left: 1px solid rgba(255, 255, 255, 0.05);
                        h4 {
                            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
                        }
                    }
                }
            }
        }
    }

    .autotoc-secondary {
        background: rgba(var(--bs-body-bg-rgb), 0.25);
        border-right: 1px solid rgba(var(--bs-body-color-rgb), 0.05);
    }

    .autotoc-secondary a.active {
        color: #18abe5;
        background: rgba(255, 255, 255, 0.055);
        border-left-color: #18abe5;
        font-weight: 400;
    }    
}

html[data-bs-theme="dark"] .new-tutorial-banner {
    background: linear-gradient(135deg, #2a2118, #1c1c1b);
    color: #e7e6e1;

    &:hover {
        color: #e7e6e1;
    }
}