:root {
    --sea_storm: #4AC4F3;
    --midnight: #1B1D23;
    --night: #07090F;
    --charcoal: #25272C;
    --dark_fossil: #3F4249;
    --stone: #7a8185;
    --light_fossil: #FDFDFF;
    --fossil: #E2E2E3;
}

/* NAVBAR -> */

.dark-mode .navbar.scrolled {
    background-color: var(--night) !important;
    box-shadow: rgba(88, 88, 88, 0.199) 0px 1px 4px;
}

.dark-mode .navbar .navbar-container .navbar-toggler {
    color: #fff;
}

.dark-mode .navbar .navbar-container .brand {
    color: #fff;
}

.dark-mode .navbar .navbar-container {
    color: #fff;
}

.dark-mode .navbar .navbar-container .navbar-right ul li a.active {
    color: var(--sea_storm);
}

.dark-mode .navbar .navbar-container .navbar-right ul li a {
    color: #fff;
}

@media(max-width: 820px) {
    .dark-mode .navbar .navbar-container .navbar-menu {
        color: #fff;
        background-color: var(--night);
    }
}

/* Color mode switcher */

.dark-mode .switcher-container label .toggle {
    background-color: var(--fossil) !important;
    opacity: 15%;
}

/* NAVBAR <- */


/* HERO -> */

.dark-mode .hero_first {
    background-color: var(--midnight);
}

/* HERO <- */

.dark-mode .setup {
    background-color: var(--night);
}

.dark-mode .setup h1,
.dark-mode .setup h2,
.dark-mode .setup h3 {
    color: var(--light_fossil);
}

.dark-mode .setup p {
    color: var(--fossil);
}

.dark-mode .code_wrapper {
    background-color: var(--charcoal);
}

.dark-mode .code_wrapper code {
    color: var(--stone);
}

.dark-mode .code_wrapper button {
    color: var(--fossil);
    background-color: var(--charcoal);
}

.dark-mode .code_wrapper button:focus {
    color: var(--stone);
}

.dark-mode .gui_setup__left_content ul li {
    color: var(--fossil);
}

/* REPLAY -> */

.dark-mode .snapshot_item__sh {
    color: var(--stone);
}

/* REPLAY <- */

/* FOOTER -> */

.dark-mode .footer {
    background-color: #0e1017;
}

.dark-mode .footer_top__item4 form {
    background-color: rgba(255, 255, 255, .1);
}

.dark-mode .footer_top__item4 form input {
    background-color: transparent;
}

/* FOOTER <- */