body {
  background-color: #DEE7E7;
}

header {
  width: 100%;
  background-color: rgb(202, 202, 202);
  text-align: center;
  line-height: 70px;
}

main {
  width: 100%;
  max-width: 1000px;
  min-width: 300px;
  margin: 0 auto;
}

main * {
  margin: 0 auto;
}

#name-div {
  width:50%;
  flex-wrap:nowrap;
}

#grids {
  display:flex;
  flex-wrap: wrap;
}

#grids .grid {
  margin: 20px;
}

label {
  width:50%;
  font-size: large;
}

#player-name {
  width: 50%;
  height: 20px;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

#buttons {
  width: 80%
}

#buttons *, #restart{
  margin-top: 20px;
  font-size: large;
  background-color: rgb(172, 172, 172);
  height: 40px;
}

#info {
  margin-top: 30px;
  text-align: center;
  font-size: larger;
}

.grid-user {
  width: 330px;
  min-width: 330px;
  height: 330px;
  display: flex;
  flex-wrap: wrap;
  background-color: #053C5E;
  margin: 20px;
  color: white;
  margin: 0 auto;
}

.grid-computer div {
  background-color: #053C5E;
}

.grid-computer {
  width: 330px;
  min-width: 330px;
  height: 330px;
  display: flex;
  flex-wrap: wrap;
  background-color: #053C5E;
  margin: 20px;
  color:white;
  margin: 0 auto;
}

.grid div {
  width: 30px;
  height: 30px;
  text-align: center;
  vertical-align: middle;
  line-height: 30px;
  box-shadow: inset 0 0 1px #000;
}

.grid-display {
  max-width: 920px;
  margin: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.ship {
  width: 30px;
  height: 30px;
  background-color: orange;
  margin: 10px;
  display: flex;
  cursor: move;
}

.one-size-ship {
  width: 30px;
  background-color: rgba(51, 116, 255, 0.822);
  box-shadow: inset 0 0 1px #000;
}

.two-size-ship {
  width: 60px;
  background-color: rgba(216, 216, 216, 0.822);
  box-shadow: inset 0 0 1px #000;
}

.three-size-ship {
  width: 90px;
  background-color: rgb(144, 167, 12);
  box-shadow: inset 0 0 1px #000;
}

.four-size-ship {
  width: 120px;
  background-color: rgb(193, 176, 233);
  box-shadow: inset 0 0 1px #000;
}

.hide {
  display: none;
}

.unavailable {
  background-color: #011e30;
}

.ship div {
  width: 30px;
  height: 30px;
}

.two-size-ship-vertical {
  width: 30px;
  height: 60px;
  flex-wrap: wrap;
}

.three-size-ship-vertical {
  width: 30px;
  height: 90px;
  flex-wrap: wrap;
}

.four-size-ship-vertical {
  width: 30px;
  height: 120px;
  flex-wrap: wrap;
}

.hit {
  background-color: #A31621 !important;
}

.missed {
  background-color: #1F7A8C !important;
}

#board-names {
  width: 80%;
  display: flex;
  flex-wrap: nowrap;
  text-align: center;
  font-size:small;
}

#board-names h2 {
  width: 40%;
}

#user-ships, #opponent-ships {
  margin-top: 20px;
}

.chat {
  border: 1px solid black;
  margin: 20px;
  min-width: 330px;
  background-color: white;
  padding: 10px;
  margin: 15px auto;
}

#chat-text {
  width: 500px;
  height: 150px;
  max-width: 920px;
  margin: 10px;
  padding: 10px;
  overflow-y: scroll;
  box-shadow: inset 0 0 1px #000;
}

#chat-text div {
  padding: 2px;
}



input[type="text"] {
  width: 78%;
  height: 100%;
  padding-left: 9px;
}

input[type="button"] {
  width: 18%;
  height: 120%;
}

#chat-input {
  height: 30px;
  padding: 10px;
}

.msg-user {
  color: blue;
}

.msg-good {
  color: green;
}

.msg-bad {
  color: red;
}

#user-ships div {
  margin-left: auto; 
  margin-right: 0;
  height: 22px;
}

#opponent-ships div {
  height: 22px;
}

.hide-unavailable {
  background-color: #053C5E;
}

.hide-taken {
  background-color: rgba(216, 216, 216, 0.822);
}