body {
  background-image: url("img/water.jpg");
  background-size: cover;
}

.map-container {
  position: absolute;
  margin: 0 auto;
  left: 50%;
  margin-left: -300px;
  margin-top: 100px;
  margin-bottom: 200px;
  border: 3px solid black;
  width: 600px;
  height: 600px;
  background: url("img/sand.jpg");
}

.row {
  display: flex;
}

.column {
  width: 30px;
  height: 30px;
  text-align: center;
  font-family: Comic Sans MS;
}

.border {
  background-image: url("img/border.jpg");
  background-size: cover;
}

.head-right {
  background-image: url("img/head-right.png");
  background-size: cover;
}

.head-left {
  background-image: url("img/head-left.png");
  background-size: cover;
}

.head-top {
  background-image: url("img/head-top.png");
  background-size: cover;
}

.head-bottom {
  background-image: url("img/head-bottom.png");
  background-size: cover;
}

.body-l-r {
  background-image: url("img/body-left-to-right.png");
  background-size: cover;
}

.body-r-l {
  background-image: url("img/body-right-to-left.png");
  background-size: cover;
}

.body-t-b {
  background-image: url("img/body-top-to-bottom.png");
  background-size: cover;
}

.body-b-t {
  background-image: url("img/body-bottom-to-top.png");
  background-size: cover;
}

.tail-right {
  background-image: url("img/tail-right.png");
  background-size: cover;
}

.tail-left {
  background-image: url("img/tail-left.png");
  background-size: cover;
}

.tail-top {
  background-image: url("img/tail-top.png");
  background-size: cover;
}

.tail-bottom {
  background-image: url("img/tail-bottom.png");
  background-size: cover;
}

.corner-l-t {
  background-image: url("img/corner-left-top.png");
  background-size: cover;
}

.corner-l-b {
  background-image: url("img/corner-left-bottom.png");
  background-size: cover;
}

.corner-r-t {
  background-image: url("img/corner-right-top.png");
  background-size: cover;
}

.corner-r-b {
  background-image: url("img/corner-right-bottom.png");
  background-size: cover;
}

.apple {
  background-image: url("img/apple.png");
  background-size: cover;
}

.jeden {
  background-color: red;
}

.dwa {
  background-color: green;
}

.counter-container {
  width: 250px;
  height: 100px;
  background-image: url("img/border.jpg");
  background-size: cover;
  border: 5px solid black;
  margin: 30px;
}

.apple-counter {
  float: left;
  width: 100px;
}

.counter {
  float: left;
  width: 150px;
  color: white;
  font-family: Comic Sans MS;
  font-size: 60px;
  font-weight: bold;
  text-align: center;
  margin-top: 5px;
}