:root {
    --text-color: #eaeaea;
    --foreground-color: #212121;
    --background-color: #303030;
    --article-background-color:hsl(0 0% 8% / 1);
    --link-color: hsl(50 100% 50% / 1);
    --seperator-color: #444444;

    --scrollbar-background : #212121;
    --scrollbar-border: #303030;
    --scrollbar-background-hover: #888888;
    --scrollbar-background-active: #888888;
    --scrollbar-track: #444444;
    --scrollbar-track-hover: #444444;

    --code-color: #eaeaea;
    --code-background-color: #212121;
    --code-border-color: #7e7e7e;
}

@media (prefers-color-scheme: light){
    :root {
        --text-color: #3a3a3a;
        --foreground-color: #f0f0f0;
        --background-color: #ffffff;
        --article-background-color:hsl(0 0% 98% / 1);
        --link-color: hsl(40 100% 50% / 1);
        --seperator-color: #888888;

        --scrollbar-background : #dddddd;
        --scrollbar-border: #dddddd;
        --scrollbar-background-hover: #888888;
        --scrollbar-background-active: #888888;
        --scrollbar-track: #f0f0f0;
        --scrollbar-track-hover: #f0f0f0;

        --code-color: #3a3a3a;
        --code-background-color: #dddddd;
        --code-border-color: #919191;
    }
}


::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

 ::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
}

 ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-background);
    border: 0px none var(--scrollbar-border);
    border-radius: 100px;
}

 ::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-background-hover);
}

 ::-webkit-scrollbar-thumb:active {
    background: var(--scrollbar-background-active);
}

 ::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border: 0px solid var(--scrollbar-border);
    border-radius: 100px;
}

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

 ::-webkit-scrollbar-track:active {
    background: var(--scrollbar-track-hover);
}

 ::-webkit-scrollbar-corner {
    background: transparent;
}