:root {
    color-scheme: light;
    --background-color: #fff;
    --color-white: var(--white-color);
    --color-light-gray: var(--light-gray-color);
    --color-lighter-gray: #fafafa;
    --color-mid-gray: var(--mid-gray-color);
    --color-dark-gray: var(--dark-gray-color);
    --color-darkgrey: var(--dark-gray-color);
    --color-darker-gray: var(--darker-gray-color);
    --color-black: var(--black-color);
    --color-primary-text: var(--primary-text-color);
    --color-secondary-text: var(--secondary-text-color);
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --background-color: #000;
        --surface-color: #000;
        --primary-text-color: #e7edf2;
        --secondary-text-color: #98a3ad;
        --light-gray-color: #141414;
        --mid-gray-color: #2b2b2b;
        --dark-gray-color: #8794a0;
        --darker-gray-color: #f3f7fa;
        --color-lighter-gray: #121212;
    }

    html,
    body,
    .site,
    .site-content {
        background-color: var(--background-color);
    }

    .gh-head,
    .gh-foot,
    .player,
    .gh-dropdown {
        background-color: var(--surface-color);
    }

    .gh-head a,
    .gh-head .nav a,
    .gh-head .gh-head-link,
    .gh-head .gh-search,
    .gh-head .gh-icon-btn,
    .gh-head .nav-more-toggle,
    .gh-head .gh-head-logo,
    .gh-head .gh-head-logo a,
    .gh-head .nav-instagram a::before,
    .gh-head .nav-threads a::before,
    .gh-head .nav-facebook a::before {
        color: var(--primary-text-color) !important;
    }

    .gh-head .gh-burger::before,
    .gh-head .gh-burger::after {
        background-color: var(--primary-text-color) !important;
    }

    .site-content h1,
    .site-content h2,
    .site-content h3,
    .site-content h4,
    .site-content h5,
    .site-content h6,
    .site-content .post-title,
    .site-content .post-title a,
    .site-content .term-name {
        color: var(--primary-text-color) !important;
    }

    .site-content p a,
    .site-content li a {
        color: #9fc3ff !important;
    }

    .site-content p a:hover,
    .site-content li a:hover {
        color: #c6dcff !important;
    }

    .is-head-stacked .gh-head-menu::before,
    .is-head-stacked .gh-head-menu::after {
        background-color: var(--mid-gray-color);
    }
}