:root {
    --default-background-color: #202020;
    --default-text-color: #f0f0f0;
    --button-background-color: #505050;
    --button-text-color: #f0f0f0;
    --input-background-color: var(--button-background-color);
    --input-text-color: var(--button-text-color);
    --link-text-color: #2040ff;
}
@media (prefers-color-scheme: light) {
    :root {
        --default-background-color: #f0f0f0;
        --default-text-color: #202020;
        --button-background-color: #d0d0d0;
        --button-text-color: #303030;
        --link-text-color: #2040ff;
    }
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 100%;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

h1, h2, h3, h4, h5, h6, input, label, p, pre {
    user-select: auto;
    -webkit-user-select: text;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

html, body, #app {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: none;
    background-color: var(--default-background-color);
    color: var(--default-text-color);
    line-height: 1.4;
}

#app {
    /* TODO: this should be automatic! */
    display: flex;
    flex-direction: column;
}

input {
    color: var(--input-text-color);
    background-color: var(--input-background-color);
}


button, input[type=button], input[type=submit] {
    background-color: var(--button-background-color);
    color: var(--button-text-color);

    border: 1px solid var(--button-text-color);
    border-radius: 0.5em;
    padding: 0.25em;
}

button:active, input[type=button]:active, input[type=submit]:active {
    opacity: 0.8;
}

a {
    color: var(--link-text-color);
}