html {
    font-size: 100%;
    font-family: serif;
    max-width: 40rem;
    margin: 0 auto;
    padding: 1rem;
    color: #111;
    background: #fff;
}

@media (prefers-color-scheme: dark) {
    html { color: #eee; background: #111; }
    a { color: #8ab4f8; }
}

body { margin: 0; }

main { margin-top: 2rem; }

h1 { font-size: 1.4rem; margin-bottom: 0.5rem; }

p { margin: 0.5rem 0; }

footer { margin-top: 3rem; font-size: 0.85rem; color: #555; }

@media (prefers-color-scheme: dark) {
    footer { color: #999; }
}

/* Home: language checkboxes */
fieldset { border: 1px solid #ccc; padding: 0.75rem 1rem; }
fieldset legend { font-weight: bold; }
fieldset label {
    display: inline-block;
    margin: 0.25rem 0.5rem 0.25rem 0;
}

/* Chat */
.common-langs { font-size: 0.85rem; color: #555; margin-bottom: 1rem; }
@media (prefers-color-scheme: dark) {
    .common-langs { color: #999; }
}

.history {
    border-top: 1px solid #ccc;
    padding-top: 0.75rem;
    margin-bottom: 1rem;
    min-height: 4rem;
}

.line { margin: 0.3rem 0; font-family: monospace; font-size: 0.95rem; }
.mine   { text-align: right; margin-left: 3em; font-style: italic; }
.theirs { text-align: left; margin-right: 3em; font-weight: bold; }

.system-msg { font-style: italic; color: #888; }

/* Input */
input[type="text"] {
    width: 100%;
    font-size: 1rem;
    font-family: monospace;
    padding: 0.3rem;
    box-sizing: border-box;
}

button {
    font-size: 1rem;
    padding: 0.3rem 0.8rem;
    cursor: pointer;
}

.break-notice {
    font-size: 0.85rem;
    color: #888;
    margin-left: 0.5rem;
}

.typing img { height: 1.2em; vertical-align: middle; }