#mainChatContainer {
  background-color: rgb(226 226 226 / 65%);
  border: 2px outset black;
  grid-column: 1 / span 7;
  grid-row: 4 / span 5;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

#mainChatContainer p {
  margin: 0;
  font-weight: 600;
}
#mainChatContainer #attackAgain {
  margin: 5px auto;
}
#mainChatContainer .myDmg {
  font-size: 25px;
  border: 3px rgba(225, 49, 49, 0.629) solid;
  border-radius: 50px;
  padding: 1px;
}
#mainChatContainer .enemyDmg {
  font-size: 25px;
  color: rgba(255, 0, 0, 0.629);
}
/* PLAYER */
#playerContainer {
  display: grid;
  grid-column: 1 / span 2;
  grid-row: 9 / span 3;
}

#playerContainer #player {
  display: grid;
  grid-area: 1 / 1 / auto / auto;
  transition: transform 0.5s ease;
}

#statPlayerContainer {
  background-color: rgb(226 226 226 / 50%);
  border: 1px dotted black;
  grid-column: 3 / span 2;
  grid-row: 9 / span 3;
}
#statPlayerContainer p {
  margin: 0;
}

/* FOR THE DICE ETC */
#actionContainer {
  background-color: rgb(226 226 226 / 50%);
  border: 2px solid tomato;
  grid-column: 5 / span 3;
  grid-row: 9 / span 3;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

/* ENEMY */

#enemyContainer {
  display: grid;
  grid-column: 6 / span 2;
  grid-row: 1 / span 3;
}
#enemyContainer .opponent {
  width: 100%;
  animation: breathing 5s infinite;
  transition: transform 0.5s ease;
}
.attackMovement {
  transform: translate(-50px, 100px);
}

.playerAttackMovement {
  transform: translate(50px, -100px);
}
@keyframes breathing {
  0% {
    width: 100%;
  }
  25% {
    width: 97%;
  }
  50% {
    width: 100%;
  }
  75% {
    width: 97%;
  }
  100% {
    width: 100%;
  }
}
#statEnemyContainer {
  background-color: rgb(226 226 226 / 50%);
  border: 1px dotted black;
  grid-column: 4 / span 2;
  grid-row: 1 / span 3;
}

#enemyChatContainer {
  background-color: rgba(52, 49, 49, 0.978);
  color: rgb(226 226 226 / 50%);
  font-weight: 700;
  font-size: large;
  border: 1px solid black;
  grid-column: 1 / span 3;
  grid-row: 1 / span 3;
}

#hpFight {
  background-color: coral;
  padding: 0 4px 4px 4px;
  font-weight: 600;
}

#hpPlayer {
  background-color: coral;
  padding: 0 4px 4px 4px;
  font-weight: 600;
}