styles.css

* {
  margin:0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  flex-direction: column;
}


#playerHealth, #enemyHealth {
  background-color: darkred;
  height: 30px;
  width: 100%;
}

#main {
  position: relative;
  display: inline-block;
  width: 1024px;
}

#ui {
  position: absolute;
  display: flex;
  width: 100%;
  align-items: center;
  padding:20px;
}

#timer {
  background-color: black;
  width: 100px;
  height: 50px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(200, 200, 200);
  border: 4px solid rgb(200, 200, 200);
  font-family: 'Press Start 2P', cursive;
}

#playerBar {
  position: absolute;
  background-color: #818CF8;
  top:0;
  bottom: 0;
  right: 0;
  width: 100%;
}

#enemyBar {
  position: absolute;
  background-color: #818CF8;
  top:0;
  bottom: 0;
  right: 0;
  left:0;
}

.placeHolderParent {
  position: relative;
  width: 100%;
}

.playerParent {
  display: flex;
  justify-content: flex-end;
  border: 4px solid rgb(200, 200, 200);
  border-right: none;
}

.enemyParent {
  border: 4px solid rgb(200, 200, 200);
  border-left: none;
}

#label {
  position: absolute;
  color: white;
  display: none;
  align-items: center;
  justify-content: center;
  top:0;
  right:0;
  bottom:0;
  left:0;
  font-family: 'Press Start 2P', cursive;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /*Makes it expand throughout the entire canvas and centers it without need for wrapper*/
}

#gameOver {
  padding-bottom: 10px;
}

.controls {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1024px;
  flex-direction: column;
}

.description, .tip {
  font-size: 20px;
}