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

.debug {
  background-color: #FF00FFa1;
}

.hero.item .name,
.hero.item .win,
.hero.item .games,
.hero.item .loss,
.hero.item .win-pct
{
  display: none;
}

body {
  background-image: url('../images/cfh-bg-bars.png');
  background-position: center;
  background-size: cover;
  font-family: 'Nexa Bold';
}

#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;
}

#player-profile {
  position: absolute;
  left: 11.1vw;
  top: 12.7vh;
  height: 74.4vh;
  width: 77.8vw;
}

.player-name {
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  width: 54.5%;
  height: 16.4%;
  text-transform: uppercase;
  color: rgba(240, 240, 240, 0.85);
  font-size: 430%;
  letter-spacing: 0.2em;
}

#player-profile .util-1 {
  background-image: url('../images/player-profile-top-bg.png');
  position: absolute;
  background-position: top;
  left: 0;
  top: 0;
  height: 16.4%;
  width: 100%;
  z-index: -1;
  background-repeat: no-repeat;
  border-bottom: 10px solid #24437c;
}

#player-profile .util-2 {
  background-image: url('../images/player-profile-right-bg.png');
  position: absolute;
  background-position: top;
  background-size: cover;
  right: 0;
  bottom: 0;
  height: 82.5%;
  width: 45.5%;
  z-index: -2;
}

.social.container {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-end;
  height: 16.4%;
  position: absolute;
  left: 60.5%;
  width: 20%;
  color: rgba(240, 240, 240, 0.85);
  font-size: 150%;
  text-transform: uppercase;
}

.social.container .icon {
  font-size: 170%;
}

.social.container .player-twitch,
.social.container .player-twitter {
  display: flex;
  align-items: center;
  justify-content: flex-begin;
}

.stats.container {
  position: absolute;
  right: 0;
  top: 25.4%;
  width: 45.5%;
  height: 74.6%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stat.row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 3.2vh;
  text-transform: uppercase;
  color: rgba(240, 240, 240, 0.85);
  font-size: 24px;
  padding: 10px 30px;
  flex-grow: 1;
}

.stat.row.even {
  background-color: #24437c;
}

.stat.row.odd {
  background-color: #0e1d4a;
}

.stat .name {
  width: 75%;
}

.stat .value {
  width: 25%;
  text-align: right;
  color: #00FFFF;
}

#player-profile .type {
  text-transform: uppercase;
  letter-spacing: 3px;
  background-color: #0f1d4c;
  font-size: 1.7vw;
  border-bottom: 3px solid #ffffff;
  height: 5.5vh;
  color: rgba(240, 240, 240, 0.85);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 0;
  bottom: 74.6%;
  width: 45.5%;
  background-repeat: no-repeat;
  background-size: 6%;
}

.heroes.container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 54.5%;
  height: 82.4%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.heroes.container .hero.item {
  flex-grow: 1;
  background-repeat: no-repeat;
  background-size: 1005px 670px;
  background-position-x: -367px;
  background-position-y: -8px;
  position: relative;
}

.heroes.container .hero.item .hero-util {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('../images/portrait-vignette.png');
  mix-blend-mode: multiply;
  background-size: cover;
  background-repeat: no-repeat;
}

.heroes.container .hero.item.empty {
  background-image: url('../images/empty-portrait.png');
  background-size: cover;
  background-position: bottom;
}

#player-profile .logo {
  width: 12.9%;
  height: 15.2%;
  position: absolute;
  right: 0.3%;
  top: 0.7%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.type .util {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 6%;
  height: 100%;
  margin-right: 10px;
}

.type[type="role-support"] .util {
  background-image: url('../images/role-support.svg');
}

.type[type="role-warrior"] .util {
  background-image: url('../images/role-warrior.svg');
}

.type[type="role-offlane"] .util {
  background-image: url('../images/role-specialist.svg');
}

.type[type="role-assassin"] .util {
  background-image: url('../images/role-assassin.svg');
}