@font-face {
  font-family: "Nexa Bold";
  src: url('../fonts/nexa-bold.otf') format('opentype');
}

:root {
  --ro8-qf-left: 2vw;
  --ro8-qf-top-root: 8vh;
  --ro8-qf-spacing: 22vh;
  --ro8-sf-left: 28vw;
  --ro8-sf-top-root: 14vh;
  --ro8-sf-spacing: 44vh;
  --ro4-sf-left: 9vw;
  --ro4-sf-top-root: 13vh;
  --ro4-sf-spacing: 44vh;
  --de6-qual-left: 3vw;
  --de6-qual-top: 37vh;
  --de6-qual-spacing: 32vh;
  --de6-r2-left: 22.5vw;
}

.debug {
  background-color: #FF00FFa1;
}

body {
  width: 100vw;
  height: 100vh;
  background-image: url('../images/cfh-bg-bars.png');
  background-size: cover;
  background-position: center;
  background-color: rgba(0,0,0,0);
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: 'Nexa Bold';
}

#util-1 {
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
}

body[format="RO8"] #util-1 {
  background-image: url('../images/bracket-bo8-format.png');
}

body[format="RO4"] #util-1 {
  background-image: url('../images/bracket-bo4-format.png');
}

body[format="DE6"] #util-1 {
  background-image: url('../images/bracket-de6-format.png');
}

#tournament-name {
  font-size: 1.5vw;
  width: 100vw;
  height: 2.6vw;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0vw;
  color: rgba(240, 240, 240, 0.85);
  letter-spacing: 0.2em;
  z-index: 1;
  text-transform: uppercase;
}

.bracket-item {
  position: absolute;
  display: flex;
  height: 18vh;
  width: 22vw;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
}

.bracket-item .team {
  width: 100%;
  height: 7vh;
  background-image: url('../images/bracket-base-left.png');
  background-position: left;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #0d1a44;
  position: relative;
}

.bracket-item .team .name {
  display: flex;
  width: 52%;
  height: 100%;
  position: absolute;
  justify-content: flex-start;
  align-items: center;
  color: rgba(240, 240, 240, 0.85);
  left: 28%;
  font-size: 22px;
  overflow: hidden;
}

.bracket-item .team .score {
  display: flex;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 16%;
  justify-content: flex-end;
  align-items: center;
  background-image: url('../images/metal-divider-split.png');
  background-size: contain;
  background-position: left;
  background-repeat: no-repeat;
  color: rgba(240, 240, 240, 0.85);
  font-size: 32px;
  padding-right: 5%;
  background-color: #24437C;
  clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%);
}

.bracket-item .team.winner .score {
  background-color: #0c5522;
}

.bracket-item .team .logo {
  width: 15%;
  height: 95%;
  position: absolute;
  left: 1%;
  top: 2.5%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

body[format="RO8"] .bracket-item#SF1,
body[format="RO8"] .bracket-item#SF2
{
  height: 29vh;
}

body[format="RO8"] .bracket-item#Final {
  height: 50vh;
  left: 53vw;
  top: 25vh;
}

body[format="RO8"] #QF1 {
  left: var(--ro8-qf-left);
  top: var(--ro8-qf-top-root);
}

body[format="RO8"] #QF2 {
  left: var(--ro8-qf-left);
  top: calc(var(--ro8-qf-top-root) + var(--ro8-qf-spacing));
}

body[format="RO8"] #QF3 {
  left: var(--ro8-qf-left);
  top: calc(var(--ro8-qf-top-root) + var(--ro8-qf-spacing) * 2);
}

body[format="RO8"] #QF4 {
  left: var(--ro8-qf-left);
  top: calc(var(--ro8-qf-top-root) + var(--ro8-qf-spacing) * 3);
}

body[format="RO8"] #SF1 {
  left: var(--ro8-sf-left);
  top: var(--ro8-sf-top-root);
}

body[format="RO8"] #SF2 {
  left: var(--ro8-sf-left);
  top: calc(var(--ro8-sf-top-root) + var(--ro8-sf-spacing));
}

body[format="RO8"] #bracket-winner {
  left: 77vw;
  top: 46.5vh;
}

body[format="RO8"] #bracket-winner .name {
  width: 72%;
}

body[format="RO4"] .bracket-item {
  position: absolute;
  display: flex;
  height: 27vh;
  width: 25vw;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
}

body[format="RO4"] .bracket-item .team {
  width: 100%;
  height: 8vh;
  background-image: url(../images/bracket-base-left.png);
  background-position: left;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #0d1a44;
  position: relative;
}

body[format="RO4"] .bracket-item .team .score {
  clip-path: polygon(47px 0, 100% 0, 100% 100%, 0 100%);
}

body[format="RO4"] #SF1 {
  left: var(--ro4-sf-left);
  top: var(--ro4-sf-top-root);
}

body[format="RO4"] #SF2 {
  left: var(--ro4-sf-left);
  top: calc(var(--ro4-sf-top-root) + var(--ro4-sf-spacing));
}

body[format="RO4"] .bracket-item#Final {
  height: 52vh;
  left: 42vw;
  top: 22vh;
}

body[format="RO4"] #bracket-winner {
  left: 72vw;
  top: 44.5vh;
}

body[format="RO4"] #bracket-winner .name {
  width: 72%;
}

body[format="DE6"] .bracket-item {
  position: absolute;
  display: flex;
  height: 20vh;
  width: 18vw;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
}

body[format="DE6"] .bracket-item .team {
  background-position: -20px 0px;
}

body[format="DE6"] .bracket-item .team .score {
  width: 18%;
  padding-right: 3%;
}

body[format="DE6"] #LBQF1 {
  left: var(--de6-qual-left);
  top: var(--de6-qual-top);
}

body[format="DE6"] #LBQF2 {
  left: var(--de6-qual-left);
  top: calc(var(--de6-qual-top) + var(--de6-qual-spacing));
}

body[format="DE6"] #LBQF {
  left: var(--de6-r2-left);
  top: 44vh;
  height: 38vh;
}

body[format="DE6"] #UBSF {
  left: var(--de6-r2-left);
  top: 10vh;
}

body[format="DE6"] #LBSF {
  left: 42.3vw;
  top: 52vh;
  height: 20vh;
}

body[format="DE6"] #Final {
  left: 62vw;
  top: 33vh;
  height: 33vh;
}

body[format="DE6"] #bracket-winner {
  left: 81.5vw;
  top: 45.5vh;
}