style.css

/* reset browser defaults */
*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  color: rgb(128, 128, 128);
  background-color:#141E30;
}

.grid {
  display: grid;
  grid-template: 1fr 8fr 1fr / 2fr 3fr 2fr;
  width: 100vw;
  height: 100vh;
  align-items: stretch;
}

/* not used, only for debugging purposes */
.box {
  border: 0px white solid;
}

.top {
  grid-column: 1 / span 3;
  padding: 1%;
}

.convo {
  grid-row: 2 / span 1;
  grid-column: 2 / span 1;
  margin: 10px auto;
  width: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.input {
  grid-row: 3 / span 1;
  grid-column: 2/ span 1;
  padding: 3%;
}

.sent {
  text-align: right;
}

.received {
  text-align: left;
}

.message {
  border-radius: 5px;
  padding: 5px;
  display: inline-block;
  text-align: justify;
  max-width: 80%;
}

.time {
  font-size: small;
  display: block;
  padding: 5px;
}

.received .message {
  background-color: lightgoldenrodyellow;
}

.sent .message {
  background-color: lightcyan;
}

/* to fill top of convo box and ensure bottom align of messages */
.fill {
  flex-grow: 1;
}

input[type=text], button {
  background-color: lightcyan;
  border: 0px;
  padding: 6px;
  border-radius: 5px;
}

input[type=text] {
  width: 60%;
}