body {
    text-align: center;
    font-family: sans-serif;
}

.board {
    display: inline-block;
    margin-top: 20px;
}

h1 {
    margin-top: 0px;
}

table {
    margin: auto;
    border-collapse: collapse;
    width: 25em;
}

thead {
    background: black;
    color: white;
    font-weight: bold;
    font-size: 1.1em;
    text-align: left;
}

.rank {
    text-align: center;
    font-weight: bold;
    width: 30px;
}

.time, .average, .percent{
    width: 3.75em;
}

th {
    padding: 10px 10px;
}

td {
    padding: 15px 10px;
    border-bottom: 1px solid #ccc;
}

.date {
    display: inline-block;
    font-size: 1.25em;
    font-family: serif;
    font-style: italic;
    width:270px;
    color: #555;
}

a.button:hover {
    color: #555;
    cursor: pointer;
}

a.button:active {
    color: #888;
}

.button {
    color:#000;
    display: inline-block;
    text-decoration: none;
    margin: 10px;
}

.bi {
    width: 40px;
    height: 40px;
}

.button.disabled, a.button.disabled:hover {
    color: #888;
}

@media (prefers-color-scheme: dark) {
    body, body .dialog {
        background-color: #222;
        color: #eee
    }
    .logo {
        fill: #eee;
    }
    .date {
        color: #999;
    }
}

.plot {
    max-width: 1200px;
    margin: 0 auto;
}

.good {
    color: #0A0;
    padding: 0px;
}

.bad {
    color: #A00;
    padding: 0px;
}

button {
    color: #000;
    background: #ddd;
    border: 0px;
    padding: 7 14;
    font-size: 1.25em;
}

button:hover {
    background: #555;
}

button:active {
    color: #fff;
    background: #888;
}

.active {
    color: #fff;
    background: #000;
}

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

.hidden {
    display: none;
}

.dialog {
    position: absolute;
    top: 50px;
    left: 50px;
    max-width: calc(100% - 20px * 2 - 3px * 2);
    background: #fff;
    border: 3px solid black;
    padding: 0px 20px;
    box-shadow: 0px 0px 20px black;
    border-radius: 20px;
}

.dialog * {
    font-size: inherit;
}

#addtime button {
    margin: 10px;
}

.error {
    color: #f00;
    display: block;
    margin-top: 10;
}

#nyt-logo {
    width: 500px;
}

@media screen and (max-width: 980px) { /* mobile, wide-mobile: ipad, ipad mini */
    #nyt-logo {
        width: 80%;
    }
    .dialog {
        left: 0px;
    }
}