html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body:after {
    background: url(/scenic.png);
    content: "";
}

@media only screen and (max-width: 734px) {
    html,
    body {
        overflow: auto;
    }
}

* {
    outline: none;
    font-size: 11px;
    font-family: verdana, sans-serif;
    -webkit-user-select: none;
    user-select: none;
}

.chrome,
.firefox {
    --border-color-light: hsl(
        var(--chrome-h),
        var(--chrome-s),
        calc(var(--chrome-l) + 10%)
    );
}

:root {
    --chrome-depth: 2px;
    --spacing: calc(var(--chrome-depth) * 3);

    --chrome-h: 0;
    --chrome-s: 0%;
    --chrome-l: 85%;
    --chrome-hsl: hsl(var(--chrome-h), var(--chrome-s), var(--chrome-l));

    --border-color-light: hsl(
        var(--chrome-h),
        var(--chrome-s),
        calc(var(--chrome-l) - 20%)
    );

    --border-color-dark: hsl(
        var(--chrome-h),
        var(--chrome-s),
        calc(var(--chrome-l) - 5%)
    );

    --border-color-darker: hsl(
        var(--chrome-h),
        var(--chrome-s),
        calc(var(--chrome-l) - 25%)
    );

    --title-h: 240;
    --title-s: 65%;
    --title-l: 25%;
    --title-hsl: hsl(var(--title-h), var(--title-s), var(--title-l));

    --window-title-height: 20px;
    --window-title-background: var(--title-hsl);
    --window-title-background-inactive: hsl(
        var(--chrome-h),
        var(--chrome-s),
        calc(var(--chrome-l) - 40%)
    );

    --wallpaper-h: var(--title-h);
    --wallpaper-s: calc(var(--title-s) - 40%);
    --wallpaper-l: calc(var(--title-l) + 40%);
    --wallpaper-hsl: hsl(
        var(--wallpaper-h),
        var(--wallpaper-s),
        var(--wallpaper-l)
    );

    --knob-h: var(--title-h);
    --knob-s: calc(var(--title-s) + 40%);
    --knob-l: calc(var(--title-l) + 55%);
    --knob-hsl: hsl(var(--knob-h), var(--knob-s), var(--knob-l));

    --knob-border-color-light: hsl(
        var(--knob-h),
        var(--knob-s),
        calc(var(--knob-l) + 10%)
    );

    --knob-border-color-dark: hsl(
        var(--knob-h),
        var(--knob-s),
        calc(var(--knob-l) + 0%)
    );
}

hr {
    border-top: var(--border-color-light) 1px outset;
    border-bottom: var(--border-color-dark) 1px outset;
}

h1,
h2,
h3 {
    margin: 0;
    font-size: 11px;
}

p {
    margin-bottom: 0;
}

p:first-child {
    margin: 0;
}

.vehicle canvas {
    image-rendering: pixelated;
}

button {
    padding: 0.2em 0.5em;
}

button:disabled {
    text-shadow: 0 1px rgba(255, 255, 255, 0.75);
}

input,
textarea {
    border-radius: 0;
}