/* Dark Mode - Default */

header {
    background-color: black;
}

ul,
li {
    color: #b8b8b8;
}

h1,
h2,
h3,
h5,
h6 {
    color: #b8b8b8;
}

.main {
    background: linear-gradient(linear, #000000, #001338, #4b566b);
    background: -webkit-gradient(
        linear,
        center top,
        center bottom,
        from(#000000),
        color-stop(50%, #001338),
        to(#4b566b)
    );
    background: -moz-linear-gradient(top, #000000, #001338, #4b566b);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

footer {
    background-color: #0a0a0a;
    color: #fff;
    border-top: 1px solid #222;
}

/* Dark Menu */

.dark-menu {
    background-color: #000;
}

.dark-menu-mobile {
    background-color: #000;
    color: #fff;
    font-size: 20px;
    height: 68%;
    border-bottom-right-radius: 10px;
}

.dark-dropdown {
    background-color: #000;
    color: #fff;
    font-size: medium;
    border: none;
    border-radius: 0;
}

.dark-btn {
    background-color: #212529;
    color: #fff;
    border: 1px solid #444;
}

.dark-btn:focus,
.dark-btn:active {
    outline: none;
    background-color: #212529;
    color: #fff;
}

.dark-btn:hover {
    background-color: #333;
    color: #ccc;
    cursor: pointer;
}

.form-check-label .icon-moon {
    color: #000;
}

/* Light Mode */

body.light-mode header {
    background-color: #fff;
}

body.light-mode ul,
body.light-mode li {
    color: #333;
}

body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h5,
body.light-mode h6 {
    color: #333;
}

body.light-mode .main {
    background: linear-gradient(to bottom, #fff, #f0f0f0, #dcdcdc);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body.light-mode .dark-btn {
    background-color: #f8f9fa;
    color: #212529;
    border: 1px solid #ccc;
}

/* Light Menu */

body.light-mode .dark-menu,
body.light-mode .dark-menu-mobile,
body.light-mode .dark-dropdown,
body.light-mode .dark-btn {
    background-color: #fff;
    color: #333;
    border: 1px solid #cccc;
}

body.light-mode .btn-close {
    filter: invert(0);
}

body.light-mode .navbar-toggler {
    border-color: #333;
}

body.light-mode .navbar-toggler-icon {
    filter: invert(1);
}

body.light-mode .navbar .nav-link,
body.light-mode .navbar .dropdown-item {
    color: #333 !important;
}

body.light-mode .navbar .nav-link:hover,
body.light-mode .navbar .dropdown-item:hover {
    color: #000 !important;
}

body.light-mode .form-check-label {
    background-color: #ccc;
    color: #333;
}

body.light-mode .form-check-label .icon-moon {
    color: #333;
}

body.light-mode .form-check-label .icon-sun {
    color: #000;
}

/* Light Post */

body.light-mode .card-container .card-port,
body.light-mode .post-card {
    background-color: z;
    border-color: #ccc;
    border-style: solid;
}

body.light-mode .card-title,
body.light-mode .card-text,
body.light-mode .card-data,
body.light-mode .post-title,
body.light-mode .post-data,
body.light-mode .post-text,
body.light-mode .post-list li {
    color: #222;
}

body.light-mode #searchInput {
    background-color: #f8f9fa;
    color: #212529;
    border: 1px solid #ccc;
}

body.light-mode #searchInput::placeholder {
    color: #888;
}

/* Light Footer */
body.light-mode footer {
    background-color: #f8f8f8;
    color: #3333;
    border-top: 1px solid #ccc;
}

body.light-mode footer .social-icons a {
    color: #333;
}

body.light-mode footer .copyright {
    color: #555;
}

body.light-mode footer .shadertoy-text {
    color: #333;
}

/* Light Draw */

body.light-mode .sidebar-draw {
    background-color: #fff;
    color: #333;
    border-right: 1px solid #ccc;
}

body.light-mode .sidebar-draw label {
    color: #333;
}

body.light-mode .sidebar-draw input,
body.light-mode .sidebar-draw button {
    background-color: #f8f9fa;
    color: #212529;
    border: 1px solid #ccc;
}

body.light-mode .sidebar-draw button:hover {
    background-color: #e0e0e0;
    color: #000;
}

body.light-mode #eraser-cursor {
    background-color: #fff;
    border: 1px solid #333;
}

body.light-mode #clear-draw svg {
    fill: #000;
}

body.light-mode #clear-draw:hover svg {
    fill: #ccc;
}

body.light-mode #clear-draw {
    background-color: #f8f9fa;
}

body.light-mode #clear-draw.active {
    background-color: #e0e0e0;
    border-color: #000;
}

body.light-mode #clear-draw svg {
    fill: #000;
}

body.light-mode #clear-draw:hover {
    background-color: #e0e0e0;
    border-color: #111;
}

body.light-mode #clear-draw:hover svg {
    fill: #111;
}