:root {
    --bg-light: #f8f9fa;
    --bg-dark: #121212;
    --text-light: #212529;
    --text-dark: #f8f9fa;
    --card-light: #ffffff;
    --card-dark: #1e1e1e;
    --nav-light: #ffffff;
    --nav-dark: #1a1a1a;
    --footer-light: #f8f9fa;
    --footer-dark: #1a1a1a;
    --border-light: #dee2e6;
    --border-dark: #343a40;
    --primary-color: #0d6efd;
    --primary-hover: #0b5ed7;
    --yellow: #eab308;
    --white: #f8f9fa;
}

body.dark-mode {
    background-color: var(--bg-dark);
    color: var(--text-dark);
    transition: background-color 0.3s, color 0.3s;
}

body.dark-mode .navbar {
    background-color: var(--nav-dark) !important;
    border-color: var(--border-dark);
}

body.dark-mode .navbar-brand,
body.dark-mode .nav-link,
body.dark-mode .dropdown-toggle {
    color: var(--text-dark) !important;
}

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

body.dark-mode .card {
    background-color: var(--card-dark);
    border-color: var(--border-dark);
    color: var(--text-dark);
}

body.dark-mode .comment {
    background-color: var(--card-dark);
    border-color: var(--border-dark);
    color: var(--text-dark);
}

body.dark-mode #respond {
    background-color: var(--card-dark);
    border-color: var(--border-dark);
    color: var(--text-dark);
}


body.dark-mode ul.dropdown-menu {
    background-color: var(--card-dark);
}

body.dark-mode li.menu-item a {
    color: var(--text-dark);
}

body.dark-mode #respond h3 {
    color: var(--text-dark);
}


body.dark-mode .reply {
    color: var(--text-light);
}

body.dark-mode .comment-reply-link:hover{
    color: var(--text-light);
}

body.dark-mode .card h3,
body.dark-mode .card .fs-2 {
    color: var(--text-dark);
}

body.dark-mode footer {
    background-color: var(--footer-dark) !important;
    color: var(--text-dark) !important;
}

body.dark-mode footer h5,
body.dark-mode footer .small,
body.dark-mode footer a {
    color: var(--text-dark) !important;
}

body.dark-mode footer .border-light {
    border-color: var(--border-dark) !important;
}

body.dark-mode .text-muted {
    color: #adb5bd !important;
}

body.dark-mode .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

body.dark-mode .btn-primary:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

body.dark-mode .icon-cloud .icon {
    background-color: #2d2d2d;
}

body.dark-mode .titlec {
    color: var(--text-dark);
}

body.dark-mode .here {
    color: var(--text-dark);
}

body.dark-mode .simple-toggle-btn {
    border-color: var(--primary-color);
}

.fa-moon{
    color: var(--dark);
    font-size: 20px;
}

.fa-sun{
    color: var(--yellow);
    font-size: 20px;
}

body.dark-mode .card p {
    color: var(--card-light);
}
body.dark-mode .lc {
    color: var(--white);
}

body.dark-mode a {
    color: var(--white);
}

body.dark-mode li a {
    color: var(--bg-light);
}

body.dark-mode #copy-short-link-btn {
    color: var(--text-light);
}

body.dark-mode .card span {
    color: var(--text-dark);
}

body.dark-mode .lists span {
    color: var(--text-dark);
}


body.dark-mode .count-student span {
    color: var(--text-dark);
}

body.dark-mode #commentform textarea {
    background-color: var(--bg-dark);
    color: var(--text-dark);
}

body.dark-mode input {
    background-color: var(--bg-dark);
    color: var(--text-dark);
}

body.dark-mode li.page-item a {
    background-color: var(--bg-dark);
    color: var(--text-dark);
}

body.dark-mode .table-bordered th, .table-bordered td {
    color: var(--text-dark);
}

* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}