* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    -webkit-user-drag: none;
    user-select: none;
}

:root {
    --main: white;
    --low: hsl(0 0% 98% / 1);
    --mid: hsl(0 0% 96% / 1);
    --top: hsl(0 0% 98% / 1);
    --overlay: hsla(0, 0%, 60%, 0.27);
    --border: hsl(0deg 0% 0% / 5%);
    --overlaytop: hwb(0deg 60% 40% / 16%);
    --select: black;
    --subselect: hsl(0deg 0% 20%);
    --text: black;
    --subtext: hwb(0deg 20% 80% / 50%);
    --filter: invert(0);
    --filterinv: invert(1);
    --photoborder: 9px;
    --itemborder: 12px;
    --playerphotoborder: 9px;
    --trackphotoborder: 9px;
    @media screen and (max-width: 800px) {
        --itemborder: 12px;
        --photoborder: 24px;
        --playerphotoborder: 12px;
        --trackphotoborder: 18px;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --main: black;
        --low: hsl(0 0% 3% / 1);
        --mid: hsl(0 0% 6% / 1);
        --top: hsl(0 0% 9% / 1);
        --overlay: hsl(0deg 0% 0% / 27%);
        --overlaytop: hwb(0deg 40% 60% / 16%);
        --border: hsl(0deg 0% 0% / 4%);
        --text: white;
        --subtext: hwb(0 80% 100% / 1);
        --select: white;
        --subselect: hsl(0deg 0% 20%);
        --filter: invert(1);
        --filterinv: invert(0);
    }
}

.theme-light {
    --main: white;
    --low: hsl(0 0% 98% / 1);
    --mid: hsl(0 0% 96% / 1);
    --top: hsl(0 0% 98% / 1);
    --overlay: hsla(0, 0%, 60%, 0.27);
    --border: hsl(0deg 0% 0% / 5%);
    --overlaytop: hwb(0deg 60% 40% / 16%);
    --select: black;
    --subselect: hsl(0deg 0% 20%);
    --text: black;
    --subtext: hwb(0deg 20% 80% / 50%);
    --filter: invert(0);
    --filterinv: invert(1);
}

.theme-dark {
    --main: black;
    --low: hsl(0 0% 3% / 1);
    --mid: hsl(0 0% 6% / 1);
    --top: hsl(0 0% 9% / 1);
    --overlay: hsl(0deg 0% 0% / 27%);
    --overlaytop: hwb(0deg 40% 60% / 16%);
    --border: hsl(0deg 0% 0% / 4%);
    --text: white;
    --subtext: hwb(0 80% 100% / 1);
    --select: white;
    --subselect: hsl(0deg 0% 20%);
    --filter: invert(1);
    --filterinv: invert(0);
}

html, body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    max-width: 100%;
    margin: 0px;
    padding: 0px;
    background: var(--main);
    user-select: none;
    -webkit-user-drag: none;
    z-index: 0;
}