input {
  font-family: Monaco, Consolas, monospace;
}

.container {
  margin-left: 20px;
}

.container p {
  margin: 10px 0 0;
}

.out {
  max-width: 800px;
  display: inline;
  padding-top: 20px;
}

.t {
  color: #fff;
  width: 100%;
  font-size: 18px;
}

.ti-wrapper {
  position: relative;
}

.ti-wrapper::before {
  /* content: "IO|01:\\>"; */
  content: attr(currentPrompt);
  color: #1fc;
  font-size: 18px;
  display: block;
  /* position: absolute; */
  left: 0;
  top: 0;
  /* width: 16px; */
  height: 24px;
}

.tm {
  white-space: pre;
  position: relative;
  line-height: 20px;
}

.tm .char {
  font-size: 20px;
  width: 18px;
  height: 18px;
  display: inline-block;
}
.tm-lt,
.tm-l {
  position: absolute;
  left: 330px;
  line-height: 21px;
}

.tm-lt {
  top: 0;
}

.tm-l {
  bottom: 0;
}

.ti {
  display: block;
  outline: none;
  border: none;
  background: transparent;
  font-size: 18px;
  line-height: 20px;
  margin-left: 85px;
  width: 95%;
  height: 24px;
}

.flex {
  display: flex;
}
.flex-shrink {
  flex-shrink: 1;
}
.flex-grow {
  flex-grow: 1;
}
.flex-row {
  flex-direction: row;
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

/* Util classes */

.color-green {
  color: #1fc;
}

.color-springgreen {
  color: #0f7;
}

.color-red {
  color: #f00;
}

.pad {
  padding-left: 36px;
}

.col {
  display: inline-block;
  width: 120px;
}

.logo {
  width: 320px;
}
.Alien {
  width: 200px;
  font-size: 5px;
}
.glasses {
  width: 250px;
  font-size: 5px;
}
.IEC {
  width: 270px;
  font-size: 5px;
}
@media only screen and (max-width: 600px) {
  .ti {
    display: block;
    outline: none;
    border: none;
    background: transparent;
    font-size: 20px;
    line-height: 20px;
    margin-left: 85px;
    width: 300px;
    height: 21px;
  }
}