html {
    font-size: 2.5vh; /* use screen-relative size to get reasonable sizes on any display */
    font-family: sans-serif;
}

.poolControls {
    max-width: 24em;
    margin: 0 auto;
    background-color: lightgray;
    padding: 0.25em;
    border: 1px solid black
}

/* text size stuff... */
.poolControls h1 {
    margin-top: 0;
    font-size: 180%;
    text-align: center;
}

.poolControls h2 {
    font-size: 120%;
    margin: 0
}

.poolControls ul {
    list-style: none;
    padding: 0
                    
}

/* The body selection and the accessory controls both use this style.
 * Use flexible boxes to put all the control buttons nicely on one line */
.toggleControls ul {
    display: flex;
}
.toggleControls li {
    flex: 1 /* buttons share space evenly */
}

.bodyControls ul {
    padding: 0 1em 0 1em;
}

/* Temperature display box. 
 * Make the temperature big and stand out, it's arguably the most important thing on here
 */
#tempDisplay {
    font-size: 280%;
    text-align: center
}

#heatBtns {
    display: flex
}

/* Heat status; displays what heat source is selected and whether it's on. */
#heatStatus {
    text-align: center;
    margin-top: .3em; /* a l */
    font-weight:700;
    
}
#heatStatus[active=true] {
    color: red
}
#heatStatus[active=false] {
    color: black
}

/* Kinda weird tweak: indent the air temperature display, since everything else gets indented */
#airTemp {
    margin-left: 1em
}

/* When there is a pending change to the target temperature, show it in gray */
#targetTemp[pending=true] {
    color: darkgray;
}

/* Button stuff */
button {
    width: 100%;
    font-size: 133%;
    font-weight: 700;
    min-height: 4rem;
    border-radius: .25rem;
    background-color:silver
}

/* Body and feature control buttons.
 * Colored in when the feature is on, gray when it's off
 */
.toggleControls button[active=true] {
    background-color: limegreen
}

/* Temperature control buttons get suitable colors and are a little smaller. */
button.tempDown {
    flex: 1;
    font-size:150%;
    min-height: 3rem;
    background-color: lightblue;
}
button.tempUp {
    flex: 1;
    font-size: 150%;
    min-height:3rem;
    background-color: orange;
}

/* If there's a mouse or something that can hover over the buttons,
 * make them darker when they're being hovered over. */
@media(hover) {
    button:hover {
        background-color: darkgray;
    }
    button[active=true]:hover {
        background-color: forestgreen;
    }
    button.tempUp:hover {
        background-color: darkorange;
    }
    button.tempDown:hover {
        background-color: skyblue;
    }
}