:root {
    --dark-base:#2d2d2d;
    --dark-base-2: #1e1e1e;
    --dark-text: #d3d1d1d4;
    --dark-buttons: #444;
    --dark-buttons-hover: #1e1e1e; 
}
body.dark-mode {
    background: var(--dark-base-2);
    color: var(--dark-text);
}
body.dark-mode .navigation {
    background-color: var(--dark-base);
}
body.dark-mode .logo{
    color: var(--dark-text);
}
body.dark-mode .note{
    color: var(--dark-text);
}
body.dark-mode .menu,
body.dark-mode .menu #myLinks {
    background-color: var(--dark-base);
    border-color: var(--dark-base);
    color: var(--dark-text);
}
body.dark-mode #myLinks a ,
body.dark-mode #myLinks a:link,
body.dark-mode #myLinks a:visited,
body.dark-mode #myLinks a:hover,
body.dark-mode #myLinks a:active {
    color: var(--dark-text);
    background-color: var(--dark-base);
    border-color: var(--dark-base);
}
body.dark-mode #myLinks a:hover{
    background-color: var(--dark-base);
}
body.dark-mode .bar {
    background-color: var(--dark-text);
}
body.dark-mode .btn {
    background-color: var(--dark-buttons);
    color: var(--dark-text) !important;
    border-color: var(--dark-buttons);
}
body.dark-mode .card{
    background-color: var(--dark-base);
}
body.dark-mode label{
    background-color: var(--dark-text);
}
body.dark-mode #demo{
    color: var(--dark-text);
}