:root {
    --h: 5vh;
    --back: #424343;
    --back-sub: #666767;
    --back-bright: #888989;
    --green: #56982b;
    --tall: calc(100vh - (1 * var(--h)));
    --wide: calc(100vw - 10px);
    --width: 100vw;

    /* COPYRIGHT */
    --owner: 'DEDON GmbH';
    --developer: 'Janik Driehaus';
    --version: 'v0.5';
}

html {
    background: var(--back);
    max-width: var(--wide);
    overflow-x: hidden;
}

::-webkit-scrollbar {
    width: 10px;
}

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

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

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

@supports(scrollbar-color: red red) {
    * {
        scrollbar-color: var(--back-sub) var(--back);
        scrollbar-width: 10px;
    }
}

/* MEDIA QUERIES */
@media screen and (max-width: 949px) {
    :root {
        --tall: calc(100vh - (1 * var(--h)));
        --wide: 100vw;
    }
}

@media screen and (min-width: 950px) {
    :root {
        --tall: calc(100vh - (2 * var(--h)));
    }
}