.main {
  width: 100%;
}

#output {
  border: 2px solid black;
  border-radius: 4px;
  padding: 1rem;
  overflow-y: auto;
  height: 30vh;
  width: 100%;
  box-sizing: border-box;
}

.type {
  display:inline-flex;
}

.type span {
  word-break: break-all;
  height: 1.5em;
  width:0%;
  overflow: hidden;
  animation:t 2s linear forwards;
}

.type span:before {
  content:" ";
  display:inline-block;
}

@keyframes t{
  90%,100% {width:100%}
}

#input {
  box-sizing: border-box;
  width: 100%;
  border: 2px solid black;
  border-radius: 4px;
  padding: 1rem;;
  font-family: sans-serif;
  line-height: 1.4em;
  font-size: 1rem;
}

.user {
  text-align: right;
  margin: 0;
}

.my-type {
  padding: 20px 0;
}