html,
body {
  background-color: rgb(174, 233, 238);
}

h1 {
  color: rgb(22, 113, 121);
}

#game-option {
  /* display: flex;
  width: 530px;
  height: 100px; */
  background-color: rgb(29, 165, 178);
  gap: 10px;
}

.game-board {
  width: 300px;
  height: 300px;
  display: flex;
  flex-wrap: wrap;
}

.ship {
  display: flex;
}

.ship:hover {
  cursor: grab;
}

.block {
  width: 30px;
  height: 30px;
  border: solid gray 1px;
}

.deck {
  width: 30px;
  height: 30px;
  border: solid gray 1px;
}

.deck-one {
  background-color: #ed1a1a;
}

.deck-two {
  background-color: #3d1aed;
}

.deck-three {
  background-color: #72ed1a;
}

.deck-four {
  background-color: #ede21a;
}

.hover {
  background-color: gold;
}

.empty {
  background-color: rgb(255, 255, 255) !important;
}

.boom {
  background-image: url(./images/Cross.png) !important;
  background-size: cover;
}

#computer .block {
  background-color: #e38a82;
}

#game-info {
  font-size: 32px;
  height: 10vh;
}

#modal-body {
  font-size: 32px;
}

/* .taken {
  background-color: red !important;
}

.blocking {
  background-color: #4c9524 !important;
} */

@media (max-width: 641px) {
  .game-board {
    width: 250px;
    height: 250px;
  }

  .deck {
    width: 25px;
    height: 25px;
  }

  .block {
    width: 25px;
    height: 25px;
  }
}