body {
  background: #000;
  text-align: center;
  font-family: "VT323", monospace;
}

h2 {
  padding: 0.2em 0.2em 0.5em;
  font-size: 3rem;
}

button {
  margin: 0.3em 0 0.6em;
  padding: 0.1em;
  background: inherit;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  border: 0.1em solid #000;
  border-color: inherit;
  border-radius: 0.3em;
  cursor: pointer;
}

.container {
  display: flex;
  width: 100%;
}

.info {
  width: 20%;
  height: 100%;
  margin: 1em 0.4em;
  background: #000;
  color: #F5BE33;
  font-size: 2rem;
  border: 0.2em solid #F5BE33;
  border-radius: 0.5em;
}

.info-2 {
  color: #518CC7;
  border-color: #518CC7;
}

.info-3 {
  color: #195B1B;
  border-color: #195B1B;
}

.info-4 {
  color: #A258A8;
  border-color: #A258A8;
}

.info-5 {
  color: #F8F4EB;
  border-color: #F8F4EB;
}

.log {
  padding: 0.5em 0.2em;
}

.hp-good {
  color: green;
}

.hp-warn {
  color: yellow;
}

.hp-danger {
  color: red;
}

.modal {
  position: absolute;
  top: 40%;
  left: 30%;
  width: 400px;
  height: 200px;
  background: rgba(0, 0, 0, 0.8);
  color: #F8F4EB;
  font-size: 2rem;
  border: 0.2em solid #F8F4EB;
  border-radius: 0.3em;
}
.modal h3 {
  padding: 0.3em;
  font-size: 3rem;
}

.defeated {
  color: red;
  border-color: red;
}

.game {
  width: 80%;
  margin: 1em;
}

.hp-bar {
  position: relative;
  top: -4px;
  left: 1px;
  width: 30px;
  height: 5px;
  background: red;
}

.hp-life {
  position: relative;
  height: 5px;
  background: green;
}

.row {
  line-height: 0px;
}

.tile {
  display: inline-block;
  height: 2em;
  width: 2em;
}
@media (max-width: 1300px) {
  .tile {
    height: 1.5em;
    width: 1.5em;
  }
}
@media (max-width: 1000px) {
  .tile {
    height: 1em;
    width: 1em;
  }
}

.wall-1 {
  background: #F5BE33;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") 0 0;
}

.wall-2 {
  background: #518CC7;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") 0 -32px;
}

.wall-3 {
  background: #195B1B;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") 0 -64px;
}

.wall-4 {
  background: #A258A8;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") 0 -96px;
}

.wall-5 {
  background: #F8F4EB;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") 0 -128px;
}

.floor-1 {
  background: #f7cd64;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") -32px 0;
}

.floor-2 {
  background: #78a6d3;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") -32px -32px;
}

.floor-3 {
  background: #248327;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") -32px -64px;
}

.floor-4 {
  background: #b57ab9;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") -32px -96px;
}

.floor-5 {
  background: white;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") -32px -128px;
}

.player-1 {
  background: blue;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") -64px 0;
}
.player-2 {
  background: blue;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") -64px -32px;
}

.player-3 {
  background: blue;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") -64px -64px;
}

.player-4 {
  background: blue;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") -64px -96px;
}

.player-5 {
  background: blue;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") -64px -128px;
}

.enemy-1 {
  background: red;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") -96px 0;
}

.enemy-2 {
  background: red;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") -96px -32px;
}

.enemy-3 {
  background: red;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") -96px -64px;
}

.enemy-4 {
  background: red;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") -96px -96px;
}

.boss {
  background: red;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") -96px -128px;
}

.chest-1, .chest-3, .chest-4 {
  background: brown;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") -128px 0;
}

.chest-2 {
  background: brown;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") -128px -32px;
}

.hp-1 {
  background: green;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") -160px 0;
}

.hp-2 {
  background: green;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") -160px -32px;
}

.hp-3 {
  background: green;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") -160px -64px;
}

.hp-4 {
  background: green;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") -160px -96px;
}

.hp-5 {
  background: green;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") -160px -128px;
}

.weapon-1 {
  background: orange;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") -192px 0;
}

.weapon-2 {
  background: orange;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") -192px -32px;
}

.weapon-3 {
  background: orange;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") -192px -64px;
}

.weapon-4 {
  background: orange;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") -192px -96px;
}

.armour-1 {
  background: #bbb;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") -224px 0;
}

.armour-2 {
  background: #bbb;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") -224px -32px;
}

.armour-3 {
  background: #bbb;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") -224px -64px;
}

.armour-4 {
  background: #bbb;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") -224px -96px;
}

.crystal-1 {
  background: purple;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") -256px 0;
}

.crystal-2 {
  background: purple;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") -256px -32px;
}

.crystal-3 {
  background: purple;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") -256px -64px;
}

.crystal-4 {
  background: purple;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") -256px -96px;
}

.door-1 {
  background: pink;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") 32px 0;
}

.door-2 {
  background: pink;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") 32px -32px;
}

.door-3 {
  background: pink;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") 32px -64px;
}

.door-4 {
  background: pink;
  background: url("https://www.dropbox.com/s/rvlgi9iemx2d6yp/sprite-map.png?raw=1") 32px -96px;
}