:root {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 20px;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

body>* {
    width: min(calc(100% - 1em), 800px);
}

.area {
    padding: 1em;
    margin: 1em;
    border: 1px solid #ccc;
    border-radius: 10px;
}

.time {
    font-size: 2em;
    margin-block: 0.25em;
}

.friend {
    margin-right: 0.5em;
}

li {
    list-style-type: disc;
    margin-left: 1em;
}

li button {
    padding: 0.25em;
}


button,
input,
select {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 0.5em 1em;
    margin-block: 0.5em;
    cursor: pointer;
    margin-right: 0.5em;
    max-width: 100%;
}

select {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="black" width="20px" height="20px"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.7em top 50%;
    background-size: 18px;
    width: auto;
    padding-right: 2em;

    user-select: none;
}

*:focus {
    outline: 1px solid grey;
}

button:active,
input:active,
select:active {
    background-color: #f0f0f0;
    user-select: none;
}

.stats {
    margin: 0 auto;
}

.stats th {
    font-size: 1.5em;
    text-align: center;
}

.stats th:not(:first-child),
.stats td:not(:first-child) {
    padding-left: 1em;
}

.stats td:last-child {
    text-align: right;
    font-family: monospace;
}

.stats tr {
    border: 1em solid transparent;
}

.stats tr:nth-child(2n) {
    background-color: #f0f0f0;
}


.cell-unknown {
    color: red;
}

.cell-zero {
    color: hsl(0, 0%, 80%);
}

.cell-low {
    color: hsl(0, 0%, 40%);
}

.cell-mid {
    color: hsl(0, 0%, 20%);
}

.cell-high {
    color: hsl(0, 0%, 00%);
}