:root {
    /* Mostly from FlatWhite theme */
    /* --bg-nullary: hsl(30, 30%, 98%); */
    --bg-nullary: #E4DDD2;
    --bg-primary: #F6F3EE;
    --bg-secondary: #E4DDD2; 
    --fg-primary: #5F5B53;
    --bd-primary: #5F5B53;

    --bg-red: #F7C9C3;
    --bg-orange: #F7E0C3;
    --bg-yellow: #F4EFC2; /* manually picked */
    --bg-green: #E2E9C1;
    --bg-cyan: #D2EBE3;
    --bg-blue: #DDE4F2;
    --bg-violet: #F1DDF1;

    --fg-red: var(--fg-primary);
    --fg-orange: var(--fg-primary);
    --fg-yellow: var(--fg-primary);
    --fg-green: var(--fg-primary);
    --fg-cyan: var(--fg-primary);
    --fg-blue: var(--fg-primary);
    --fg-violet: var(--fg-primary);
}

@media(prefers-color-scheme: dark) {
    :root {
        --bg-nullary: #1c1717;
        --bg-primary: #2B2525;
        --bg-secondary: #362F2F;
        --fg-primary: #FDF1F3;
        --bd-primary: #908E8F;

        --bg-red: var(--bg-primary);
        --bg-orange: var(--bg-primary);
        --bg-yellow: var(--bg-primary);
        --bg-green: var(--bg-primary);
        --bg-blue: var(--bg-primary);
        --bg-cyan: var(--bg-primary);
        --bg-violet: var(--bg-primary);

        --fg-red: #ED6C89;
        --fg-orange: #EE9D70;
        --fg-yellow: #F7D877;
        --fg-green: #ADD47E;
        --fg-cyan: #8DD4E0;
        --fg-blue: #7E99F1;
        --fg-violet: #A79CE9;
    }
}

@media print {
    :root {
        --bg-nullary: white;
        --bd-primary: black;
        --fg-primary: black;
        --bg-primary: white;
        --bg-secondary: white;
    }
}

body { 
    padding: 0 0.5em;
    font-size: 14px;
    font-family: system-ui, 
                 -apple-system, BlinkMacSystemFont, 
                 "Segoe UI", 
                 "Roboto", 
                 "Oxygen", 
                 "Ubuntu", 
                 "Cantarell", 
                 "Fira Sans", 
                 "Droid Sans", 
                 "Helvetica Neue", 
                 Arial, sans-serif;
    color: var(--fg-primary);
    background-color: var(--bg-nullary);
    min-height: calc(130vh);
}

.pointer:hover {
    cursor: pointer;
}

.mono {
    font-family: ui-monospace, 
                 Menlo, Monaco, 
                 "Cascadia Mono", "Segoe UI Mono", 
                 "Roboto Mono", 
                 "Oxygen Mono", 
                 "Ubuntu Monospace", 
                 "Source Code Pro",
                 "Fira Mono", 
                 "Droid Sans Mono", 
                 "Courier New", monospace;
}

hr {
    height: 0;
    border-bottom: 0;
    border-right: 0;
    border-left: 0;
    border-top: 1px solid var(--bd-primary);
    width: 100%;
}

/* ---------------------------- */

section {
    background: var(--bg-primary);
    border: 1px solid var(--bd-primary);
    border-radius: 5px;
    padding: 10px;
    min-width: 200px;
    max-width: 80em;

    min-height: 300px;
}

h1 {
    margin: 0;
}

.padding {
    padding: 5px 10px;
}

.cell {
    background-color: var(--bg-primary);
    border: 1px solid var(--bd-primary);
    border-radius: 5px;
}

.right {
    text-align: right;
}

.center {
    text-align: center;
}

button {
    font-size: 1em;
    color: var(--fg-blue);
    background: var(--bg-blue);
    border: 1px solid var(--fg-blue);
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    width: 100%;
}

select {
    appearance: none;
    font-size: 1em;
    color: var(--fg-blue);
    background: var(--bg-blue);
    border: 1px solid var(--fg-blue);
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    width: 100%;
}

input[type=number], input[type=text] {
    appearance: none;
    color: var(--fg-primary);
    background-color: var(--bg-secondary);
    border: 1px solid var(--bd-primary);
    border-radius: 5px;
    font-size: 1em;
    padding: 5px;
}

input[type=number] {
    width: 4em;
}

input:focus {
    outline: 2px solid var(--fg-green);
}

input:focus:not(:invalid), .points-extra {
    outline-color: var(--fg-green);
    border-color: var(--fg-green);
    background-color: var(--bg-green);
}

input:invalid, select:invalid, .points-exceeded {
    outline-color: var(--fg-red);
    border-color: var(--fg-red);
    background-color: var(--bg-red);
}

.destructive {
    color: var(--fg-orange);
    border-color: var(--fg-orange);
    background-color: var(--bg-orange);
}