html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.container {
  box-sizing: border-box;
  padding: .6em;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  color: #ccc;
  font-family: monospace;
  overflow: hidden;
}

.message {
  display: flex;
  max-width: 80em;
}

.gutter {
  display: flex;
  padding-right: .6em;
  margin-right: .6em;
  border-right: 2px solid #ccc;
}

.timestamp {
  width: 12em;
}

.author {
  width: 3em;
  text-align: right;
}

.body {
  padding-bottom: 1.2em;
}

.ai { color: #eccc68}
.ak { color: #ff7f50}
.ap { color: #7bed9f}
.ha { color: #ff6b81}
.hk { color: #5352ed}
.ja { color: #70a1ff}
.jr { color: #2ed573}
.jj { color: #1e90ff}
.jv { color: #3742fa}
.kt { color: #a4b0be}
.mh { color: #ff6348}
.mo { color: #ff6b81}
.mp { color: #5352ed}
.mr { color: #eccc68}
.ms { color: #ff7f50}
.mt { color: #7bed9f}
.pi { color: #70a1ff}
.tl { color: #2ed573}
.tr { color: #1e90ff}
.tv { color: #3742fa}
.vh { color: #a4b0be}
.vv { color: #ff6348}