:root {
  --basketOrange: #dc5002;
  --basketLightOrange: #fa9203;
  --basketGraphite: #1f130e;
  --basketBlack: #000000;
  --basketWhite: #ffffff;
  --teamMasty: yellow;
  --teamEmu: purple;
  /* ------- */
  --accent: #dc5002;
  --accent-hover: #fa9203;
}

.orange {
  background-color: var(--basketOrange);
  padding: 1rem;
  margin: auto;
}

.status {
  table-layout: auto;
  width: 100%;
}

.status,
td {
  border: 3px solid var(--basketBlack);
  background-color: var(--basketOrange);
}

tr td:first-child {
  width: 2px;
  font-family: monospace;
  border-top-style: hidden;
  border-bottom-style: hidden;
  border-left-style: hidden;
  padding-right: 1rem;
}

.status tr:last-child {
  border-bottom-style: hidden;
}

.team {
  background-color: var(--basketGraphite);
  color: var(--basketOrange);
  font-family: monospace;
  margin: 1rem;
  margin-left: 2rem;
  margin-right: 2rem;
  border: 2px solid var(--basketWhite);
}

.maps {
  width: 100%;
}

.maps > td {
  border: 3px solid var(--basketGraphite);
  color: var(--basketGraphite);
}

.homemaps {
  text-align: center;
}

.score {
  border: 3px solid var(--basketBlack);
}

.score > td {
  background-color: var(--basketOrange);
  height: 2px;
  border: 0px solid var(--basketWhite);
  border-radius: 20px;
  border-right-style: hidden;
}

.score > .marked {
  background-color: var(--basketWhite);
}

.score > .emu {
  background-color: var(--teamEmu);
}

.score > .masty {
  background-color: var(--teamMasty);
}

#example > td {
  transition: background-color 200ms;
}