:root {
    --fg: #DDD;
    --fg-alt: #888;
    --bg: #232221;
    --bg-alt: #2C2B2AFA;
    --bg-action: #111;
    --bg-action-alt: #303030;
    --border: #333;
    --border-alt: #444;
    font-size: 16px;
}
@media (max-resolution: 98dpi) {
    *::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        background: var(--bg-alt);
    }
    *::-webkit-scrollbar-thumb {
        background: var(--bg-action-alt);
    }
}
html, body {
    border: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    padding: .5em;
    font-size: 1em;
    font-family: monospace;
    color: var(--fg);
    background-color: var(--bg);
}
body * {
    font-family: inherit;
}
button, input, select, textarea {
    font-size: inherit;
    padding: .5em;
    color: var(--fg);
    border: 1px solid #48F;
    background-color: #2489;
    outline: none;
    box-sizing: border-box;
}
input::placeholder {
    color: #57B;
}
input[type='range'] {
    padding: 0;
}
button {
    color: #F90;
    background-color: var(--bg-action);
    border-color: var(--border);
    cursor: pointer;
    user-select: none;
}
button:hover {
    border-color: var(--border-alt);
}
button:focus {
    border-color: #F90B;
}
button:active {
    background-color: var(--bg-alt);
}
input:focus, select:focus, textarea:focus {
    border-color: #8AF;
}
select[multiple], select[size] {
    min-height: 2.5em;
    padding: 0;
}
select:not([multiple]):not([size]) option {
    background-color: #248;
}
option {
    padding: .25em .5em;
}
button[disabled], input[disabled], select[disabled], textarea[disabled] {
    color: var(--fg-alt) !important;
    border-color: var(--border) !important;
    background-color: var(--bg-action-alt) !important;
    cursor: not-allowed !important;
}