@font-face {
  font-family: comicBold;
  src: url('./assets/comicBold.ttf');
}

.idInput {
  height: 5%;
  width: 25%;
  margin: auto;
  padding: 0.8vh;
}

.idInput[type="text"]
{
  font-family: comicBold;
}

.roomButton {
  height: 5%;
  width: 25%;
  margin: auto;
  padding: 3vh;
  font-family: comicBold;
  text-align: center;
  line-height: 5%;
}

.chat {
  margin: 4px, 4px;
  padding: 4px;
  overflow-x: hidden;
  overflow-y: auto;
  grid-area: 1 / 1 / 11 / 3;
}

.newMessage {
  grid-area: 11 / 1 / 12 / 3;
}

.submitIt {
  grid-column: 3;
  grid-row: 2;
  font-family: comicBold;
  grid-area: 12 / 1 / 13 / 3;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(10, 1fr); 
  grid-template-rows: repeat(12, 1fr); 
  grid-column-gap: 0px;
  grid-row-gap: 0px; 
  margin: auto;
  height: 100vh;
  width: 100vw;
}

.game {
  grid-area: 1 / 3 / 13 / 11;
}

.msg {
  font-family: comicBold;
  word-wrap: break-word;
}

textarea {
  font-family: comicBold;
  resize: none;
  box-sizing: border-box;
}