/**** some of this from https://codepen.io/geoffgraham/pen/jrWwWM
      But I changed the things i didn't like                *******/
body {
    background: black;
    color: white;
    font-family: fira-mono, consolas, monospace;
    letter-spacing: .2px;
    font-weight: bold;
}

.color-0 {
   color: black;
}

.color-1 {
   color: rgb(177, 177, 177);
}

.color-2 {
   color: white;
}

.color-3 {
   color: rgb(26, 146, 26)
}

.color-4 {
   color: rgb(194, 0, 0);
}

.color-5{
   color: rgb(124, 124, 124);
}

.color-6 {
   color: rgb(45, 240, 240) !important;
}

div.contentent {
    padding-left: 10px;
    font-size: 14px;
    font-weight: bold;
    line-height: 16px;
}

a, a:active, a:visited, a:hover {
    color:white;
    text-decoration: none;
}
.color-1 a, .color-1 a:visited, .color-1 a:hover {
   color: rgb(177,177,177);
}

.rply {
    display: inline-block;
    opacity: 0;
    animation: appear;
    animation-duration: .01s;
    animation-fill-mode: forwards;
}

span.ident {
   padding-left: 2em;
}

.command {
  display: inline-flex;
  overflow: hidden;
  width: 0px;
  height: 1em;
  border-right: .75em solid transparent;
  white-space: nowrap;
  letter-spacing: .2px;
  animation-direction: normal;
  animation: typing 8s steps(15, end), block-cursor .5s step-end 5;
  animation-fill-mode: forwards;
}

.infinite {
   animation: block-cursor .5s step-end infinite !important;
}

.typing-short {
   animation: typing-short 5s steps(12, end), block-cursor .5s step-end 10;
   animation-fill-mode: forwards;
}
ul.ls {
   opacity: 0;
   animation: appear;
   animation-duration: .01s;
   animation-fill-mode: forwards;
}

ul.ls li {
   display: inline-block;
   width: 33%;
   margin: .5em auto;
}

.delay-1s  { animation-delay: 01s !important;}
.delay-3s  { animation-delay: 03s !important;}
.delay-5s  { animation-delay: 05s !important;}
.delay-7s  { animation-delay: 07s !important;}
.delay-10s { animation-delay: 10s !important;}
.delay-15s { animation-delay: 15s !important;}
.delay-20s { animation-delay: 20s !important;}
.delay-25s { animation-delay: 25s !important;}
.delay-30s { animation-delay: 30s !important;}
.delay-35s { animation-delay: 35s !important;}
.delay-40s { animation-delay: 40s !important;}
.delay-50s { animation-delay: 50s !important;}
.delay-60s { animation-delay: 60s !important;}

/************* Mobile ***********/
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
   
   ul.ls li {
     display: block;
   }   

}
/*********** Animations *********/
@keyframes typing {
  from { width: 0 }
  to { width:40em }
}

@keyframes typing-short {
   from { width: 0 }
   to { width:7em }
 }

@keyframes block-cursor {
  from,to {border-color: transparent;}
    50% { border-color: white; }
}

@keyframes cr {
    from {border-color: white;}
    99% {border-color: white;}
    to {border-color: transparent;}
}

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