:root {
    --whiteLine: white;
    --disabled: lightblue;
    --sky: #53bdf7;
    --courtout: #609adc;
    --courtin: #3c76bc; /*IN darker than OUT*/
    --courtdark: #153b68;
    --neutralLight: lightgray;
    --neutral: darkgray;
    --bright: yellow;
    --hint: #f5efbd;
    --warning: orange;
    --penalty: #ff5f4c;
    --correctDark: #6db76d;
    --correct: lightgreen;
    --correctLight: greenyellow;
    --whiteLineThickness: min(10px, max(1.2vw, 1.2vh));
    --lineStyle: var(--whiteLineThickness) solid var(--whiteLine);
    --modalBg: #e6f0fa;
    --filter: brightness(0.6) sepia(0.9) hue-rotate(57deg) saturate(8);
    --scrollMax: -70%;
}


body {
    font-family: sans-serif;
    font-size: 1em;
    background: var(--courtout);
    color: var(--whiteLine);
    max-width: 1300px;
    margin: 0 auto;
}

a {
    cursor: pointer;
    text-decoration: none;
    color: var(--whiteLine);
}


header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--whiteLineThickness);
    background-color: var(--courtdark);
    color: var(--whiteLine);
    border-bottom: var(--lineStyle);
    max-height: fit-content;
}

@-moz-document url-prefix() {
    header {
        max-height: 100px;
    }
}