html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  font-family: sans-serif;
  user-select: none;
}

* {
  font-family: sans-serif;
}

#container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  height: 90vh;
  width: 92vw;
  max-width: 92vw;
  margin: 4vh 5vw;
}

.hi.card { background-color: khaki; }
.hi.back { background-color: tomato; }


.card {
  height: min(15vw, 15vh);
  width: min(14vw, 14vh);
  padding-left: min(1vw, 1vh);
  background-color: white;
  border: min(0.4vw, 0.4vh) solid black;
  border-radius: min(1vw, 1vh);
  font-size: min(7vw, 7vh);
}

#stock {
  margin: min(5vw, 5vh);
  height: min(15vw, 15vh);
  width: min(14vw, 14vh);
  padding-left: min(1vw, 1vh);
}
.stack {
  position: relative;
}
.stacked {
  position: absolute;
  top: 0px;
  left: 0px;
}

.back {
  background-color: maroon;
  color: rgba(0, 0, 0, 0);
}
.empty {
  background-color: rgba(0, 0, 0, 0);
  border: min(0.4vw, 0.4vh) solid rgba(0, 0, 0, 0);
  color: rgba(0, 0, 0, 0);
}

.zombie { background-color: darkSeaGreen; }
.zombie.hi { background-color: seaGreen; }
.zombie.back.hi { background-color: tomato; }
.zombie.back {
  background-color: maroon;
  color: rgba(0, 0, 0, 0);
}