html, body {
    background-color: #ffffff;
}

canvas {
    position: absolute;
    width: 60%;
    height: 50%;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    --unlit-color: #cccccc;
    --hour-color: #ff0000;
    --minute-color: #00ff00;
    --second-color: #0000ff;
}

@media all and (orientation: portrait) {
    canvas {
        width: 80%;
        height: 20%;
    }
}

@media (prefers-color-scheme: dark) {
    html, body {
        background-color: #000000;
    }

    canvas {
        --unlit-color: #3f3f3f;
        --hour-color: #900000;
        --minute-color: #009000;
        --second-color: #000090;
    }
}