.page{
    max-width: 1500px;
    margin: auto;
}

.container {
    /*display: grid;
    gap: 1em;
    grid-template-columns: 5fr 5fr;*/
}

.valueCards{
    display: grid;
    gap: 1em;
    place-items: center;
    grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
}

.valueCard{
    background: var(--accent-color-secondary);
    padding: 0.75em 0.5em;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    min-height: 7em;
}

.valueCard >* .value{
    font-size: 1.5em;
}

.valueCard >* .value.big{
    font-size: 3em;
}

.valueCard >* .unit{
    font-size: 1.5em;
    color: var(--font-color-secondary);
}

.valueCard >* .unit.small{
    font-size: 1em;
}

.horizontalValues{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(3em, 1fr));
}

.advanced{
    display: none;
}

#showAdvancedCards_hidden:checked ~ * .advanced{
    display: flex;
}

#showAdvancedCards_hidden{
    display: none;
}

.mode-selection{
    max-width: 750px;
    display: flex;
    justify-content: center;
}

.mode-selection > *{
    flex-grow: 1;
    margin-right: 1em;
}

.mode-selection > :last-child{
    margin-right: 0;
}

.current-selection{
    max-width: 750px;
}

#manualControl.hide{
    opacity: 0.5;
}

h3{
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
}

h4{
    margin-block-end: 0;
}

@media only screen and (max-width: 600px){
    .container{
        display: initial;
    }
    .valueCards{
        gap: 0.5em;
    }
    .mode-selection > *{
        flex-grow: 1;
        margin-right: 0.5em;
    }

    .valueCards{
        grid-template-columns: repeat(auto-fill, minmax(10.5em, 1fr));
    }
}