* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
               "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
               sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.App {
  background-color: #282c34;
  min-height: 100vh;
  color: white;
  padding: 2rem;
}

.ConnectionIndicator {
  width: 2rem;
  height: 2rem;
  border-radius: 2rem;
  position: fixed;
  top: 2rem;
  right: 2rem;
}
.ConnectionIndicator--connected {
  background-color: green;
}
.ConnectionIndicator--disconnected {
  background-color: indianred;
}

.Messages {
  margin-bottom: 8rem;
  display: flex;
  flex-direction: column-reverse;
}

.MessageForm {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem;
  background-color: inherit;
}

.MessageInput {
  width: 100%;
}