body,
html {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(219, 219, 219);
  color: rgb(39, 39, 39);
}

* {
  margin: 0;
}
.messagesBoard {
  height: 80%;
  width: 60%;
  overflow: scroll;
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.messages {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;

  gap: 1rem;
}

.form {
  display: flex;
  flex-direction: column;

  margin-top: 3rem;
  gap: 1rem;
  width: 70%;
}

.formLabel {
  font-weight: bold;
}
.formText {
  width: 100%;
  height: 5rem;
  resize: none;
}
.formButton {
  width: 300px;
}

.messageAuthor {
  font-weight: bold;
  font-size: 1.2rem;
}
.messageDate {
  color: gray;
  font-size: 0.8rem;
}