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);
    }
    .key {
        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;
        &.btn {
            color: unset;
        }
    }
    footer {
        border-top: 1px solid #333;
        background-color: #0e0e0d;
        color: #e7e6e1;
    }
    .table th, .table td {
        background-color: rgba(255, 255, 255, 0.03);
        color: #e7e6e1;
        border-color: rgba(255, 255, 255, 0.1);
    }
    .tutorial_card2 {
        border: 1px solid #080808;
        background-color: #181818;
        box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
    }

    .tutorial_card2:hover {
        border: 1px solid #000;
        box-shadow: 0 0 0.8em rgba(0, 0, 0, 0.5);
    }

    .tutorial_card2 > .inner img {
        background-color: rgba(0,0,0,0.5);;
    }

    .tutorial_card2 > .inner::after {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        content: '';
        box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 1.0) inset;
    }

    .tutorial_card2 > h4 {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .tutorial_card2 .abstract {
        box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 1.0) inset;
    }

    .tutorial_card2.compact .abstract {
        box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 1.0) inset;
    }
    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;
        }
    }

    .tutorial_card3 {
        img {
            background-color: rgba(0,0,0,0.5);
        }
        .card-content {
            background-color: #181818;
            border-top: 1px solid #444;

            h4 {
                color: #ddd;
            }

            .abstract {
                color: #aaa;
            }
        }
    }
    .navbar {
        background-color:#181818!important;/* #171a1b !important;*/
        background: none;
        box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
    }
    a.nav-link.active {
        outline: 1px solid rgba(255, 255, 255, 0.2);
        background-color: rgba(0, 0, 0, 0.35);
        box-shadow: none;
    }
    .alert {
        background-color: #202020;
    }
    .navbar-toggler {
        border: 1px solid rgba(255, 255, 255, 0.15);
        background-color: rgba(0, 0, 0, 0.25);
        .bi {
            color: rgba(255, 255, 255, 0.5);
        }
    }
    .header {
        box-shadow: inset 0 -1em 1em -1em rgba(0, 0, 0, 0.8);
    }

    @media (min-width: 992px) {
        .header {
            box-shadow: none;
        }
    }
    @media (min-width: 768px)  {
        .form-box {
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.55);
            background-color: rgba(0, 0, 0, 0.3);
        }
    }
}