html {
  font-size: 1.2rem;
  font-family: "Roboto", "Trebuchet MS", sans-serif;
  line-height: 1.8rem;
  color: #222;
  text-rendering: optimizeLegibility; }

body {
  background-color: #fdfdfd;
  line-height: inherit; }

section#chatbot {
  position: fixed;
  right: 0;
  bottom: 0;
  padding: 0 1.8rem;
  width: 100%;
  max-width: 36rem;
  margin: 0.9rem auto;
  height: 100%;
  overflow-y: scroll; }
  section#chatbot article#conversation {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    padding: 0.9rem 0; }
    section#chatbot article#conversation p,
    section#chatbot article#conversation figure {
      line-height: inherit;
      display: inline-block;
      max-width: 34.2rem;
      margin: 0 0.9rem;
      margin-top: 0.9rem;
      border-radius: 0.30rem;
      transition: visibility .5s ease-out;
      animation: 1s ease-in-out fade-in; }
      section#chatbot article#conversation p a,
      section#chatbot article#conversation p a:visited,
      section#chatbot article#conversation figure a,
      section#chatbot article#conversation figure a:visited {
        color: #03a9f4;
        text-decoration: none;
        outline: none;
        border-bottom: 1px solid #03a9f4; }
      section#chatbot article#conversation p a:hover,
      section#chatbot article#conversation p a:focus,
      section#chatbot article#conversation p a:active,
      section#chatbot article#conversation figure a:hover,
      section#chatbot article#conversation figure a:focus,
      section#chatbot article#conversation figure a:active {
        opacity: .5; }
      section#chatbot article#conversation p img,
      section#chatbot article#conversation figure img {
        display: block;
        max-width: 9rem;
        border-radius: 0.30rem; }
      section#chatbot article#conversation p figcaption,
      section#chatbot article#conversation figure figcaption {
        text-align: right;
        font-size: 0.66667rem;
        opacity: .5;
        padding: 0 .5rem; }
    section#chatbot article#conversation figure {
      margin-top: 1.8rem; }
    section#chatbot article#conversation .dr27 {
      align-self: flex-start; }
    section#chatbot article#conversation .user {
      align-self: flex-end;
      color: #fafafa;
      background-color: #ff5722;
      padding: 0 0.9rem; }
      section#chatbot article#conversation .user figcaption {
        text-align: left; }
  section#chatbot .avatar {
    display: flex; }
    section#chatbot .avatar img,
    section#chatbot .avatar figcaption {
      display: inline-flex;
      align-self: center;
      justify-content: space-between;
      align-items: center; }
    section#chatbot .avatar img {
      width: 3.6rem;
      height: 3.6rem;
      border-radius: 100%;
      margin: 0 0.45rem; }
    section#chatbot .avatar figcaption {
      padding: 0 0.9rem;
      border-radius: 0.60rem;
      width: 3.6rem;
      height: 1.8rem;
      animation: 1s ease-in-out fade-in; }
    section#chatbot .avatar figcaption span {
      background-color: currentcolor;
      width: 5px;
      height: 5px;
      border-radius: 50%; }
    section#chatbot .avatar figcaption.think span:nth-of-type(1) {
      animation: 1.5s infinite think1; }
    section#chatbot .avatar figcaption.think span:nth-of-type(2) {
      animation: 1.5s infinite think2; }
    section#chatbot .avatar figcaption.think span:nth-of-type(3) {
      animation: 1.5s infinite think3; }
  section#chatbot .avatar#dr27 {
    justify-content: flex-start; }
    section#chatbot .avatar#dr27 figcaption {
      display: inline-flex;
      background-color: #f0f0f0;
      color: #414141; }
    section#chatbot .avatar#dr27 figcaption.hide {
      display: none; }
    section#chatbot .avatar#dr27 img {
      transform: rotate(0deg);
      transition: transform .5s; }
    section#chatbot .avatar#dr27 img.asking {
      transform: rotate(10deg); }
  section#chatbot .avatar#user {
    justify-content: flex-end; }
    section#chatbot .avatar#user img {
      display: block;
      background-color: #ff5722;
      color: #fafafa;
      border: none;
      padding-top: 5px; }
    section#chatbot .avatar#user figcaption {
      display: inline-flex;
      background-color: #ff5722;
      color: #fafafa; }
    section#chatbot .avatar#user figcaption.hide {
      display: none; }
  section#chatbot ul#input {
    display: flex;
    margin: 0 1.8rem;
    justify-content: space-around;
    flex-flow: row wrap;
    animation: 1s ease-in-out fade-in; }
    section#chatbot ul#input li {
      padding-top: 0.9rem;
      width: 100%;
      text-align: center; }
      section#chatbot ul#input li button,
      section#chatbot ul#input li form {
        font-family: "Roboto", "Trebuchet MS", sans-serif; }
      section#chatbot ul#input li button {
        padding: 0 0.9rem;
        background-color: #ff5722;
        border-radius: 0.30rem;
        color: #fafafa;
        line-height: inherit; }
      section#chatbot ul#input li button:hover {
        opacity: .5; }
      section#chatbot ul#input li form label {
        display: flex;
        justify-content: center; }
        section#chatbot ul#input li form label input[type="text"] {
          width: 100%;
          font-family: "Roboto", "Trebuchet MS", sans-serif;
          border: none;
          outline: none;
          border-bottom: 1px solid #ff5722;
          line-height: inherit; }
        section#chatbot ul#input li form label button {
          border-radius: 0 0.30rem 0.30rem 0;
          line-height: inherit; }
  section#chatbot ul#input.hide {
    display: none; }
  section#chatbot nav {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center; }
    section#chatbot nav button#play {
      line-height: inherit;
      padding: 0 0.9rem;
      margin: 0.9rem 0;
      background-color: #ff5722;
      border-radius: 0.30rem;
      color: #fafafa; }
    section#chatbot nav button#play:hover {
      opacity: .5; }

#game {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  z-index: 100;
  animation: 1s slide-in; }
  #game .close {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    background: #ff5722;
    color: #fafafa;
    width: 1.8rem;
    height: 1.8rem;
    line-height: 1.8rem;
    vertical-align: middle;
    border-radius: 100%;
    cursor: pointer;
    text-align: center;
    font-size: 1.2rem; }
  #game .close:hover,
  #game .close:active {
    opacity: .5; }
  #game iframe {
    width: 100%;
    height: 100%; }
    #game iframe #document html {
      overflow: hidden; }

#game.hide {
  display: none; }

@keyframes think3 {
  0%, 100%, 50% {
    transform: scale(1); }
  75% {
    transform: scale(1.5); } }
@keyframes think2 {
  0%, 100%, 25% {
    transform: scale(1); }
  50%, 75% {
    transform: scale(1.5); } }
@keyframes think1 {
  0%, 100% {
    transform: scale(1); }
  50%, 75% {
    transform: scale(1.5); } }
@keyframes fade-in {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@keyframes slide-in {
  from {
    top: 100%; }
  to {
    top: 0; } }
.grid {
  display: block;
  display: none;
  position: fixed;
  left: 0px;
  right: 0px;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  top: 0px;
  height: 100%;
  background: linear-gradient(rgba(0, 119, 179, 0.2) 1px, transparent 1px) left bottom/1.8rem 1.8rem; }

/*# sourceMappingURL=style.scss.map */

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