#cli span.cursor.underline::before, #cli span.cursor.thin::before {
    content: '';
    position: absolute;
    display: inline-block;
}

#cli span.cursor, #cli span.cursor.underline::before, #cli span.cursor.thin::before {
    background-color: white;
    animation-name: blinkwhite;
    animation-timing-function: steps(1);
    animation-direction: alternate;
    animation-fill-mode: none;
    animation-duration: 500ms;
    animation-iteration-count: infinite;
}

@keyframes blinkwhite {
    0% {
        background-color: white;
        color: black;
    }
    50% {
        background-color: black;
        color: white;
    }
}

@keyframes blinklime {
    0% {
        background-color: lime;
        color: black;
    }
    50% {
        background-color: black;
        color: white;
    }
}

@keyframes blinkdarkred {
    0% {
        background-color: darkred;
        color: black;
    }
    50% {
        background-color: black;
        color: white;
    }
}

@keyframes blinkblue {
    0% {
        background-color: blue;
        color: black;
    }
    50% {
        background-color: black;
        color: white;
    }
}

@keyframes blinkblack {
    0% {
        background-color: black;
        color: black;
    }
    50% {
        background-color: black;
        color: white;
    }
}

@keyframes ribbonblink {
    0% {
        text-shadow: 0 0 5px red;
    }
    50% {
        text-shadow: 0 0 12px lime;
    }
}

html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    background-color: grey;
}

h1 {
    font-family: monospace;
    font-size: 58px;
    font-weight: normal;
    text-align: center;
    line-height: 1;
    margin: 12vh 0
}

h1.title {
    position: absolute;
    color: white;
    top: 0;
    width: 100%;
}

#terminal {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.93);
    box-shadow: 0 0 9px 2px rgba(0, 0, 0, 0.75);
    color: white;
    font-family: monospace;
    font-size: 1rem;
    padding: 1rem;
    margin: 1rem;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
}

#terminal a {
    color: white;
    text-decoration: underline;
}

#terminal h1, #terminal h2, #terminal h3, #terminal h4, #terminal h5, #terminal h6 {
    margin: .4em 0;
    text-align: left;
}

#terminal h1 {
    font-size: 2rem;
}

#terminal .label::before {
    content: '>';
    display: inline-block;
    position: relative;
    width: 1rem;
    height: 1em;
}

#terminal .output {
    color: darkGray;
}

#terminal .output small {
    color: dimgray;
}

#terminal .output.error {
    color: darkred;
}

#cli {
    position: relative;
    white-space: pre-wrap;
}

#cli span {}

#cli span.cursor {
    position: relative;
    color: black;
}

#cli span.cursor.pulse, #cli span.cursor.pulse.underline::before, #cli span.cursor.pulse.thin::before {
    animation-timing-function: linear;
}

#cli span.cursor.green, #cli span.cursor.green.underline::before, #cli span.cursor.green.thin::before {
    background-color: lime;
    animation-name: blinklime;
}

#cli span.cursor.red, #cli span.cursor.red.underline::before, #cli span.cursor.red.thin::before {
    background-color: darkred;
    animation-name: blinkdarkred;
}

#cli span.cursor.blue, #cli span.cursor.blue.underline::before, #cli span.cursor.blue.thin::before {
    background-color: blue;
    animation-name: blinkblue;
}

#cli span.cursor.underline {
    animation-name: blinkblack;
}

#cli span.cursor.underline::before {
    height: 2px;
    width: 1ch;
    bottom: 0;
}

#cli span.cursor.thin {
    animation-name: blinkblack;
}

#cli span.cursor.thin::before {
    height: 1em;
    width: 2px;
    left: 0;
}

.ribbon {
    position: absolute;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    top: 10rem;
    right: -2rem;
    transform-origin: right top;
    transform: rotate(45deg);
    background-color: black;
    box-shadow: 0 0 10px green;
    font-family: monospace;
    text-align: center;
}

.ribbon a {
    display: block;
    margin: 1px 0;
    padding: .5rem 4rem;
    border: 1px solid green;
    text-shadow: 0 0 5px white;
    text-decoration: none;
    color: lime;
    animation-name: ribbonblink;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
    animation-fill-mode: none;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

/*# sourceMappingURL=ioio.css.map */