:root {
  --border-radius-sm: 2px;
  --border-radius-md: 12px;
  --sent-messages-color: darkblue;
}

#messages {
  height: 50vh; 
  overflow-y: auto;
  border: 1px solid darkgray;
  padding-top: 5px;
  border-radius: 5px;
}

#questionTextBox {
  border-radius: var(--border-radius-md);
  border: 1px solid var(--sent-messages-color);
}


li {
  display: block;
  position: relative;
  clear: both;
  padding: 14px;
  width: auto;
  border-radius: 0px;
  word-wrap: break-word;
  min-width: 10px;
  max-width: 80%;
}

#messages li.other {
  float: right;
  color: black;
  background-color: whitesmoke;
  margin-bottom: 20px;
  margin-top: 10px;
  border: 1px solid darkgray;
  border-radius: var(--border-radius-sm);
}

#messages li.self {
  border: 1px solid var(--sent-messages-color);
  float: left;
  border-radius: var(--border-radius-md);
}