html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, input, text, button {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  box-sizing: border-box;
  outline: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
  display: block;
}

body {
  line-height: 1;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Oxygen, Cantarell, sans-serif;
  font-weight: 400;
  -webkit-text-size-adjust: 100%;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

button, .button, input[type=submit] {
  cursor: pointer;
}

main {
  margin: 0 auto;
  max-width: 600px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

html, body {
  height: 100%;
}

.angry {
  background-color: #857b5e;
}

.angry main {
  background-image: url("../img/angry.jpg");
}

.lovely {
  background-color: #ddc6a6;
}

.lovely main {
  background-image: url("../img/lovely.jpg");
}

.child {
  background-color: #23767d;
}

.child main {
  background-image: url("../img/kid.jpg");
}

.maniac {
  background-color: #445251;
}

.maniac main {
  background-image: url("../img/maniac.jpg");
}

.politician {
  background-color: #445251;
}

.politician main {
  background-image: url("../img/politician.jpg");
}

.einstein {
  background-color: #445251;
}

.einstein main {
  background-image: url("../img/einstein.jpg");
}

.liar {
  background-color: #445251;
}

.liar main {
  background-image: url("../img/liar.jpg");
}

.shakespeare {
  background-color: #445251;
}

.shakespeare main {
  background-image: url("../img/shakespeare.jpg");
}

main {
  display: flex;
  flex-direction: column;
}

header {
  height: 5rem;
  padding-bottom: 1rem;
}

#chat {
  height: 100%;
  overflow: auto;
  padding: 2rem 1rem;
}

#input {
  display: flex;
  height: 5rem;
  justify-content: space-between;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.6);
}
#input textarea {
  height: 100%;
  flex: 0 0 72%;
  border: none;
  background: rgba(255, 255, 255, 0.6);
  outline: none;
  margin: 0;
  max-width: none;
  box-shadow: none !important;
  padding: 0.1rem 0.5rem;
  border-radius: 0.5rem;
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
}
#input #ask {
  background: #000;
  flex: 0 0 20%;
  margin-left: auto;
  color: #fff;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 0.3rem;
  border-radius: 0.5rem;
  cursor: pointer;
}

.bubble {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.2;
}
.bubble span {
  border-radius: 1rem;
  display: inline-block;
  padding: 0.5rem;
  color: #fff;
  max-width: 100%;
}
.bubble.bot {
  padding-right: 2rem;
}
.bubble.bot span {
  background: rgba(25, 39, 249, 0.7);
  color: #fff;
}
.bubble.client {
  padding-left: 2rem;
}
.bubble.client span {
  background-color: rgba(0, 0, 0, 0.7);
  text-align: left;
}
.bubble span.loading {
  min-width: 4rem;
  background-image: url("https://uk.match.com/faqtest/wp-content/themes/FAQ2021/assets/img/ellipse.gif");
  background-position: 50% 50%;
  background-size: 2rem auto;
  background-repeat: no-repeat;
}

span.hl {
  display: block;
  font-weight: 500;
  text-align: center;
  color: #fff;
  margin: 0.3rem 0;
}

select {
  appearance: none;
  border: 0;
  outline: 0;
  font: inherit;
  width: 20em;
  height: 3em;
  padding: 0 4em 0 1em;
  background: url(https://upload.wikimedia.org/wikipedia/commons/9/9d/Caret_down_font_awesome_whitevariation.svg) no-repeat right 0.8em center/1.4em, linear-gradient(to left, rgba(0, 0, 0, 0.9) 3em, rgba(0, 0, 0, 0.6) 3em);
  border-radius: 0.25em;
  box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
  margin: 0 auto;
  display: block;
  color: white;
}
select option {
  color: inherit;
  background-color: #320a28;
}
select:focus {
  outline: none;
}
select::-ms-expand {
  display: none;
}

/*# sourceMappingURL=bot.css.map */