html {
  height: 100vh;
  height: 100dvh;
}
body {
  overflow: hidden;
  background-color: #051116;
  height: 100%;
  margin: 0;
  display: grid;
  grid-template-rows: [top headertop] 2fr [headerbottom maintop] 27fr [mainbottom inputtop] 3fr [inputbottom footertop] 4fr [footerbottom];
  grid-template-columns: [p0 left] 1fr [p1 midleft] 1fr [p2 midright] 1fr [p3 right];
}
#tabhighlight {
  background-color: #293550;
  grid-row: footertop / footerbottom;
  pointer-events: none;
}
#header {
  grid-row: headertop / headerbottom;
  grid-column: left / right;
  background-color: #112233;
}
#headercontent {
  position: absolute;
  left: 14%;
  top: .2em;
  font-size: 5em;
  color: #fff;
}
#main {
  grid-row: maintop / mainbottom;
  grid-column: left / right;
  background-color: #06111B;
  overflow-y: scroll;
}
#input {
  grid-row: inputtop / inputbottom;
  grid-column: left / midright;
  background-color: #000;
  overflow-y: scroll;
}
.message {
  width: calc(100% - 3ch);
  left: 3ch;
  position: relative;
}
.author {
  font-size: 4em;
  color: #fff;
}
.msgcontent {
  font-size: 2.5em;
  color: #fff;
}
.msgcontent.undelivered {
  color: #888;
}
#footer {
  grid-row: footertop / footerbottom;
  grid-column: left / right;
  background-color: #112233;
}