body {
  margin: 0;
  padding: 0;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.container {
  /* Create three section grid for page */
  display: grid;
  grid-template-areas:
    "healthbar"
    "sprite"
    "moves";
  height: 100vh;
  width: 100vw;
}
.container > * {
  border: 2px solid black;
  height: 100%;
  padding: 1.5rem;
  text-align: center;
}
.healthbar {
  /* Display in top third of page */
  grid-area: healthbar;
  display: grid;
  grid-template-areas: "healthbar-left healthbar-right";
  height: auto;
  background-color: black;
  /* padding: 0.3rem; */
  font-size: 20px;
}
/* .healthbar > * {
  border: 1px solid blueviolet;
} */
#healthbar-left {
  grid-area: healthbar-left;
  width: 95%;
}
#healthbar-left > * {
  /* border: 1px solid black; */
  padding: 1rem;
  background-color: slateblue;
  width: 100%;
  position: relative;
}
#healthbar-right {
  grid-area: healthbar-right;
  width: 95%;
}
#healthbar-right > * {
  /* border: 1px solid black; */
  padding: 1rem;
  background-color: firebrick;
  width: 100%;
  position: relative;
}
#healthbar-left-hp {
  background-color: green;
  width: 100%;
  height: 100%;
  transition: width 0.5s;
  color: white;
  /* padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 1rem; */
}
#healthbar-right-hp {
  background-color: green;
  width: 100%;
  height: 100%;
  transition: width 0.5s;
  color: white;
  /* padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 1rem; */
}
.sprite {
  /* Display in middle third of page */
  grid-area: sprite;
  display: grid;
  grid-template-areas: "sprite-left sprite-right";
  height: auto;
  background-color: black;
  /* padding: 6.5rem; */
}
/* .sprite > * {
  border: 1px solid goldenrod;
} */
#sprite-left {
  grid-area: sprite-left;
  display: grid;
  grid-template-areas:
    "pokemon-img-left"
    "pokemon-message-left";
}
#sprite-left > * {
  border: 2px solid black;
  background-color: white;
  width: 100%;
  height: 100%;
}
#pokemon-img-left {
  padding: 0rem;
  width: 250px;
  height: 250px;
}
#pokemon-message-left {
  /* padding: 2rem; */
  background-color: palegoldenrod;
}

#sprite-right {
  grid-area: sprite-right;
  display: grid;
  grid-template-areas:
    "pokemon-img-right"
    "pokemon-message-right";
}
#sprite-right > * {
  border: 2px solid black;
  background-color: white;
  width: 100%;
  height: 100%;
}
#pokemon-img-right {
  padding: 0rem;
  width: 250px;
  height: 250px;
}
#pokemon-message-right {
  /* padding: 2rem; */
  background-color: palegoldenrod;
}
.moves {
  /* Display in bottom third of page */
  grid-area: moves;
  display: grid;
  grid-template-areas: "moves-left moves-right";
  height: auto;
  background-color: black;
}
.moves > * {
  border: 1px solid black;
  background-color: olivedrab;
  height: 100%;
  width: 100%;
}
#moves-left {
  grid-area: moves-left;
  display: grid;
  grid-template-areas:
    "pokemon-left-move1 pokemon-left-move2"
    "pokemon-left-move3 pokemon-left-move4";
}
/* Moves Left */
#moves-left > * {
  padding: 2.5rem;
  background-color: slateblue;
  border: 5px solid black;
  font-size: 20px;
  letter-spacing: 3px;
  font-weight: 500;
  color: white;
}
#moves-left-move1 {
  grid-area: pokemon-left-move1;
}
#moves-left > *:hover {
  background-color: white;
  color: slateblue;
  cursor: pointer;
}
#moves-right > *:hover {
  background-color: white;
  color: firebrick;
  cursor: pointer;
}
#moves-left-move2 {
  grid-area: pokemon-left-move2;
}
#moves-left-move3 {
  grid-area: pokemon-left-move3;
}
#moves-left-move4 {
  grid-area: pokemon-left-move4;
}
/* Moves Right */
#moves-right {
  grid-area: moves-right;
  display: grid;
  grid-template-areas:
    "pokemon-right-move1 pokemon-right-move2"
    "pokemon-right-move3 pokemon-right-move4";
}
#moves-right > * {
  padding: 2.5rem;
  background-color: firebrick;
  border: 5px solid black;
  font-size: 20px;
  letter-spacing: 3px;
  font-weight: 500;
  color: white;
}
#moves-right-move1 {
  grid-area: pokemon-right-move1;
}
#moves-right-move2 {
  grid-area: pokemon-right-move2;
}
#moves-right-move3 {
  grid-area: pokemon-right-move3;
}
#moves-right-move4 {
  grid-area: pokemon-right-move4;
}