body{
  background: url('../images/bg2.png');
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
#gameGrid{
  width: 1200px;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  color: aliceblue;
  border-radius: 20px;
  box-shadow: 5px 5px 5px blue;
}
#splash h2{
  font-size: 50px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  text-align: center;
  text-shadow: 2px 2px 2px red;
  cursor: pointer;
}
#splash p{
  font-size: 20px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  line-height: 30px;
  text-align: justify;
  margin: 50px;
  cursor: pointer;
}
#splash h3{
  font-size: 30px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  line-height: 40px;
  text-align: center;
  text-shadow: 2px 2px 2px red;
  cursor: pointer;
}
#userGrid {
  width: 400px;
  height: 400px;
  display: none;
  flex-wrap: wrap;
  background: #aaa;
}
#userGrid div {
  width: 40px;
  height: 40px;
  outline: 1px solid grey;
}
#controls{
  display: none;
  flex-direction: column;
  min-width: 150px;
  margin: 0 50px;
}
#enemyGrid {
  width: 400px;
  height: 400px;
  display: none;
  flex-wrap: wrap;
  background: #aaa;
}
#enemyGrid div {
  display: block;
  width: 40px;
  height: 40px;
  outline: 1px solid grey;
}
h1{
  font-size: 30px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  line-height: 80px;
  text-align: center;
}
#message{
  font-size: 25px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  line-height: 50px;
  text-align: center;
}
.btn-ships{
  margin: 10px 0;
  font-size: 25px;
  border-radius: 10px;
}
.Destroyer{
  background: aqua;
}
.Submarine{
  background: yellow;
}
.Cruiser{
  background: tan;
}
.Battleship{
  background: palevioletred;
}
.Carrier{
  background: lightgreen;
}
.Enemy-Destroyer, .Enemy-Submarine, .Enemy-Cruiser, .Enemy-Battleship, .Enemy-Carrier{
   background: blue;
}
#btn-restart{
  display: none;
}
.ocean{
  background: blue;
}
.hit{
  background: radial-gradient(red,white,crimson);
  border-radius: 5px;
}
.miss{
  background: radial-gradient(lightblue,white,blue);
  border-radius: 5px;
}

@media screen and (max-width: 800px){
  #splash h2{
  font-size: 30px;
  margin-top: 10px;
  }
  #splash p{
    font-size: 15px;
    line-height: 20px;
  }
  #gameGrid{
    height: 100%;
    flex-direction: column;
  }
  h1{
    font-size: 30px;
    line-height: 40px;
  }
}