:root {
    --bg-0: #101010;
    --bg-1: #181818;
    --bg-2: #282828;
    --fg-0: #c0c0c0;
    --fg-1: #d0d0d0;
    --fg-2: #e0e0e0;
    --accent: #c0ea76;
    --on-accent: #43600f;

    --shadow-md: 0 2px 4px rgba(0,0,0,.5);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
}

@media (prefers-color-scheme: light) {
    :root {
        --bg-0: #e8e8e8;
        --bg-1: #f0f0f0;
        --bg-2: #fcfcfc;
        --fg-0: #606060;
        --fg-1: #303030;
        --fg-2: #101010;
        --accent: #6a9321;
        --on-accent: #f6ffe6;

        --shadow-md: 0 2px 4px rgba(0,0,0,.25);;
        --shadow-sm: 0 1px 2px rgba(0,0,0,.15);;
    }
}

body {
    width: 720px;
    max-width: calc(100vw - 1em);
    margin: auto;

    font-size: 20px;
    font-family: 'Inter', 'Arial', sans-serif;

    background-color: var(--bg-0);
    color: var(--fg-0);
}

* {
    transition: background-color .2s ease-out, color .2s ease-out;
}

a {
    color: var(--accent);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

form {
    width: fit-content;
    padding: 1em;
    border-radius: 8px;
    background-color: var(--bg-1);
    color: var(--fg-1);
    box-shadow: var(--shadow-md);
}

form input[type="text"] {
    width: fit-content;
    min-width: 16em;
    padding: .2em .4em;
    font-size: inherit;
    border: none;
    border-radius: 4px;
    background-color: var(--bg-2);
    color: var(--fg-2);
    box-shadow: var(--shadow-sm);
}

form button {
    margin-top: .5em;
    padding: .2em .4em;
    font-family: inherit;
    font-size: inherit;
    border: none;
    border-radius: 8px;
    color: var(--on-accent);
    background-color: var(--accent);
    box-shadow: var(--shadow-sm);
}

pre code {
    padding: .5em;
    border-radius: 8px;
    font-size: 16px;

    background-color: var(--fg-1);
    color: var(--bg-1);
    box-shadow: var(--shadow-sm);
}

pre#motd {
    margin-top: -1em
}

pre#motd code {
    display: block;
    width: fit-content;
    min-width: 440px;
    box-shadow: var(--shadow-sm);
}

footer {
    font-family: monospace;
}