body, table {
    font-family: Arial;
    font-size: 11pt;
    color: var(--text-color);
    background-color: var(--background-color);
}
td, th {
    padding: 2px;
}
table {
    border-collapse: collapse;
}
.command {
    font-family: Consolas, monospace;
}
th a {
    text-decoration: none;
}
a.owner {
    display: inline-block;
    padding: 1em;
    margin: 1em;
    border: 1px solid #999;
    text-decoration: underline;
}
a.owner:hover {
    color: #00f;
    text-decoration: none;
}

.answer {
    color: var(--background-color);
    user-select: none;
    transition: color 0.1s ease-in-out;
}
.answer:hover {
    color: var(--text-color);
    user-select: auto;
    transition: none;
}
.visible {
    color: var(--text-color);
    user-select: auto;
    transition: color 0.3s ease-in-out;
}
.numbercell {
    text-align: right;
    padding-right: 0.5em;
}
input[type="text"] {
    background-color: var(--background-color);
    border: 1px solid var(--text-color);
    border-radius: 3px;
    color: var(--text-color);
    padding: 0.1em;
    margin: 0.1em;
}

@media (prefers-color-scheme: dark) {
    :root {
        --text-color: #eee;
        --background-color: #111;
    }

    td, th {
        border: 1px solid #999;
    }

    .command {
        color: #ffdf90;
    }
    th a {
        color: #99f;
    }
    th a:hover, a:link, a:visited {
        color: #ff9;
    }
    a.owner {
        border: 1px solid #ccf;
        color: #00c;
    }
    .wrong {
        background-color: #600;
    }
    .correct {
        background-color: #060;
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --text-color: #000;
        --background-color: #fff;
    }

    td, th {
        border: 1px solid #000;
    }

    .command {
        color: #f40;
    }
    th a {
        color: #007;
    }
    th a:hover, a:link, a:visited {
        color: #33f;
    }
    a.owner {
        color: #00a;
    }
    .wrong {
        background-color: #faa;
    }
    .correct {
        background-color: #afa;
    }
}