:root {
  --popup-top-start: 184px;
  --popup-spacing: 106px;
}

@font-face {
  font-family: "brandon-medium";
  src: url('../fonts/brandon-grotesque-medium.ttf') format('truetype');
}

@font-face {
  font-family: "brandon-regular";
  src: url('../fonts/brandon-text-medium.ttf') format('truetype');
}

body {
  width: 1920px;
  height: 1080px;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0);
}

.player-popup {
  width: 443px;
  height: 121px;
}

.player-popup .player-name {
  font-family: "brandon-medium";
  color: #E3E3E3;
  position: absolute;
  text-transform: uppercase;
  font-size: 18pt;
  top: 37px;
}

.blue.player-popup .player-name,
.blue.player-popup .hero-name {
  left: 110px;
}

.red.player-popup .player-name,
.red.player-popup .hero-name
{
  right: 110px;
}

.player-popup .hero-name {
  font-family: "brandon-regular";
  position: absolute;
  font-size: 10pt;
  top: 64px;
  text-transform: uppercase;
}

.blue.player-popup .hero-name {
  color: #C8D4E6;
}

.background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.blue.player-popup .background {
  background-image: url('../images/Blue_single.png');
  background-color: rgba(0, 0, 0, 0);
}

.red.player-popup .background {
  background-image: url('../images/Red_single.png');
  background-color: rgba(0,0,0,0);
}

.player-popup .portrait {
  width: 78px;
  height: 93px;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 17px;
  z-index: -2;
}

.blue.player-popup .portrait {
  left: 17px;
  top: 13px;
}

.red.player-popup .portrait {
  right: 16px;
  top: 13px;
}

.all .blue.player-popup {
  left: -4px;
}

.all .red.player-popup {
  right: 12px;
}

.all .blue.player-popup.player-1,
.all .red.player-popup.player-1 
{
  top: var(--popup-top-start);
}

.all .blue.player-popup.player-2,
.all .red.player-popup.player-2
{
  top: calc(var(--popup-top-start) + var(--popup-spacing));
}

.all .blue.player-popup.player-3,
.all .red.player-popup.player-3
{
  top: calc(var(--popup-top-start) + var(--popup-spacing) * 2);
}

.all .blue.player-popup.player-4,
.all .red.player-popup.player-4
{
  top: calc(var(--popup-top-start) + var(--popup-spacing) * 3);
}

.all .blue.player-popup.player-5,
.all .red.player-popup.player-5
{
  top: calc(var(--popup-top-start) + var(--popup-spacing) * 4);
}

.single .player-popup {
  bottom: 200px;
  left: 50px;
}