Custom Challonge CSS

Tonight I worked on some custom CSS that could be injected into a BrowserSource in OBS to turn a bracket that looks something like this:

Into something that looks like this:

The CSS is included below for future reference.

@import url("https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap");

body {
  background: black;
}

svg text {
  font-family: "Press Start 2P", monospace;
}

/*** Remove rounded edges ***/
svg g.match rect.match--base-background {
  rx: 0;
  ry: 0;
}
svg g.match g {
  clip-path: none;
}

/**** Seeds ****/
svg path.match--seed-background {
  fill: #c1261d;
  outline: 2px solid black;
  outline-offset: 0px;
}
svg text.match--seed {
  transform: translateY(4px);
  fill: black;
}
/**** Player Names ****/
svg text.match--player-name {
  font-size: 15px;
  transform: translateY(5px);
  fill: white;
  stroke: transparent;
}

svg text.match--player-name.-placeholder {
  stroke: transparent;
  /* fill: transparent; */
  font-size: 10px;
  transform: translateY(2px);
}

svg path.match--player-background {
  outline: 2px solid black;
  outline-offset: 0px;
}

/**** Match dividing line ****/
svg line.match--player-divider {
  stroke: black;
  stroke-width: 3px;
}

/**** Player Scores ****/
svg text.match--player-score {
  font-size: 15px;
  transform: translateX(1px) translateY(5px);
  fill: black;
  stroke: transparent;
}

svg g.match svg.match--player path.match--player-score-background {
    outline: 2px solid black;
    outline-offset: 0px;
    /* outline: 2px double #c1261d;
    outline-offset: -7px; */
  fill: white;
}

svg g.match svg.match--player path.match--player-score-background.-winner {
  /* Winner gets highlighted background */
  fill: #f39c05;
}

/*** Round Names ***/
svg .round-label text {
  transform: translateY(2px);
}

svg.round g.round-label rect {
  fill: black;
  outline: 2px solid #aaecf2;
  outline-offset: -4px;
}

span.live-stamp {
  display: none;
}