:root {
    --home-colour: Blue;
    --away-colour: Red;
    --lightmid-colour: DarkGrey;
    --darkmid-colour: DimGrey;
    --light-colour: White;
    --dark-colour: Black;
    --border-colour: Black;
    --score-low-colour: #f5ffe6;  /* #ebffcc #d6ff99 #E0FFE0 #CCFFCC - PaleGreen may work too */
    --score-mid-colour: #e0ffb3;  /* #E0E0E0; */
    --score-high-colour: GreenYellow;
}

body {
    font-size: x-large;
}

table {
    margin: 0 auto;  /* to centre the table */
    width: 100dvw;
    height: 100dvh;
    overflow: auto;
}

table, th, td {
    border: 1px solid var(--border-colour);
    border-collapse: collapse;
    text-align: center;
}

tr {
    height: 10dvh;  /* 9? */ 
}
tr.headerheight { height: 10dvh; }
tr.multiheight { height: 7dvh; }

select {
    height: 100%;
    width: 100%;
    text-align: center; 
}
select.mult {
    color: var(--lightmid-colour);
    background-color: var(--darkmid-colour);
}

input {
    height: 100%;
    width: 100%;
    text-align: center;
}

.home { background-color: var(--home-colour); color: var(--light-colour); }
.away { background-color: var(--away-colour); color: var(--light-colour); }
.shots { background-color: var(--darkmid-colour); color: var(--light-colour); }
.neutral { background-color: var(--darkmid-colour); color: var(--dark-colour); }
.homefg { color: var(--home-colour); }
.awayfg { color: var(--away-colour); }
.points { font-weight: bolder; }