:root {
    --bg: #ffe;
    --text: #222;
    --box: #eee;

    --power-on: #ff0;
    --power-off: #000;
}
body.dark {
    --bg: #222;
    --text: #ccc;
    --box: #333;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: sans-serif;
    text-align: center;
}

#subtitle {
    font-size: 1.4rem;
    font-weight: bold;
}
#title {
    font-size: 5rem;
    font-style: italic;
}
#nextTransition {
    font-size: 1.6rem;
}
#schedule {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 2px;
    max-width: 1400px;
    margin: 1rem auto;
}
.box {
    position: relative;
    aspect-ratio: 1/1;
    align-content: center;
    background: var(--box);
    border-radius: 4px;
}
.status {
    background: #888;
    border: 1px solid #ccc;
}

.box.off {
    background: var(--power-off);
}
.box.right-on {
    background: linear-gradient(to bottom right, var(--power-off) 50%, var(--power-on) 50%);
}
.box.on {
    background: var(--power-on);
}
.box.left-on {
    background: linear-gradient(to bottom right, var(--power-on) 50%, var(--power-off) 50%);
}

@media (max-width: 700px) {
    #schedule {
        grid-template-columns: 3rem 3rem;
        width: min-content;
    }
    .box {
        grid-column: auto !important;
        grid-row: auto !important;
    }
}