style.css

.container {
  text-align: center;
  padding: 2rem 15rem;
}

.messageContainer {
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding: 1rem 1rem;
  overflow-y: auto;
  height: 15rem;
  border: 2px solid gray;
}

.messageContainer .serverMessage {
  text-align: right;
  color: blue;
}
.messageContainer .clientMessage {
  text-align: left;
  color: green;
}
.messageContainer .infoMessage {
  text-align: center;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  color: grey;
  font-weight: bold;
}
.message {
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -ms-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;

}
.message.fade {
  opacity: 1;
}

.divider { 
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
}