:root {
    --bg-primary: #201d1d;
    --font-primary: whitesmoke;
}
body.dark-mode .step-float:focus,
body.dark-mode .step-float:active,
body.dark-mode .step-float:hover {
    /* box-shadow: 2px 2px 10px lightblue; */
    /* border: 2px solid lightcyan; */
    box-shadow: 2px 2px 10px rgb(0, 8, 255);
}
body.dark-mode .page-header a:visited {
    color: var(--font-primary) !important;
}

.dark-mode .code-container>.copy-code {
    border: 1px solid white !important;
}

.dark-mode .page-header {
    background-color: var(--bg-primary);
    color: var(--bg-primary) !important;
}

.dark-mode .mobile-footer-header {
    background-color: var(--bg-primary) !important;
}

.dark-mode {
    background-color: var(--bg-primary);
    color: var(--font-primary)
}

.dark-mode h3,
.dark-mode #due_date_label {
    color: var(--font-primary) !important;

}

.dark-mode nav#nav-section-lesson-titles {
    background-color: var(--bg-primary)
}

.dark-mode a {
    color: white;
}

.dark-mode .drop-topic {
    border: 1px solid whitesmoke;

}

.dark-mode,
h4 .dark-mode p {
    color: whitesmoke;
}

.dark-mode #nav-section-lesson-titles {
    border-top: 1px solid whitesmoke;
    border-bottom: 1px solid whitesmoke;
}

.dark-mode main>aside {
    border-right: 1px solid whitesmoke;
}

.dark-mode .resource,
.dark-mode .main-links a {
    border: 1px solid whitesmoke;
    color: white;
}
.dark-mode .main-links a:active,
.dark-mode .main-links a:focus {
    color: whitesmoke;
}
.dark-mode .resource,
.dark-mode .topic {
    color: whitesmoke;
}
.dark-mode .resource:visited {
    color: whitesmoke;
}
.dark-mode .side-bar ul li a {
    color: var(--font-primary) !important;
}
body.dark-mode .side-bar ul li a.highlight {
    color: black !important;
}
.dark-mode button#endNxtBtn,
.dark-mode button#prevBtn {
    /* color: var(--font-primary) !important; */
    /* background-color: grey !important; */
    background: darkgrey !important;
    /* background: black !important */
}
body.dark-mode .highlight {
    color: black !important;
}