:root {
    --color-black: #000000;
    --color-dark-blue: #1d2b53;
    --color-dark-purple: #7e2553;
    --color-dark-green: #008751;
    --color-brown: #ab5236;
    --color-dark-grey: #5f574f;
    --color-light-grey: #c2c3c7;
    --color-white: #fff1e8;
    --color-red: #ff004d;
    --color-orange: #ffa300;
    --color-yellow: #ffec27;
    --color-green: #00e436;
    --color-blue: #29adff;
    --color-indigo: #83769c;
    --color-pink: #ff77a8;
    --color-peach: #ffccaa;
    --font-family: Anakron, Hack, 'Source Code Pro', monospace;
}

html, html.c1 {
    --color-background: var(--color-dark-grey);
    --color-color: var(--color-light-grey);
    --color-highlight: var(--color-dark-green);
    --color-selection: var(--color-pink);
    --color-highlight-selection: var(--color-red);
    --color-error: var(--color-dark-purple);
    --color-error-selection: var(--color-red);
    --color-verbose: var(--color-indigo);
    
    background-color: var(--color-background);
    color: var(--color-color);
    font-family: var(--font-family);
    box-sizing: border-box;
}

html.c2 {
    --color-background: var(--color-black);
    --color-color: var(--color-white);
    --color-highlight: var(--color-green);
    --color-selection: var(--color-indigo);
    --color-highlight-selection: var(--color-brown);
    --color-error: var(--color-red);
    --color-error-selection: var(--color-dark-purple);
    --color-verbose: var(--color-indigo);
}

html.c3 {
    --color-background: var(--color-light-grey);
    --color-color: var(--color-black);
    --color-highlight: var(--color-dark-green);
    --color-selection: var(--color-pink);
    --color-highlight-selection: var(--color-red);
    --color-error: var(--color-dark-purple);
    --color-error-selection: var(--color-red);
    --color-verbose: var(--color-indigo);
}

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

.hi::selection {
    color: var(--color-highlight-selection);
}

.err::selection {
    color: var(--color-error-selection);
}

body {
    width: 100%;
    max-width: min(40ch, 100vw);
    margin: 0 auto;
}

.hi {
    font-style: normal;
    color: var(--color-highlight);
}

.err {
    font-style: normal;
    color: var(--color-error);
}

#main {
    width: 100%;
    margin: 0 auto;
}

.io, .help {
    line-height: 1.11111111em;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.input {
    color: var(--color-color);
}

.input.current::after {
    content: '¦'
}

.hidden {
    display: none;
}

.verbose {
    color: var(--color-verbose);
}