html, body {
  height: 100vh;
}

body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: minmax(min-content, 1fr) minmax(min-content, 1fr) minmax(min-content, 1fr) 1fr; /* Ajuste as linhas para caber no conteúdo */
  font-family: 'Myriad Pro', sans-serif;
  background-color: #000;
  overflow: hidden; /* Evita a rolagem dentro do grid */
}

.logo1 {
  background-color: #000;
  grid-row-start: 1;
  grid-column: span 4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo1 > img, .logo2 > img {
  height: 112px;
}


.timer {
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12em;
  font-weight: bold;
  grid-row-start: 5;
  grid-column-start: 1;
  grid-row-end: 7;
  grid-column-end: 8;
}

.logo2 {
  background-color: #000;
  grid-row-start: 1;
  grid-column: span 4;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 120px;
  }
}

.fighter-1-name {
  background-color: #1120D9;
  color: #ffffff;
  /*font-size: 1.5em;*/
  font-size: 5em;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 3;
  grid-column-end: 6;
  border-radius: 60px 0px 0px 0px;
}

.fighter-1-team {
  color: #ffffff;
  /*font-size: 1.5em;*/
  font-size: 3em;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-row-start: 2;
  grid-column-start: 1;
  grid-row-end: 3;
  grid-column-end: 6;
}


.fighter-2-name {
  background-color: #fff;
  color: #000;
  /*font-size: 1.5em;*/
  font-size: 5em;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-row-start: 3;
  grid-column-start: 1;
  grid-row-end: 5;
  grid-column-end: 6;
  border-radius: 0px 0px 0px 60px;
}

.fighter-2-team {
  color: #000;
  /*font-size: 1.5em;*/
  font-size: 3em;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-row-start: 4;
  grid-column-start: 1;
  grid-row-end: 5;
  grid-column-end: 6;

}

.fighter-1-score {
  background-color: #22A203;
  color: #fff;
  font-size: 12em;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-row-start: 1;
  grid-column-start: 6;
  grid-row-end: 3;
  grid-column-end: 7;
}

.fighter-2-score {
  background-color: #239721;
  color: #fff;
  font-size: 12em;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-row-start: 3;
  grid-column-start: 6;
  grid-row-end: 5;
  grid-column-end: 7;
}

.fighter-1-adv {
  background-color: #FCFF5C;
  color: #000;
  /*font-size: 5em;*/
  font-size: 8em;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-row-start: 1;
  grid-column-start: 7;
  grid-row-end: 2;
  grid-column-end: 8;
  border-radius: 00px 60px 0px 0px;
}

.fighter-1-penal {
  background-color: red;
  color: #fff;
  /*font-size: 5em;*/
  font-size: 8em;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-row-start: 2;
  grid-column-start: 7;
  grid-row-end: 3;
  grid-column-end: 8;
  border-radius: 0px 0px 60px 0px;
}

.fighter-2-adv {
  background-color: #f0e916;
  color: #000;
  /*font-size: 5em;*/
  font-size: 8em;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-row-start: 3;
  grid-column-start: 7;
  grid-row-end: 4;
  grid-column-end: 8;
  border-radius: 00px 60px 0px 0px;
}

.fighter-2-penal {
  background-color: rgb(230, 1, 1);
  color: #fff;
  /*font-size: 5em;*/
  font-size: 8em;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-row-start: 4;
  grid-column-start: 7;
  grid-row-end: 5;
  grid-column-end: 8;
  border-radius: 0px 0px 60px 0px;
}

.fighter-1-controls-add {
  background-color: #BBBBBB;
  grid-row-start: 5;
  grid-column: span 4;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.controls-1 {
  background-color: #BBBBBB;
  grid-row-start: 5;
  grid-column: span 4;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.fighter-2-controls-add {
  background-color: #BBBBBB;
  grid-row-start: 5;
  grid-column: span 4;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.fighter-1-controls-sub {
  background-color: #BBBBBB;
  grid-row-start: 6;
  grid-column: span 4;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.controls-2 {
  background-color: #BBBBBB;
  grid-row-start: 6;
  grid-column: span 4;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.fighter-2-controls-sub {
  background-color: #BBBBBB;
  grid-row-start: 6;
  grid-column: span 4;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

input#fighter-1-name {
  text-align: center;
  background-color: #1120d900;
  color: #ffffff;
  font-weight: bold;
  border: none;
  width: 90%;
  text-transform: uppercase;
}

input#fighter-1-team {
  text-align: center;
  background-color: #1120d900;
  color: #ffffff;
  font-weight: bold;
  border: none;
  width: 90%;
  text-transform: uppercase;
}


input#fighter-2-name {
  text-align: center;
  font-weight: bold;
  border: none;
  width: 90%;
  text-transform: uppercase;
}

input#fighter-2-team {
  text-align: center;
  font-weight: bold;
  border: none;
  width: 90%;
  text-transform: uppercase;
}


input#fighter-1-name::placeholder { /* Most modern browsers support this now. */
  color: #fff;
}

input#fighter-2-name::placeholder {
  color: #000;
}


input#fighter-1-team::placeholder { /* Most modern browsers support this now. */
  color: #fff;
}

input#fighter-2-team::placeholder {
  color: #000;
}