body {
  font-size: 100%;
  color: white;
  background-color: black;
  margin: 0;
  padding: 0;
}

div#instruction {
  margin: auto 3%;
}

.action-bar button {
  color: white;
  background-color: green;
  border: 1px solid white;
  margin: 20px 0;
  padding: 1% 1%;
}

.action-bar button:hover {
  color: green;
  background-color: white;
  border: 1px solid green;
}

div#play-ground {
  display: none;
  margin-bottom: 30px;
}

div#noti,
div#timer {
  margin-bottom: 10px;
}

.box-container {
  border-spacing: 0;
  border-collapse: collapse;
  width: 40%;
  margin: 0 auto;
}

.box,
.box-miss,
.box-hit {
  width: 10%;
  padding-top: 10%;
}

.box,
.box-miss,
.box-hit {
  border: 1px solid green;
}

.box:hover,
.box-miss,
.box-hit {
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
}

.box:hover {
  background-image: url('img/crosshair.png');
}

.box-miss {
  background-image: url('img/miss.png');
}

.box-hit {
  background-image: url('img/ship.png');
}

.text-center {
  text-align: center;
}

@media (max-width: 720px) {
  .box-container {
    width: 50%;
  }
}

@media (max-width: 640px) {
  .box-container {
    width: 60%;
  }
}

@media (max-width: 570px) {
  .box-container {
    width: 70%;
  }
}

@media (max-width: 480px) {
  .box-container {
    width: 80%;
  }
}