body.dark-mode {
    --headerColor: #f8fafc;
    --bodyTextColor: #cbd5e1;
    --bodyTextColorWhite: #f8fafc;
    --bodyBackgroundColorEven: #0f172a;
    --darkSurface: #020617;
    --darkSurfaceSoft: #111827;
    --darkSurfaceMuted: #1e293b;
    --darkBorder: #334155;
    --darkTextMuted: #94a3b8;
    --darkOverlay: rgba(15, 23, 42, 0.76);
    background-color: var(--darkSurface);
    color: var(--bodyTextColorWhite);
}

body.dark-mode p,
body.dark-mode li,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .title,
body.dark-mode .text,
body.dark-mode .li,
body.dark-mode .phone,
body.dark-mode .header,
body.dark-mode .nav-link,
body.dark-mode .number,
body.dark-mode .desc,
body.dark-mode .item-p,
body.dark-mode .label {
    color: var(--bodyTextColorWhite);
}

body.dark-mode #navigation:before,
body.dark-mode #navigation,
body.dark-mode .report-button,
body.dark-mode .report-form .form,
body.dark-mode #meet-team-221 .item,
body.dark-mode #side-by-side .li-picture,
body.dark-mode #side-by-side-reversed .li-picture {
    background-color: var(--darkSurfaceSoft);
}

body.dark-mode #navigation:before,
body.dark-mode #navigation,
body.dark-mode > .item,
body.dark-mode .report-button,
body.dark-mode .report-form .form {
    box-shadow: rgba(2, 6, 23, 0.45) 0 16px 40px;
}

body.dark-mode #navigation .toggle {
    background-color: var(--darkSurfaceMuted);
}

body.dark-mode #navigation .drop-ul {
    background-color: var(--darkSurfaceSoft);
    border-color: var(--primary);
    box-shadow: inset rgba(148, 163, 184, 0.08) 0 8px 10px;
}

body.dark-mode #navigation .ul-wrapper {
    background-color: var(--darkSurfaceSoft);
}

body.dark-mode #navigation .submenu-back .li-link {
    color: var(--bodyTextColorWhite);
}

body.dark-mode #navigation .li-link.drop-link:hover,
body.dark-mode .social-link:hover,
body.dark-mode #footer .social-link:hover {
    color: #fff;
}

body.dark-mode .social-link {
    background-color: var(--darkSurfaceMuted);
}

body.dark-mode .theme-toggle {
    background-color: var(--darkSurfaceMuted);
    color: var(--bodyTextColorWhite);
}

body.dark-mode .social-icon {
    filter: grayscale(1) brightness(1000%);
    opacity: 0.78;
}

body.dark-mode #services .topper,
body.dark-mode #blog .topper,
body.dark-mode #faq .topper {
    color: var(--secondaryLight);
}

body.dark-mode #services .background:before {
    background-color: var(--darkOverlay);
}

body.dark-mode #blog .item {
    background-color: var(--darkSurfaceSoft);
    border-color: var(--darkBorder);
}

body.dark-mode #blog .item:hover {
    border-color: var(--primary);
}

body.dark-mode #blog .mask {
    --maskBG: var(--darkSurfaceSoft);
    --maskBorder: var(--darkBorder);
}

body.dark-mode #blog .date,
body.dark-mode #blog .item-text {
    color: var(--darkTextMuted);
}

body.dark-mode #blog .bottom {
    border-top-color: var(--darkBorder);
}

body.dark-mode #blog .profile {
    border-color: var(--darkBorder);
    background-color: var(--darkBorder);
}

body.dark-mode #blog .name {
    color: var(--bodyTextColorWhite);
}

body.dark-mode #blog .wrapper {
    border-color: var(--darkBorder);
    background-color: var(--darkSurfaceMuted);
}

body.dark-mode #blog .arrow {
    filter: brightness(0) invert(1);
}

body.dark-mode .tear-background {
    --backgroundBG: var(--headerColor) !important;
}

body.dark-mode .pagination__link {
    background-color: var(--darkSurfaceSoft);
    border-color: var(--darkBorder);
    color: var(--bodyTextColorWhite);
}

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

body.dark-mode .pagination__link--current {
    background-color: var(--accentBlue);
    border-color: var(--accentBlue);
    color: #fff;
}

body.dark-mode .pagination__link--disabled,
body.dark-mode .pagination__link--ellipsis {
    background-color: var(--darkSurfaceMuted);
    border-color: var(--darkBorder);
    color: var(--darkTextMuted);
}

body.dark-mode .pagination__link--disabled:hover,
body.dark-mode .pagination__link--ellipsis:hover,
body.dark-mode .pagination__link--current:hover {
    background-color: inherit;
    border-color: inherit;
    color: inherit;
}

body.dark-mode #donations .item-text,
body.dark-mode #faq .faq-item,
body.dark-mode #footer .nav-link:before {
    border-color: var(--darkBorder);
}

body.dark-mode #donations .progress {
    background-color: var(--darkBorder);
}

body.dark-mode #donations .background:before {
    background-color: #020617;
}

body.dark-mode #footer,
body.dark-mode #footer .header,
body.dark-mode #footer .nav-link,
body.dark-mode #faq .button,
body.dark-mode #faq .button:before,
body.dark-mode #faq .button:after,
body.dark-mode .report-form .input,
body.dark-mode .report-form .input::placeholder,
body.dark-mode .report-form .closeReport,
body.dark-mode .report-form p {
    color: var(--bodyTextColorWhite);
}

body.dark-mode #footer {
    background-color: #020617;
}

body.dark-mode #footer .nav-li {
    color: var(--darkTextMuted);
}

body.dark-mode #faq .button:before,
body.dark-mode #faq .button:after {
    background-color: var(--bodyTextColorWhite);
}

body.dark-mode #footer .footer-contact__icon {
    background-color: var(--darkSurfaceMuted);
    color: var(--primary);
}

body.dark-mode #footer .footer-contact__line,
body.dark-mode #footer .footer-contact__meta {
    color: var(--darkTextMuted);
}

body.dark-mode #footer .footer-hours__day {
    color: var(--bodyTextColorWhite);
}

body.dark-mode #footer .footer-hours__time {
    color: var(--darkTextMuted);
}

body.dark-mode #faq .faq-item.active {
    border-color: var(--primaryLight);
}

body.dark-mode #faq .left:before,
body.dark-mode #donations .icon-wrapper:before,
body.dark-mode #side-by-side .li-picture:before,
body.dark-mode #side-by-side-reversed .li-picture:before {
    opacity: 0.18;
}

body.dark-mode .report-form {
    background-color: rgba(2, 6, 23, 0.82);
}

body.dark-mode .report-form .closeReport {
    background: var(--darkSurfaceMuted);
}

body.dark-mode .report-form .input {
    background-color: var(--darkSurface);
    border: 1px solid var(--darkBorder);
}

body.dark-mode .report-form .input::placeholder,
body.dark-mode #donations .number,
body.dark-mode #donations .desc,
body.dark-mode #footer .nav-li,
body.dark-mode .report-form p {
    color: var(--darkTextMuted);
}

body.dark-mode .report-form .button-solid:before {
    background: #fff !important;
}

body.dark-mode .report-form .button-solid:hover {
    color: var(--primary);
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #content-page {
        background-color: var(--darkSurface);
    }

    body.dark-mode #content-page .image-group::after {
        background: var(--darkSurfaceMuted);
    }

    body.dark-mode section.even {
        background: var(--darkSurface);
    };

    section:not(.even) {
        background: var(--accentBlue);
    }
    body.dark-mode #content-page .title,
    body.dark-mode #content-page .text,
    body.dark-mode #content-page h2,
    body.dark-mode #content-page h3,
    body.dark-mode #content-page h4,
    body.dark-mode #content-page h5,
    body.dark-mode #content-page h6,
    body.dark-mode #content-page li,
    body.dark-mode #content-page p {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #content-page .color,
    body.dark-mode #content-page a {
        color: var(--primaryLight);
    }
    body.dark-mode #content-page p,
    body.dark-mode #content-page li {
        color: #ebebeb;
    }
    body.dark-mode #content-page .picture {
        /*border-color: var(--darkBorder);*/
        background-color: var(--primary);
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #contact-form {
        background-color: var(--darkSurface);
    }
    body.dark-mode #contact-form .topper {
        color: var(--secondary);
    }
    body.dark-mode #contact-form .title,
    body.dark-mode #contact-form .text,
    body.dark-mode #contact-form .label,
    body.dark-mode #contact-form .link {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #contact-form .text {
        opacity: 0.8;
    }
    body.dark-mode #contact-form .input {
        background-color: rgba(255, 255, 255, 0.1);
        color: var(--bodyTextColorWhite);
        border-color: rgba(255, 255, 255, 0.1);
    }
    body.dark-mode #contact-form .input:hover {
        border-color: var(--bodyTextColorWhite);
    }
    body.dark-mode #contact-form .input::placeholder {
        color: #fff;
        opacity: 0.5;
    }
    body.dark-mode #contact-form .form-alert {
        background-color: rgba(34, 197, 94, 0.12);
        border-color: rgba(34, 197, 94, 0.35);
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #contact-form .form-alert--error {
        background-color: rgba(239, 68, 68, 0.12);
        border-color: rgba(239, 68, 68, 0.35);
    }
    body.dark-mode #contact-form .field-error {
        color: #fca5a5;
    }
    body.dark-mode #contact-form .header {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #contact-form .contact-detail__icon {
        background-color: var(--darkSurfaceMuted);
        color: var(--primary);
    }

    body.dark-mode #donations .item {
        background: var(--darkSurfaceSoft);
    }
}