@font-face {
  font-family: "Deansgate";
  src: url('../Fonts/DeansgateCondensed-Bold.ttf');
}

@font-face {
  font-family: "Roboto";
  src: url('../Fonts/Roboto-Bold.ttf');
}

@font-face {
  font-family: "LemonMilk";
  src: url('../Fonts/LEMONMILK-Medium.otf');
}

@font-face {
  font-family: "BebasNeue";
  src: url('../Fonts/BebasNeue-Regular.ttf');
}

@font-face {
  font-family: "Bahnschrift";
  src: url('../Fonts/BAHNSCHRIFT\ 7.TTF');
}


body {
  font-family: "BebasNeue";
  letter-spacing: 1px;
  /* font-weight: bold; */
  opacity: 0;
  overflow: hidden;
  margin: 0;
  width: 1920px;
  height: 1080px;
}

.container {
  width: 350px;
  height: 38px;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  color: var(--text-color);
  z-index: 9;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.12))
    drop-shadow(0 3px 1px rgba(0, 0, 0, 0.14))
    drop-shadow(0 1px 5px rgba(0, 0, 0, 0.12))
    drop-shadow(0 -1px 2px rgba(0, 0, 0, 0.1));
}

.container .bg {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;

}

.t1 .bg {
  top: 14px;
  -webkit-mask-image: url("../Assets/p1.png");
  background: var(--p1-score-bg-color);
  filter: drop-shadow(0px 4px 1px rgba(0, 0, 0, 0.45));
}

.t2 .bg {
  top: 14px;
  -webkit-mask-image: url("../Assets/p2.png");
  background: var(--p2-score-bg-color);
  filter: drop-shadow(0px 4px 1px rgba(0, 0, 0, 0.45));
}

.doubles .container {
  transform: scaleX(0.9);
}

.singles {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 90px;
  background-image: url("../Assets/base.png");
}

.singles .middle_container {
 
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  position: absolute;
  width: 230px;
  top: 870px;
  color: white;
  left: 50%;
  height: 70px;
  background-repeat: no-repeat;
  clip-path: polygon(0 0, 100% 0, calc(100% - 25px) 100%, calc(0% + 25px) 100%);
  background-color: rgba(0,0,0,0.65);
  transform: translateX(-50%);
  filter: drop-shadow(0px 4px 1px rgba(0, 0, 0, 0.45));
  border-top: 3px solid white;
  border-bottom: 3px solid white;

}

.singles .match {
  position: relative;
  top: 2px;
  font-size: 34px;
  padding-top: 2px;
  padding-left: 20px;
  padding-right: 20px;
  height: 32px;
}

.singles .best_of {
  position: relative;
  top: 2px;
  font-size: 20px;
  height: 20px;
}

.singles .t1.p1.container {
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;

}

.singles .t2.p1.container {
  left: 50%;
  top: 0;
  width: 50%;
  height: 100%;
}

.doubles .t1.p1.container {
  left: 230px;
  top: 997px;
}

.doubles .t1.p2.container {
  left: 650px;
  top: 997px;
}

.doubles .t2.p1.container {
  left: 1050px;
  top: 997px;
}

.doubles .t2.p2.container {
  left: 1460px;
  top: 997px;
}

.container .name {
  color: var(--text-color);
  position: absolute;
  bottom: 5px;
  width: 300px;
  height: 100%;
  font-size: 48px;
  text-transform: uppercase;
}

.p1Character {
  /* width: 240px; */
  position: absolute;
  top: 0; 
  object-fit: scale-down;
}

.t1 .name {
  left: 260px;
}

.t2 .name {
  right: 260px;
}

.twitter {
  color: var(--text-color);
  position: absolute;

  bottom: 10px;
  width: 150px;
  height: 24px;
  font-size: 20px;
  /* padding-left: 16px; */
}

.twitter .text {
  justify-content: left;
}

.t1 .twitter {
  left: 360px;
  align-self: left;
}

.t2 .twitter {
  right: 305px;
  align-self: right;
}

.charMask {
  position: absolute;
  /* -webkit-mask-image: url("./Icon Mask.png"); */
  width: 270px;
  height: 87px;
  overflow: hidden;
  
}

.p2.charMask {
  right: 0;
}

.charTop {
  left: 95px;
}

.charBot {
  top: 25px;
  left: -285px;
}


.character {
  position: absolute;
  object-fit: scale-down;
  /* Image Outline */
  -webkit-filter: drop-shadow(1px 1px 0 white)
  drop-shadow(-2px 2px 0 white)
  drop-shadow(2px -2px 0 white)
  drop-shadow(-2px -2px 0 white);

  filter: drop-shadow(1px 1px 0 white)
  drop-shadow(-2px 2px 0 white)
  drop-shadow(2px -2px 0 white)
  drop-shadow(-2px -2px 0 white);
  
  
}



.twitter_logo {
  -webkit-mask-image: url(../Assets/twitter.svg);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  background-color: var(--text-color);
  width: 18px;
  height: 18px;
  margin-right: 6px;
  flex-shrink: 0;
}

.logo {
  width: 80px;
  height: 80px;
  margin: 8px;
  background-image: url("../../logo.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-grow: 0;
}

.t1 .sponsor {
  color: rgb(211, 211, 211);
}

.t2 .sponsor {
  color: rgb(211, 211, 211);
}

.flagscontainer {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  height: 100%;
  width: 60px;
}

.t1 .flagscontainer {
  left: 570px;
}

.t2 .flagscontainer {
  right: 570px;
}

.flag {
  display: inline-block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 34px;
  height: 22px;
  border: 2px solid white;
  border-radius: 8px;
  margin-top: 2px;
  margin-bottom: 2px;
}

.absol {
  position: absolute;
}

.score {
  position: absolute;
  display: flex;
  align-content: center;
  justify-content: center;
  font-size: 64px;
  color: white;
  width: 52px;
  height: 52px;
  top: 55%;
  transform: translateY(-50%);
  border-radius: 16px;
}

.scoreImgs {
  /* left: 607px;
  top: 20px; */
  display: block;
  width: 98px;
  height: 55px;
}

.scoreImgBg {
  /* left: 607px;
  top: 20px; */
  display: block;
  width: 98px;
  height: 55px;
}

.maskOverlayBO3 {
  display: block;
  -webkit-mask-image: url('../Score/Bo3 0.png');
  /* mask-image: url('../Overlay/Scoreboard/Score/1/Bo3 0.png'); */
  width: 98px;
  height: 55px;
  left: 607px;
  top: 20px;
}

.maskOverlayBO5 {
  display: block;
  -webkit-mask-image: url('../Score/Bo5 0.png');
  /* mask-image: url('../Overlay/Scoreboard/Score/1/Bo5 0.png'); */
  width: 98px;
  height: 55px;
  left: 607px;
  top: 20px;
}


.t1 .score {
  color: var(--p1-score-color);
  /* background: var(--p1-score-bg-color); */
  -webkit-text-stroke: 1px var(--p1-score-bg-color);
  text-shadow: 0px 0px 6px var(--p1-score-bg-color);
}
.t2 .score {
  color: var(--p2-score-color);
  /* background: var(--p2-score-bg-color); */
  -webkit-text-stroke: 1px var(--p2-score-bg-color);
  text-shadow: 0px 0px 6px var(--p2-score-bg-color);
}

.t1 .score {
  right: 280px;
}

.t2 .score {
  left: 280px;
}

.sponsor-container {
  position: absolute;
  top: 8px;
  height: 64px;
  width: 64px;
  overflow: hidden;
  display: flex;
}

.t1 .sponsor-container {
  left: 60px;
}

.t2 .sponsor-container {
  right: 60px;
}

.sponsor-logo {
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 1;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  overflow: hidden;
}

.material_container {
  position: absolute;
  color: var(--text-color);
  overflow: hidden;
  display: flex;
  box-sizing: border-box;
  background: #01020199;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.12))
    drop-shadow(0 3px 1px rgba(0, 0, 0, 0.14))
    drop-shadow(0 1px 5px rgba(0, 0, 0, 0.12))
    drop-shadow(0 -1px 2px rgba(0, 0, 0, 0.1));
}

.info.material_container {
  color: var(--text-color);
  padding: 4px 16px;
  background-position: center;
  text-transform: uppercase;
  box-sizing: border-box;
  font-size: 22px;
}

.info.material_container_inner {
  display: flex;
  width: 100%;
  font-size: inherit;
  flex-direction: column;
}

.info.material_container_inner > div {
  flex-shrink: 0;
  text-align: center;
}

.info.material_container.middle {
  left: 0;
  top: 0;
  display: flex;
  flex-direction: row;
  gap: 2px;
  border-bottom-right-radius: 12px;
}

.info.material_container.middle .info {
  left: 16px;
  top: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: auto;
  text-align: justify;
  align-items: center;
  overflow: hidden;
  margin: 0 16px;
  gap: 2px;
}

.info.material_container.middle .tournament_name {
  max-width: 100%;
  font-size: 32px;
}

.info.material_container.middle .phase {
  max-width: 100%;
  font-size: 20px;
}

.info.doubles.material_container {
  top: 16px;
  width: 360px;
  height: 66px;
  padding: 10px;
}

.info.doubles.material_container .text:not(.text_empty) {
  margin-left: 5px;
  margin-right: 5px;
}

.info.doubles.material_container .team_name {
  width: 282px;
  padding: 0 6px;
  box-sizing: border-box;
}

.t1.material_container {
  left: 580px;
}

.t2.material_container {
  left: unset;
  right: 580px;
  flex-direction: row-reverse;
}

.material_container .doubles_score {
  top: 14px;
  width: 48px;
  height: 100%;
  font-size: 38px;
  color: var(--p1-score-color);
  border-radius: var(--border-radius);
  flex-grow: 0;
  flex-shrink: 0;
  overflow: hidden;
}

.t1 .doubles_score {
  color: var(--p1-score-color);
  background: var(--p1-score-bg-color);
}
.t2 .doubles_score {
  color: var(--p2-score-color);
  background: var(--p2-score-bg-color);
}

.flipBack {
  transform: scaleX(-1);
}

.t1 .txtBg {
  background-repeat: no-repeat;
  /* background-image: url('./pron\ BG1.png'); */
  clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0% 100%);
  background-color: rgba(0,0,0,0.65);
  height: 50px;
  /* width: auto; */
  right: -10px;
  bottom: 0;
  /* justify-content: flex-end; */
  display: block;
  position: absolute;
  
}

.t2 .txtBg {
  background-repeat: no-repeat;
  /* background-image: url('./pron\ BG1.png'); */
  clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0% 100%);
  background-color: rgba(0,0,0,0.65);
  height: 50px;
  /* width: auto; */
  left: -10px;
  bottom: 0;
  /* justify-content: flex-end; */
  display: block;
  position: absolute;
}



.below_name {
  position: absolute;
  font-size: 26px;
  width: auto;
  height: 27px;
  bottom: -41px;
  display: flex;
  flex-direction: row;
  text-transform: uppercase;
  box-sizing: border-box;
  justify-content: flex-start;
}


.below_name .text:not(.text_empty) {
  padding-left: 5px;
  padding-right: 5px;

}

.t1 .below_name {
  left: 0px;
}

.t2 .below_name {
  right: 0px;
  flex-direction: row-reverse;
}



.com_container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-content: center;
  width: max-content;
  gap: 16px;
  color: var(--text-color);
  flex-wrap: wrap;
  padding-top: 16px;
}

.commentator_container {
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 30px;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 12px;
  background: var(--bg-color);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background: #01020199;
}

.mic_icon {
  display: inline-block;
  width: 30px;
  height: 30px;
  -webkit-mask-image: url(../Assets/icon_mic.svg);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  background: var(--text-color);
}

.name {
  font-size: 26px;
}

.team {
  opacity: 0.6;
}

.twitter {
  font-size: 20px;
}

.icon {
  width: 128px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-grow: 1;
}

.index_display {
  position: absolute;
  bottom: 8px;
  right: 32px;
  z-index: 999;
  color: white;
  font-size: 100px;
  text-shadow: 12px 12px 2px black;
}

.pronoun {
  /* font-size: 22px; */
  text-transform: uppercase;
  /* letter-spacing: 2px; */
  /* padding-left: 8px;
  padding-right: 8px; */
  /* border-radius: 6px; */

  bottom: 3px;
  color: var(--text-color);
  /* align-self: center; */
  position: relative;

}

.t1 .pronoun {
  left: 5px;
}

.t2 .pronoun {
  right: 5px;
}

.seed {
  bottom: 3px;
  position: relative;
}

.t1 .seed {
  margin-right: 10px;
}

.t2 .seed {
  margin-left: 10px;
}


/* Animations! */

@keyframes fadeOut {
  from {opacity: 1}
  to {opacity: 0}
}

@keyframes fadeIn {
  from {opacity: 0}
  to {opacity: 1}
}

@keyframes moveOutLeft {
  from {transform: translateX(0)}
  to {transform: translateX(40px)}
}
@keyframes moveOutRight {
  from {transform: translateX(0)}
  to {transform: translateX(-40px)}
}

@keyframes moveInLeft {
  from {transform: translateX(-40px)}
  to {transform: translateX(0)}
}
@keyframes moveInRight {
  from {transform: translateX(40px)}
  to {transform: translateX(0)}
}

@keyframes charaMoveOut {
  from {transform: translateX(0)}
  to {transform: translateX(-20px)}
}

@keyframes charaMoveIn {
  from {transform: translateX(-20px)}
  to {transform: translateX(0)}
}

@keyframes wlMoveOut {
  from {transform: translateY(0)}
  to {transform: translateY(-32px)}
}

@keyframes wlMoveIn {
  from {transform: translateY(-32px)}
  to {transform: translateY(0px)}
}

@keyframes scoreSlide {
  from {transform: translateX(0px)}
  to {transform: translateX(-98px)}
}


.cambg {
  position: absolute;
  width: 960px;
  height: 1080px;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.p1.cambg {
  left: 0;
  -webkit-mask-image: url("../P1CameraBorder.png");
  background: var(--p1-score-bg-color);
}

.p2.cambg {
  right: 0;
  -webkit-mask-image: url("../P2CameraBorder.png");
  background: var(--p2-score-bg-color);
}