.webshell {
  height: 100vh;
  background-color: #000;
  color: #fff;
  font-family: monospace;
  font-size: 18px;
}

.prompt {
  position: relative;
  float: left;
  padding-right: 1em;
  margin-top: 1em;
}

.input {
  outline: none;
  clear: left;
}

.prompt:after {
  position: absolute;
  top: 0;
  right: 0.1em;
  content: '$';
  color: #777;
  color: #c0253e;
}

.response:empty {
  min-height: 0;
}

.list {
  column-width: 10em;
  column-gap: 3em;
}

.list-item {
  word-wrap: break-word;
}

.text { color: #fff }
.text-green { color: #65c858 }
.text-yellow { color: #cac43b }
.text-lightgray { color: #999 }

.webshell {
  height: 100vh;
  background-color: #000;
  color: #fff;
  font-family: monospace;
  font-size: 18px;
  line-height: 1.2;
}

.prompt {
  position: relative;
  float: left;
  padding-right: 1em;
  margin-top: 1em;
}

.input {
  outline: none;
  clear: left;
}

.prompt:after {
  position: absolute;
  top: 0;
  right: 0.1em;
  content: '$';
  color: #777;
  color: #c0253e;
}

.response:empty {
  min-height: 0;
}

.list {
  column-width: 10em;
  column-gap: 3em;
}

.list-item {
  word-wrap: break-word;
}

.text { color: #fff }
.text-green { color: #65c858 }
.text-yellow { color: #cac43b }
.text-lightgray { color: #999 }

@media (min-width: 30em) {
  .input {
    clear: none;
  }

  .input:empty {
    display: inline-block; /* firefox bug */
  }

  .prompt {
    margin-top: inherit;
    margin-right: 0.2em;
  }

  .response {
    min-height: inherit;
  }
}

Optimize layout for wide viewport
Optimize layout for wide viewport
