@media (prefers-color-scheme: dark) {
    /* utilities */
    :root {
        --colorBg : #1c1d1d;
        --color: #F8F9F9;
    }

    .green .section-header h2{
        color: var(--colorBg);
    }


    /* newsletter */

    .newsletter > *{
        --newsLetterBg: #5B5C5C;
        --newsLetterColor: #DADBDB;
    }

    /* pills */

    .pill{
        background-color: #5B5C5C; 
        color: #B7B8B7;
    }
    .pill.selected{
        color: var(--color);
        border-color:  var(--colorPrimary);
    }
    .green .pill.selected{
        color: var(--color);
    }
    .article-header-categories .pill{
        background-color: var(--colorPrimary); 
        color: var(--color);   
    }


    /* header */

    .breaking-wrapper{
        background-color: #EC89D2;
        color: #7E0090;
    }

    .breaking-wrapper > h2,
    .breaking-card--title{
        color: #fff;
    }

    /* article */

    .article-author,
    .article-wrapper figure > figcaption,
    .articles-related .card--time,
    .articles-related .related-tags--header h4{
        color: #979898!important;
    }

    .article-date,
    .article-wrapper figure > figcaption span:last-of-type{
        color: #5b5c5c!important;
    }

    .article-listen-btn{
        color: var(--color)!important;
    }
    .article-body a{
        color: #EC89D2!important;
    }

    /* section-side */

    .section-side .card--time{
        color: #979898;
    }

    /* section header */

    .green .section-header h2, 
    .black .section-header h2{
        color: #fff;
    }
    .lightgreen .section-header h2{
        color: var(--colorPrimary);
    }

    /* cards */

    .blog .card--title{
        color: #000;
    }
    .blog .card--title,
    .hero-card .cover .card--time,
    .hero-card .card--title{
        color: #fff;
    }

    .blog.card{
        background-color: var(--colorPrimary);
    }
    .blog .card--author{
        background-color: #b3dacd;
        color: #000;
    }

    @media screen and (max-width: 800px) {
        .has-hero-card > div:first-of-type .card--info{
            color: #fff;
        }
    }

    /* page */

    .section-category .major-card .card--time,
    .section-category .major-card .card--title{
        color: #fff;
    }

    /* page life */

    
    body:has(> main.page-life){
        background-color: var(--colorLife);
    }
    body:has(.page-life) .side-menu{
        background-color: var(--colorPrimary);    
    }
    body:has(.page-life) .card--lead,
    body:has(.page-life) .side-menu-item{
        color: #fff;
    }
    body:has(.page-life) .side-menu .close-side-btn > span{
        border-color: #fff;
    }
    body:has(.page-life)  .social ul li{
        filter: brightness(0) invert(1);
    }
    .page-life .section-category .section-header{
        color: var(--colorLifeLight);
        border-color: var(--colorLifeLight);
    }

    .page-life .section-tags ul{
        border-color: var(--colorLifeLight);
    }

    body:has(.page-life) .pill{
        --pillColor : var(--colorLifeLight);
        background-color: var(--colorLife);
    }
    body.article-life .related-tags--list .pill{
        background-color: transparent;
        color:#fff;
    }
    body.article-life .related-tags--list .pill.selected{
        background-color: var(--colorLife);
        border-color: #fff;
    }
    .page-life .all-btn{
        background-color: var(--colorLifeLight);
        color: var(--colorLife);
    }
    .article-life .all-btn{
        background-color: var(--colorLife);
        color: #fff;
    }

    /* author */

    .signature-author-details{
        color: #fff;
    }

    /* single blog */

    .article-header .blogger-header{
        background-color: var(--colorPrimary);
        color: #fff
    }
    .article-header .blogger-header .article-author{
        background-color: #b3dacd;
        color: #000!important;
    }

    /* life single */

    .article.article-life{
        background-color: #000!important;;
    }
    .article.article-life .comment-btn{
        color: #fff;
    }
}
