/* default for no-preference */
:root {
    --color: #333;
    --background: #f7f7f7;
    --cardbgcolor: #fff;
    --cardtitlecolor: #333333;
    --navbarcolor: #333333;
    --img-default-filter: none;
    --img-hover-filter: none;
    --btn-bg-color:#f5f5f5;
    --btn-color: #333;
    --btn-hover-color: #eee;
    --link-color: #333;
}
/* Light mode */
@media (prefers-color-scheme: light) {
    :root {
        --color: #333333;
        --background: #f7f7f7;
        --cardbgcolor: #fff;
        --cardcolor: #333;
        --cardtitlecolor: #333333;
        --navbarcolor: #333333;
        --img-default-filter: none;
        --img-hover-filter: none;
        --link-color: #333;

    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --color: #bcbcbc;
        --background: #2c2a2a !important;
        --cardbgcolor: #454545;
        --cardcolor: #bcbcbc;
        --cardtitlecolor: #bcbcbc;
        --navbarcolor: #bcbcbc;
        --img-default-filter: grayscale(100%);
        --img-hover-filter: none;
        --btn-bg-color:#2c2a2a;
        --btn-color: #bcbcbc;
        --btn-hover-color: #333;
        --link-color: #bcbcbc


    }
}

html {
    background: var(--background);
    color: var(--color);
}
body > .footer, body > .navbar {
    background-color: var(--cardbgcolor);
    color: var(--cardcolor);
}

.card {
    background-color: var(--cardbgcolor);
    color: var(--cardcolor);
}
.card .card-image img,
img.thumbnail {
    filter: var(--img-default-filter);
}
.card .card-image img:hover,
img.thumbnail:hover{
    filter: var(--img-hover-filter);
}

.card .title {
    color: var(--color) !important;
}
.navbar-dropdown {
    background-color: var(--background);    
}
.card .content,
/*.card .title a{*/
/*    color: var(--cardtitlecolor) !important;*/
/*}*/
.pagination .pagination-link:not(.is-current),
.pagination .pagination-previous,
.pagination .pagination-next {
    background-color: var(--cardbgcolor);
    color: var(--cardcolor);
}

.navbar-item, .navbar-link,
.navbar-main .navbar-item .sub-menu
{
    color: var(--navbarcolor);

}
.has-link-black-ter {
    color: var(--cardtitlecolor) !important;
}



.button {
    background-color: var(--btn-bg-color) !important;
    color: var(--btn-color) !important;
}

.button:hover {
    background-color: var(--btn-hover-color) !important;
}
.level .level-item.button {
    background-color: var(--cardbgcolor) !important;
    border-color: var(--cardbgcolor) !important;
    color: var(--color) !important;
}

.menu-list .level {
    color: var(--link-color);
}



.menu-list a:hover {
    background-color: var(--background);
    opacity: 0.6;
    color: var(--link-color);
}
.tag:not(body) {
    background-color: var(--background) !important;
    color: var(--color) !important;
}
h1,
h2,
h3,
h4,
h5,
h6,
h7,
strong {
    color: var(--color) !important;
}

.is-active a{
    color: var(--color) !important;
}

a.navbar-item:hover {
    background-color: var(--cardbgcolor);
    color: #3273dc;
}