body {
  height: 100%;
  width: 100%;
  font-family: 'Fira Sans', sans-serif;

}

#header {
  text-align: center;
  font-size: 50px;
}

#message_board {
  padding-top: 10px;
  text-align: center;
  font-size: 32px;
  padding-bottom: 20px;
  margin: auto;
  height: 40px;
}
.message_board_animation{
  /* animation */
  white-space: nowrap;
  overflow: hidden;
  animation: type 2s linear 0s ;
}
@keyframes type {
  from {
    width: 0;
  } to {
    width: 700px;
  }
}

#gameboards_container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 50px;
  
}
.gameboard {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  background-image: linear-gradient(#84C0C6, #BCC1BA);

  box-shadow: 2px 2px 2px gray;

  width: 400px;
  height: 400px;
}
#gameboard1{
  
}
#gameboard2{

}


/* drag and drop */
#ship_container{
  /* margin-top: 10px; */
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  width: 200px;
}
.hide {
  display:none;
}
.drag-over {

}
.valid_drop {
  background-color: greenyellow;
}
.invalid_drop {
  background-color: red;
}
#ship_orientation_button{
  width: 100%;
  height: 35.83px;
  border: none;
}





.player1_tile {
  width: 40px;
  height: 40px;

  /* box-shadow: 1px 1px 1px gray; */
}
.player2_tile {
  width: 40px;
  height: 40px;
}
.player2_tile:not(.nohover):hover{
  width: 40px;
  height: 40px;
  opacity: 20%;
  background-color: gray;
  /* margin: 5px; */
  /* background-color: rgb(218, 115, 115); */
  /* border-radius: 50%; */
  display: inline-block;
}


.ship {
  width: 30px;
  height: 30px;
  margin: 5px;
  display: inline-block;
  box-shadow: 1px 1px 1px gray;
}
.Carrier {
  background-color: #AFA98D;
}
.Battleship {
  background-color: #89A894; 
}
.Cruiser {
  background-color: #4B644A;
}
.Submarine {
  background-color: #49393B;
}
.Destroyer {
  background-color: gray;
}
.horizontal {

}
.vertical {
  flex: 0 0 30px;
}


.miss{
  width: 30px;
  height: 30px;
  margin: 5px;
  opacity: 50%;
  background-color: white;
  display: inline-block;
  box-shadow: 1px 1px 1px gray;
}

.hit{
  width: 30px;
  height: 30px;
  margin: 5px;
  /* opacity: 50%; */
  background-color: red;
  /* border-radius: 50%; */
  display: inline-block;
  box-shadow: 1px 1px 1px gray;
}

#gameover_container {
  display: none;
  z-index: 1;
  text-align: center;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  position: fixed;

}
#new_game_button_container{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 230px;
  height: 200px;  
  background-color: gray;
  opacity: 80%
}
#new_game_button {
  border: none;
  z-index: 1;
  margin: auto;
  width: 200px;
  height: 50px;
}