:root {
    --background-color: #fafafa;
    --deep-background-color: #fff;
    --text-color: #333;
    --light-text-color: #777;
    --very-light-text-color: #aaa;
    --border-color: #e9e9e9;
    --highlight-color: #855dda;
    --highlight-text-color: #fefefe;
    --red-color: #e00000;
    --default-color: #855dda;
    --blue-color: #5d7ed9;
    --green-color: #459757;
    --orange-color: #f54e00;
    --yellow-color: #fcd535;

    --mask: rgba(255, 255, 255, 0.15);

    --full-height: 100%;

    --border-radius: 8px;
    --border-radius-small: 6px;
}

/* @media (prefers-color-scheme: dark) {
    :root {
        --background-color: #0f0f0f;
        --deep-background-color: #000;
        --text-color: #fafafa;
        --light-text-color: #bbb;
        --very-light-text-color: #666;
        --border-color: #1f1f1f;
        --highlight-text-color: #fefefe;
        --mask: rgba(0, 0, 0, 0.15);
    }
} */

/*Font*/
html, body, input, textarea, button {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/*Reset*/
input[type="text"],
input[type="password"],
input[type="submit"],
textarea,
button {
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

/*Top Level*/
html {
    height: var(--full-height);
    touch-action: none;
}
body {
    height: 100%;
    max-width: 1000px;
    background: var(--deep-background-color);
    color: var(--text-color);
    margin: 0 auto;
    padding: 0;
    touch-action: none;
}