/* this disables scrolling on the body */
html, body {
    position: fixed;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}
body {
    font-size: 2vw;
    font-family: -apple-system, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
    background-color: var(--theme-background-color, rgb(20, 22, 23));
    color: var(--theme-text-color, rgb(216, 210, 210));
}

/* light theme */
:root[data-theme="light"]{
    --theme-background-color: rgb(240, 240, 240);
    --theme-background-color-alt: rgb(216, 210, 210);
    --theme-background-color-alt-2: rgb(235, 235, 235);
    --theme-background-color-alt-3: rgba(20, 22, 23, .5);
    --theme-main-color: rgb(237, 85, 59);
    --theme-strong-alert-color: rgba(237, 85, 59, .8);
    --theme-weak-alert-color: rgba(237, 85, 59, .1);
    --theme-main-highlight-color: rgba(237, 85, 59, .25);
    --theme-secondary-highlight-color: rgba(237, 85, 59, .3);
    --theme-alert-color: rgba(240, 240, 240, .8);
    --theme-main-background-color: var(--theme-background-color-alt);
    --theme-text-color: rgba(49, 49, 49, 1);
    --theme-primary-text-color: rgb(240, 240, 240);
    --theme-primary-text-color-alt: rgba(240, 240, 240, .4);
    --theme-secondary-text-color: rgba(49, 49, 49, 1);
    --theme-tertiary-text-color: hsl(233 6% 56.1%);
    --theme-alt-text-color: hsl(233 6% 56.1%);
}

/* dark theme (default) */
:root {
    /* electric orange monochrome */
    --theme-background-color: rgb(20, 22, 23);
    --theme-background-color-alt: rgba(20, 22, 23, .8);
    --theme-background-color-alt-2: rgba(20, 22, 23, .5);
    --theme-background-color-alt-3: rgba(20, 22, 23, .5);
    --theme-main-color: rgb(237, 85, 59);
    --theme-strong-alert-color: rgba(237, 85, 59, .8);
    --theme-weak-alert-color: rgba(237, 85, 59, .1);
    --theme-main-highlight-color: rgba(237, 85, 59, .25);
    --theme-secondary-highlight-color: rgba(237, 85, 59, .3);
    --theme-alert-color: rgba(240, 240, 240, .8);
    --theme-main-background-color: rgb(36, 36, 36);
    --theme-text-color: rgb(216, 210, 210);
    --theme-primary-text-color: rgb(240, 240, 240);
    --theme-primary-text-color-alt: rgba(240, 240, 240, .4);
    --theme-secondary-text-color: rgba(49, 49, 49, 1);
    --theme-tertiary-text-color: rgba(49, 49, 49, .6);
    --theme-alt-text-color: hsl(233 6% 56.1%);
}