.window {
  border-radius: 3px;
  background: #222;
  color: #fff;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  width: 70%;
}
.window:before {
  content: " ";
  display: block;
  height: 48px;
  background: #C6C6C6;
}
.window:after {
  content: ". . .";
  position: absolute;
  left: 12px;
  right: 0;
  top: -3px;
  font-family: "Times New Roman", Times, serif;
  font-size: 96px;
  color: #fff;
  line-height: 0;
  letter-spacing: -12px;
}

.terminal {
  margin: 20px;
  font-family: monospace;
  font-size: 16px;
  color: #22da26;
}
.terminal .command {
  width: 0%;
  white-space: nowrap;
  overflow: hidden;
  animation: write-command 5s both;
}
.terminal .command:before {
  content: "$ ";
  color: #22da26;
}
.terminal .log {
  white-space: nowrap;
  overflow: hidden;
  animation: write-log 5s both;
}
.terminal p:nth-child(2) {
  animation-delay: 2s;
}
.terminal p:nth-child(3) {
  animation-delay: 8s;
}

@keyframes write-command {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes write-log {
  0% {
    height: 0;
  }
  16% {
    height: 0;
  }
  17% {
    height: 18px;
  }
  33% {
    height: 18px;
  }
  34% {
    height: 37px;
  }
  51% {
    height: 37px;
  }
  52% {
    height: 55px;
  }
  69% {
    height: 55px;
  }
  70% {
    height: 74px;
  }
  87% {
    height: 74px;
  }
  88% {
    height: 92px;
  }
  88% {
    height: 92px;
  }
  99% {
    height: 92px;
  }
  100% {
    height: 110px;
  }
}