:root {
    --hbr-bg: #FF4F00;
    --hbr-bg-trans: #C0C0C000;
    --hbr-fc: white;
  }

body {
    padding: 0;
    font-family: sans-serif;
    font-size: 200%;
    background-color: var(--hbr-bg);
    color: white;
}

header, footer {
    text-align:center;
    padding:1em 1em 1em 1em;
}

h1 {
    display:inline;
    font-size: 2em;
}

main {
    margin: auto;
    max-width: 720px;
}

section {
    margin: 0.5em;
    padding: 0.25em 0.5em;
    display: flex;
    flex-direction: column;
    background: gray;
    border-radius: 10px;
}
label {
    padding: 0.5em 0;
}
input {
    font-size: 1.5em;
    padding: 0 .2em;
}
input:read-only {
    background-color: silver;
}

table {
    width:100%;
    background: gray;
    margin: .5em 0;
    font-size: 100%;
}

button, select {
    font-size: 100%;
    padding: .25em;
    margin: 0.5em;
    border-radius: 4px;
}

tr {
    color: black;
}
th {
    color:white;
    font-weight: normal;
    font-size: 80%;
}
td {
    padding: .5em;
    text-align: center;
}
tr:nth-child(2) {
    background: rgb(235, 81, 37)
}
tr:nth-child(3) {
    background: rgb(115, 194, 88)
}
tr:nth-child(4) {
    background: rgb(99, 190, 231)
}
tr:nth-child(5) {
    background: rgb(246, 210, 56)
}