:root {
  --health-color-1: #cb455e;
  --health-color-2: #f3748c;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #784e3a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%23ac775e' fill-opacity='0.44'%3E%3Cpath fill-rule='evenodd' d='M0 0h40v40H0V0zm40 40h40v40H40V40zm0-40h2l-2 2V0zm0 4l4-4h2l-6 6V4zm0 4l8-8h2L40 10V8zm0 4L52 0h2L40 14v-2zm0 4L56 0h2L40 18v-2zm0 4L60 0h2L40 22v-2zm0 4L64 0h2L40 26v-2zm0 4L68 0h2L40 30v-2zm0 4L72 0h2L40 34v-2zm0 4L76 0h2L40 38v-2zm0 4L80 0v2L42 40h-2zm4 0L80 4v2L46 40h-2zm4 0L80 8v2L50 40h-2zm4 0l28-28v2L54 40h-2zm4 0l24-24v2L58 40h-2zm4 0l20-20v2L62 40h-2zm4 0l16-16v2L66 40h-2zm4 0l12-12v2L70 40h-2zm4 0l8-8v2l-6 6h-2zm4 0l4-4v2l-2 2h-2z'/%3E%3C/g%3E%3C/svg%3E");}
#title {
  font-size: 60px;
  font-family: "VT323", monospace;
  margin: 0;
  color: goldenrod;
}

.gameContainer {
  width: 1280;
  height: 720;
  position: relative;
  border: 5px solid goldenrod;
  box-shadow:
  inset rgb(248, 191, 46) 0 0 0 3px,
  inset goldenrod 0 0 0 4px;
}

#game {
  width: 1280;
  height: 720;
  z-index: -1;
}

#hud {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 1280;
  height: 720;
  z-index: 100;
}

.rematch {
    background-color: #AC775E;
    border: 2px solid goldenrod;
    width: 400px;
    height: 75px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
    box-shadow:
    inset rgb(248, 191, 46) 0 0 0 3px,
    inset goldenrod 0 0 0 4px;


}

.button {
  background-color: goldenrod;
  width: 100px;
  height: 50px;
  font-size: 25px;
  border: 1px solid goldenrod;
  border-radius: 0;
  font-family: "VT323", monospace;
  color: rgb(125, 92, 11);
  z-index: 100;
  box-shadow:
  inset rgb(248, 191, 46) 0 0 0 2px,
  inset goldenrod 0 0 0 1px;

}

.button:hover{
  cursor: pointer;
  scale: 0.95;
}

.healthBar {
  height: 30px;
  position: absolute;
  transition-property: width;
  transition-duration: 0.5s;
  z-index: 5;
}


.muteButton {
  top: 6%;
  left: 70%;
  height: 30px;
  position: absolute;
  transition-property: width;
  transition-duration: 0.5s;
  z-index: 100;
  scale: 1.5;
}

.muteButton:hover {
  cursor: pointer;
  scale: 1.7;
}


#player1 {
  top: 5.58%;
  background: rgb(203, 69, 94);
  background: linear-gradient(
    180deg,
    rgba(203, 69, 94, 1) 72%,
    rgba(193, 57, 82, 1) 72%
  );
  left: 7.8%;
}

#player2 {
  top: 5.58%;
  background: rgb(203, 69, 94);
  background: linear-gradient(
    180deg,
    rgba(203, 69, 94, 1) 72%,
    rgba(193, 57, 82, 1) 72%
  );
  right: 7.8%;
}

.startGame {
  background-color: #AC775E;
  border: 2px solid goldenrod;
  width: 400px;
  height: 75px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -200px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
  inset rgb(248, 191, 46) 0 0 0 3px,
  inset goldenrod 0 0 0 4px;

}

.startButton {
  background-color: goldenrod;
  width: 100px;
  height: 50px;
  font-size: 25px;
  border: 1px solid goldenrod;
  border-radius: 0;
  font-family: "VT323", monospace;
  color: rgb(125, 92, 11);
  z-index: 100;
  box-shadow:
  inset rgb(248, 191, 46) 0 0 0 2px,
  inset goldenrod 0 0 0 1px;

}