.brackets-viewer {
  /* Colors */
  --primary-background: var(--bg);
  --secondary-background: var(--bg-lightest);
  --match-background: var(--bg-lighter);
  --font-color: var(--text);
  --win-color: #50b649;
  --loss-color: #e61a1a;
  --label-color: grey;
  --hint-color: #a7a7a7;
  /* TODO: mimicking border without transparent but not pretty in light mode */
  --connector-color: #1c1b35;
  --border-color: var(--primary-background);
  --border-hover-color: transparent;

  /* Sizes */
  --text-size: 12px;
  --round-margin: 40px;
  --match-width: 150px;
  --match-horizontal-padding: 8px;
  --match-vertical-padding: 6px;
  --connector-border-width: 2px;
  --match-border-width: 1px;
  --match-border-radius: var(--rounded-sm);

  font-family: Lexend, sans-serif !important;
  font-weight: var(--semi-bold) !important;
}

.brackets-viewer .opponents.connect-previous::before {
  height: 52%;
}

.brackets-viewer .match.connect-next.straight::after {
  top: 1px;
}

.brackets-viewer h3 {
  border-radius: var(--rounded-sm);
}

.brackets-viewer .bracket h2 {
  color: transparent;
}

.brackets-viewer h1 {
  display: none;
}

.brackets-viewer .opponents > span {
  background-color: var(--bg-light-variation);
  top: -11px;
  color: var(--text-lighter);
}

.bye {
  color: var(--text-lighter);
}