body {
  display: flex;
  flex-direction: column;
  line-height: 0.8;
}

.mainContainer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-grow: 1;
  justify-content: space-around;
  align-items: stretch;
}

.players {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  flex-grow: 1;
}

.playerRow {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
}

.player {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
}

.player[player='0'] {
  background: radial-gradient(rgba(255, 0, 0, 0.5) 0%, rgba(255, 0, 0, 0.4) 40%, rgba(255, 0, 0, 0) 70%);
}

.player[player='1'] {
  background: radial-gradient(rgba(0, 0, 255, 0.5) 0%, rgba(0, 0, 255, 0.4) 40%, rgba(0, 0, 255, 0) 70%);
}

.player[player='2'] {
  background: radial-gradient(rgba(0, 255, 255, 0.5) 0%, rgba(0, 255, 255, 0.4) 40%, rgba(0, 255, 255, 0) 70%);
}

.player[player='3'] {
  background: radial-gradient(rgba(255, 165, 0, 0.5) 0%, rgba(255, 165, 0, 0.4) 40%, rgba(255, 165, 0, 0) 70%);
}


.lifeBox {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
}

.life {
  color: white;
  font-size: 2em;
  font-weight: bold;
}

.life[lowHealth='true'] {
  animation-name: lowHealth;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes lowHealth {
  to {
    color: pink;
  }
}


.infect {
  color: darkgreen;
  background-image: url('../img/infect.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}


.commanderDmgColumn {
  display: flex;
  flex-direction: column;
}

.commanderDmg {
  text-align: center;
  font-size: 0.7em;
}

.commanderDmg[highCmdrDmg='true'] {
  animation-name: highCmdrDmg;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes highCmdrDmg {
  to {
    filter: brightness(150%);
  }
}

.commanderDmg[commander='0'] {
  color: rgb(255, 120, 120);
}

.commanderDmg[commander='1'] {
  color: rgb(120, 120, 255);
}

.commanderDmg[commander='2'] {
  color: rgb(120, 255, 255);
}

.commanderDmg[commander='3'] {
  color: rgb(255, 200, 120);
}


.dragChange {
  cursor: -webkit-grab;
}

.dragElement {
  position: absolute;
  font-size: 0.5em;
  color: yellow;
  z-index: 2;
}

.positive {
  color: lightgreen;
}

.negative {
  color: red;
}


.undoElement {
  position: absolute;
  height: 0.7em;
  width: 0.7em;
  background-image: url('../img/undo.png');
  background-repeat: no-repeat;
  background-size: contain;
}

.checkElement {
  position: absolute;
  height: 0.7em;
  width: 0.7em;
  background-image: url('../img/check.png');
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 3;
}

.checkElement[disabled='true'] {
  filter: grayscale();
}

.checkElement:hover:not([disabled='true']) {
  filter: brightness(150%);
}

.playerForm {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.crown {
  height: 0.5em;
  width: 0.5em;
  background: url('../img/crown.png');
  background-repeat: no-repeat;
  background-size: contain;
}

.crown[value=''] {
  filter: grayscale();
}

.nameField {
  width: 9em;
  font-size: 0.3em;
  border: none;
  border-radius: 0.5em;
  text-align: center;
}

.nameField[player="0"] {
  background: rgba(255, 0, 0, 0.6);
}

.nameField[player="1"] {
  background: rgba(0, 0, 255, 0.6);
}

.nameField[player="2"] {
  background: rgba(0, 255, 255, 0.6);
}

.nameField[player="3"] {
  background: rgba(255, 165, 0, 0.6);
}

.curtain {
  opacity: 0.75;
  background-color: black;
  height: 100vh;
  width: 100vw;
  position: absolute;
  z-index: 2;
}