body {
  --hue: 40;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-content: center;
  justify-content: center;
  overflow: hidden;
  padding: 100px;
}

#select {
  position: fixed;
  top: 40px;
  right: 60px;
  display: flex;
  align-items: center;
  font-size: 20px;
}

select {
  width: 165px;
  padding: 8px 25px 8px 16px;
  border-radius: 100px;
  border: solid 1.5px black;
  font-size: 20px;
  margin-left: 15px;
}

#input-wrapper {
  position: fixed;
  bottom: 60px;
  width: 100%;
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 0 100px;
}

input {
  padding: 10px 25px;
  border-radius: 100px;
  border: solid 1.5px black;
  font-size: 20px;
  width: 100%;
}

input:focus,
select:focus,
button#send:focus {
  outline: solid 1px hsl(var(--hue), 50%, 50%);
  border: solid 1.5px hsl(var(--hue), 50%, 50%);
}

button#send {
  width: 150px;
}

#messages {
  margin-top: 50px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  overflow-y: scroll;
  margin-bottom: 40px;
  position: relative;
  padding-top: 150px;
}

#messages div#gradient {
  width: 100%;
  position: fixed;
  height: 150px;
  top: 150px;
  background: linear-gradient(white, transparent);
}

#messages::-webkit-scrollbar {
  display: none; /* Chrome, Safari & Opera */
}

#messages {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.message {
  padding: 8px 22px;
  border-radius: 40px;
  font-size: 25px;
  max-width: 75%;
}

.message.sent {
  background: hsl(var(--hue), 75%, 45%);
  color: white;
}

.message.answer {
  background: hsl(var(--hue), 75%, 85%);
  align-self: flex-end;
}