style.css

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  font-family: "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
    "Droid Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: rgb(26, 188, 156);
  height: 100%;
  margin: 0;
}

span {
  padding-right: 15px;
  padding-left: 15px;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.chat {
  height: 300px;
  width: 50vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

::-webkit-input-placeholder {
  color: 0.711;
}

input {
  border: 0;
  padding: 15px;
  margin-left: auto;
  border-radius: 10px;
}

.messages {
  display: flex;
  flex-direction: column;
  overflow: scroll;
  height: 90%;
  width: 100%;
  background-color: rgb(196, 196, 196);
  padding: 15px;
  margin: 15px;
  border-radius: 10px;
}

#bot {
  margin-left: auto;
}

.bot {
  font-family: Consolas, "Courier New", Menlo, source-code-pro, Monaco,
    monospace;
}

.avatar {
  height: 25px;
}

.response {
  display: flex;
  align-items: center;
  margin: 1%;
}

/* Mobile */

@media only screen and (max-width: 980px) {
  .container {
    flex-direction: column;
    justify-content: flex-start;
  }
  .chat {
    width: 75vw;
    margin: 10vw;
  }
}

.button {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  padding: 15px 15px;
  border: 0px solid #b3b3b3;
  border-radius: 15px;
  background: #ffffff;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#ffffff),
    to(#b3b3b3)
  );
  background: -moz-linear-gradient(top, #b3b3b3, #b3b3b3);
  background: linear-gradient(to bottom, #b3b3b3, #b3b3b3);
  font: normal normal bold 11px arial;
  color: #111111;
  text-decoration: none;
}
.button:hover,
.button:focus {
  border: 2px solid #ffffff;
  background: #ffffff;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#ffffff),
    to(#d7d7d7)
  );
  background: -moz-linear-gradient(top, #b3b3b3, #b3b3b3);
  background: linear-gradient(to bottom, #b3b3b3, #b3b3b3);
  color: #111111;
  text-decoration: none;
}
.button:active {
  background: #b3b3b3;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#b3b3b3),
    to(#b3b3b3)
  );
  background: -moz-linear-gradient(top, #b3b3b3, #b3b3b3);
  background: linear-gradient(to bottom, #b3b3b3, #b3b3b3);
}
.button:before {
  content: "\0000a0";
  display: inline-block;
  height: 24px;
  width: 24px;
  line-height: 24px;
  margin: 0 4px -6px -4px;
  position: relative;
  top: 1px;
  left: 1px;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAA7EAAAOxAGVKw4bAAACFklEQVRIia3Vv0uVURgH8E8vF2mIkIuINESDOIhDNIVDQ4M0hENDNDZGozhEQ9AUDg7RFI3RECINDRHhH9AQ0hAiTRGXkIiQkIiL2HDO8T33eLxqdODhnvc83/P8/J7nnkLj/69LWMaEzEFTESfcn8Mz9LGHb7kDGfik+xEs4mc0/DH+rh3l4KjVYB6b0eBX3MZM/H6SQP8iM3gbDf3GI4xG3c14fqeW7lFl6eIx/kQjq5gsMA+j7kppZNgawV38iJfXcTW738n2K9jFeB71MJnTNm4rpj6S6S8KvUjfn9CLToc2eRKvouF+LE03wzTR2Qec1jKqLzKo5oDQrCVtnd9gughiFC+jfi47H2BQWaKOQLNeBG3geqVkl/E5YlYKXc6gJs9gFu+jchsLMe0ykAWBlnv4hQsFZoBBcB4vtHV+Kna/WON4HXFJ7lVwq9HORDr4nhm/VSlHE6P5Uhjf1DY2lw1hBu2/qQXhiScn73BDYEMH97XDK5drWVnSOoMdgUH756m588LTT8Z62p6UsqLOvgMMyiNIKU0JFN06xHhqbK2UJYMGWFQ6nD7EwRrGKngGGdTUAPmaOsRBmp7PBWp3sjurUd+tRVymW3OwgwfCoEtn68IQ7DrIoKElKh30BSKIUc/GLNKj2zY4g05Uol1hhNTWmED19K+2XAKOU6LFir6UjjCjzjpmicYEqi7l4ErWQ/d/AUpLqVo2EVLPAAAAAElFTkSuQmCC")
    no-repeat left center transparent;
  background-size: 100% 100%;
}