.brackets-viewer {
  /* Colors */
  --primary-background: #fff;
  --secondary-background: #eceff1;
  --match-background: var(--primary-background);
  --font-color: #212529;
  --win-color: #50b649;
  --loss-color: #e61a1a;
  --label-color: grey;
  --hint-color: #a7a7a7;
  --connector-color: #9e9e9e;
  --border-color: #d9d9d9;
  --border-hover-color: #b6b5b5;

  /* 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: 0.3em;
}