:root {
    font-size: 16px;
}

* {
    box-sizing: border-box;
    font-family: monospace;
    margin: 0;
}

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

body {
    background-color: var(--background-color);
    color: var(--text-color);
    margin: 0 0.5rem;

    --button-text-color: var(--text-color);
    --highlight-text-color: var(--text-color);
    --input-text-color: var(--text-color);
    --selection-background-color: var(--highlight-background-color);
    --selection-text-color: var(--highlight-text-color);
    --selection-highlight-background-color: var(--background-color);
    --selection-highlight-text-color: var(--text-color);
}

body, body.theme-classic {
    --background-color: white;
    --button-background-color: #E9E9ED;
    --border-color: #8F8F9D;
    --input-background-color: white;
    --text-color: black;
    --highlight-background-color: rgb(150, 202, 211);
}

body.theme-goth {
    --purple: #a696d3;

    --background-color: black;
    --border-color: white;
    --text-color: white;

    --button-background-color: black;
    --button-text-color: white;
    --input-text-color: black;
    --input-background-color: white;

    --highlight-text-color: black;
    --highlight-background-color: var(--purple);

    --selection-highlight-text-color: white;
}

body.theme-toilet-bowl {
    --pee: #fffbc4;
    --poo: rgb(78, 60, 51);

    --background-color: white;
    --button-background-color: #d3c2bb;
    --border-color: var(--poo);
    --input-background-color: white;
    --text-color: var(--poo);
    --highlight-background-color: var(--pee);

    --selection-highlight-background-color: var(--poo);
    --selection-highlight-text-color: var(--pee);
}

body.theme-british-sky {
    --background-color: #E9E9ED;
    --button-background-color: white;
    --border-color: black;
    --input-background-color: white;
    --text-color: black;
    --highlight-background-color: white;

    --selection-background-color: #f2f3ae;
    --selection-highlight-background-color: #f2f3ae;
}

button, select {
    background-color: var(--button-background-color);
    border: 1px solid var(--border-color);
    color: var(--button-text-color);
}

button:focus, input:focus, select:focus {
    outline: 1px solid var(--highlight-background-color);
}

input {
    background-color: var(--input-background-color);
    border: 1px solid var(--border-color);
    color: var(--input-text-color);
}