@media (prefers-color-scheme:light) {
    :root {
        --color-primary-bg: #EDE0D4;
        --color-primary-bg-dark: #d9c6b3;

        --color-primary-fg: #85440d;
        --color-primary-fg-dark: #7F5539;

        --color-bg: #fff;
        --color-fg: #000;
        --color-bg-hover: #50505012;

        --color-border: #e9e9e9;

        --color-panel-bg: #efefef;
        --color-panel-bg-info: #e6f5f5;
        --color-panel-fg-info: #1b4c4c;
        --color-panel-bg-warning: #f9f4ec;
        --color-panel-fg-warning: #684b1c;

        --color-selection-bg: #ffffd5;
        --color-selection-fg: #535219;
    }
}

@media (prefers-color-scheme:dark) {
    :root {
        --color-primary-bg: #151210;
        --color-primary-bg-dark: #000000;

        --color-primary-fg: #fcdec3;
        --color-primary-fg-dark: #cd926a;

        --color-bg: #36302b;
        --color-fg: #ede0d4;
        --color-bg-hover: #50505012;

        --color-border: #554f48;

        --color-panel-bg: #efefef;
        --color-panel-bg-info: #e6f5f5;
        --color-panel-fg-info: #1b4c4c;
        --color-panel-bg-warning: #f9f4ec;
        --color-panel-fg-warning: #684b1c;

        --color-selection-bg: #ede0d4;
        --color-selection-fg: #1b150f;
    }
}

body {
    background: var(--color-bg);
}

body,
header a {
    color: var(--color-fg);
} 

a {
    color: var(--color-primary-fg);
}

a:hover,
nav li a.active {
    color: var(--color-primary-fg-dark);
}

article.reveal::after {
    background-image: linear-gradient(0deg, var(--color-bg), transparent);
}

header::after  {
    background-image: linear-gradient(180deg, var(--color-bg), transparent);
}

header,
.card {
    background-color: var(--color-bg);
}

.button.primary,
.card:hover {
    background-color: var(--color-primary-bg);
    color: var(--color-primary-fg);
}

.card:hover {
    border-color: var(--color-primary-bg);
}

.button.primary:hover {
    background-color: var(--color-primary-bg-dark);
}

.card, hr {
    border-color: var(--color-border);
}

li.dropdown ul li:hover {
    background-color: var(--color-bg-hover);
}

.logo span {
    color: var(--color-primary-fg);
}

.panel {
    background: var(--color-panel-bg);
}

.panel.warning {
    background: var(--color-panel-bg-warning);
    color: var(--color-panel-fg-warning);
}

.panel.info {
    background: var(--color-panel-bg-info);
    color: var(--color-panel-fg-info);
}

button {
    background-color: transparent;
}

::selection,
mark {
    background: var(--color-selection-bg);
    color: var(--color-selection-fg);
}

html::-webkit-scrollbar-track {
    border: 7px solid var(--color-bg);
}

html::-webkit-scrollbar-track:hover {
    background-color: var(--color-bg-hover);
}

html::-webkit-scrollbar-thumb {
    background-color: var(--color-primary-bg-dark);
}

html::-webkit-scrollbar-thumb:window-inactive {
    background-color: var(--color-primary-bg);
}

html::-webkit-scrollbar-track {
    background-color: var(--color-bg);
}

html::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-primary-bg);
}