body {
  background-color: #272727;
  padding: 10px;
}

.shell-wrap {
  width: 500px;
  margin: 10px auto 0 auto;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.shell-body {
  height: 200px;
  max-height: 200px;
  overflow: auto;
  margin: 0;
  padding: 5px;
  list-style: none;
  background: #141414;
  color: #9CD9F0;
  font: 0.8em 'Andale Mono', Consolas, 'Courier New';
  line-height: 1.6em;
  -webkit-border-bottom-right-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-radius-bottomright: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

.shell-body li:before {
  content: '>';
  position: absolute;
  left: 0;
  top: 0;
}

.shell-body li {
  word-wrap: break-word;
  position: relative;
  padding: 0 0 0 15px;
}

.typewriter {
  overflow: hidden;
  /* Ensures the content is not revealed until the animation */
  white-space: nowrap;
  /* Keeps the content on a single line */
  animation: typing 0.5s steps(40, end)
}

/* The typing effect */

@keyframes typing {
  from {
    width: 0
  }
  to {
    width: 100%
  }
}