* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    outline: none;
}
body{
  background-color: black;
  font-family: monospace;
  padding: 20px;
}

#bootScreen{
    width: 100vw;
    text-align: left;
}
#bootScreenWelcome {
  font-size: 18px;
  line-height: 16px;
  color: lime;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;

  border-right: 10px solid lime;

  animation: typewriter 1.5s steps(27) 1 forwards, hideCaret 0s 1.5s forwards;
}

@keyframes typewriter {
    from {
        width: 0%;
    } to {
        width: 27ch;
    }
}

@keyframes blinkBlock {
  0%, 100% { opacity: 1; }
  50%     { opacity: 0; }
}

.cursor {
  display: inline-block;
  animation: blinkBlock 800ms steps(1) infinite;
  color: lime;
}

#bootInput{
    display: inline-block;
    width: 100px;
    height: 1em;
    background-color: black;
    color: lime;
    font-family: monospace;
    font-size: 18px;
    border: none;
    outline:none;
    caret-color: lime;
    vertical-align: bottom;
    margin-left:5px;
    opacity: 0 ;
    animation: fadeIn 0.5s ease forwards;
    animation-delay: 1.5s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    } to {
        opactiy: 1;
    }
}

@keyframes hideCaret{
    to{
        border-right:none;
    }
}

#bootResponse, #bootingLine{
    font-family: monospace;
    color: lime;
    font-size: 18px;
    margin-top: 10px;
}

.fade-out{
    animation: fadeOut 1.5s forwards;
}

@keyframes fadeOut{
    from { opacity: 1;}
    to {opacity: 0;}
}

.typed {
  color: lime;
  font-family: monospace;
}