:root {
    --body-background: radial-gradient(80% 75% at 70% 40%, hsl(200, 100%, 20%) 0%, hsl(195, 100%, 15%) 100%) no-repeat fixed center;
    --body-dither: rgba(255, 255, 255, 0.3);
    --main-background: transparent;
    --background-success: #005e00;
    --background-error: #8a0000;
    --font: 'Quicksand', Verdana, sans-serif;
    --text-color: white;
    --text-color-secondary: #ccc;
    --text-color-link: lightblue;
    --text-color-warning: #ffc891;
    --border-radius: .5rem;
    --gap: 1rem; /* used for space between large elements like images, boxes, and large buttons */
    --smallgap: 4px; /* used for space between small elements like buttons */
    --background-color: rgba(20, 20, 20, 0.4);
    --background-color-window: rgba(20, 20, 20, 0.6);
    --background-color-solid: rgba(20, 20, 20, 1);
    --background-color-active: rgba(255, 255, 255, 0.8);
    --background-color-hover: rgba(255, 255, 255, 0.15);
    --box-shadow: .3rem .3rem 1rem rgba(0, 0, 0, 0.3);
    --separator-color: rgba(192, 192, 192, 0.3);
    --controls-box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.3);
    --controls-box-shadow-hover: 0 0 0 1px rgba(255, 255, 255, 0.3);
    --controls-box-shadow-active: 0 0 0 1px rgba(192, 192, 192, 0.5);
    --controls-box-shadow-focus: 0 0 0 1px rgba(192, 192, 192, 0.5);
    --header-background: black;
    --header-color: white;
    --seek-bar-color: #ccc;
    --transition-duration: 0.2s;
    --table-background-color: var(--background-color);
    color-scheme: dark;
}

@media screen and (max-width: 900px) {
    :root {
        --gap: .8rem;
    }
}

@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 400;
    src: url('/static/font/quicksand-v30-latin-regular.woff2') format('woff2');
}