/* --- DARK MODE --- */

body {
    transition: background-color 0.4s ease, color 0.4s ease;
}

html.dark-mode body {
    background-color: #1a1a1a; 
    color: #f1f1ff; 
}

html.dark-mode .mobile-menu-header,
html.dark-mode .mobile-menu-panel,
html.dark-mode .next-post-paku-bridge,
html.dark-mode .mobile-search-panel {
    background-color: #1a1a1a;
}

html.dark-mode .mobile-menu-header img {
    filter: brightness(0) invert(1);
}

html.dark-mode .divider {
    background-color: #333;
}

html.dark-mode .main-navigation .sub-menu {
    background-color: #1a1a1a;
    border: 1px solid#333;
    border-top: 0;
}

html.dark-mode .main-navigation .sub-menu li,
html.dark-mode .post-card,
html.dark-mode .injected-rubrik-column,
html.dark-mode .popular-list-item,
html.dark-mode .mobile-menu-primary > ul > li,
html.dark-mode .related-posts {
    border-color: #333;
}

html.dark-mode a {
    color: #eee;
}

html.dark-mode .page-numbers,
html.dark-mode .tags-links a,
html.dark-mode .page-links .post-page-numbers {
    color: #333;
}

html.dark-mode .page-links .post-page-numbers.current,
html.dark-mode .page-numbers.current,
html.dark-mode .return-home-404 a,
html.dark-mode .tags-links a:hover {
    color: #fff;
}

html.dark-mode .slider-random-catlink a,
html.dark-mode .card-cat a,
html.dark-mode .popular-list-meta a,
html.dark-mode .sticky-card-cat a {
    color: orangered;
}

html.dark-mode .card-excerpt p,
html.dark-mode .sticky-card-excerpt p,
html.dark-mode .mobile-menu-primary .sub-menu li a {
    color: #ccc;
}

html.dark-mode .random-slider-section,
html.dark-mode .slider-container-inner,
html.dark-mode .main-featured-post article,
html.dark-mode .list-small-posts article,
html.dark-mode .rubrik-list-wrapper article {
    border-color: #333;
}

html.dark-mode .mobile-menu-panel h4 {
    color: #aaa;
}

html.dark-mode .utility-icon,
html.dark-mode .mobile-icon {
    color: #fff;
}

html.dark-mode .tags-links a {
    background-color: #333;
    color: #eee;
}

html.dark-mode .big-number {
    color: #666;
}

html.dark-mode .content-box h1 {
    color: #fff;
}

html.dark-mode .content-box p {
    color: #ccc;
}

html.dark-mode .paku-divider span {
    background-color: #1a1a1a;
}

html.dark-mode .paku-divider {
    border-color: #333;
}

html.dark-mode .paku-btn-nav {
    background-color: #333;
}

html.dark-mode .system-share .material-icons-outlined {
    color: #eee;
}

html.dark-mode .v2-empty-message a {
    background-color: #333;
}

html.dark-mode .social-icons-list a:hover {
    color: #fff;
}

html.dark-mode .entry-content p {
    color: #ccc;
}