body{
    background: #23223a;
    background-size: cover;
    font-family: "Lucida Console",monospace;
}
.container{
    background: #23223a;
    width: 500px;
    height: 500px;
    position: absolute;
    margin: auto;
}
.code{
    white-space: nowrap;
    font-size: 0.9rem;
    color: white;
}
.code .imas{
    font-size: 0.9rem;
    color: orange;
    display: inline;
}
.c1{
    font-size: 0.9rem;
    display: inline-block;
    font-family: "Lucida Console",monospace;
}

.c2{
    font-size: 0.9rem;
    display: inline-block;
    font-family: "Lucida Console",monospace;
}

.c3{
    font-size: 0.9rem;
    display: inline-block;
    font-family: "Lucida Console",monospace;
}

.c4{
    font-size: 0.9rem;
    display: inline-block;
    font-family: "Lucida Console",monospace;
    color: forestgreen;
}
.c5{
    font-size: 0.9rem;
    display: inline-block;
    font-family: "Lucida Console",monospace;
}
.c6{
    font-size: 0.9rem;
    display: inline-block;
    font-family: "Lucida Console",monospace;
}
.c7{
    font-size: 0.9rem;
    display: inline-block;
    font-family: "JetBrains Mono", "JetBrains Mono Light", serif;
    font-weight: bold;
    color: white;
}

.controller{
    font-size: 0.9rem;
    display: inline-block;
    margin-top: 5%;
    color: yellow;
}
.typed-out{
    overflow: hidden;
    white-space: nowrap;
    margin-top: 2%;
    margin-bottom: -1%;
    font-size: 0.9rem;
    color: white;
    animation:
            typing 1.5s steps(20, end) forwards,
            blinking .75s 1s;
    width: 0;
}
.typed-out-2{
    overflow: hidden;
    white-space: nowrap;
    margin-top: 1%;
    margin-bottom: -1%;
    font-size: 0.9rem;
    margin-left:5em;
    color: orange;
    animation:
            typing 2s steps(20, end) forwards,
            blinking .75s 1s;
    width: 0;
    animation-delay: 3s;
}
.typed-out-3{
    overflow: hidden;
    white-space: nowrap;
    margin-top: 2%;
    margin-bottom: -1.5%;
    font-size: 0.9rem;
    color: white;
    animation:
            typing 2s steps(20, end) forwards,
            blinking .75s 1s;
    width: 0;
    animation-delay: 4s;
}
.typed-out-4{
    overflow: hidden;
    white-space: nowrap;
    margin-top: 2%;
    margin-bottom: -1%;
    margin-left:7em;
    font-size: 0.9rem;
    color: white;
    animation:
            typing 5s steps(60, end) forwards,
            blinking .75s infinite;
    width: 0;
    animation-delay: 7s;
}
.typed-out-5{
    overflow: hidden;
    white-space: nowrap;
    margin-top: 15%;
    margin-bottom: -2%;
    margin-left:7em;
    font-size: 0.9rem;
    color: white;
    animation:
            typing 1.5s steps(20, end) forwards,
            blinking .75s infinite;
    width: 0;
    animation-delay: 12s;
}

.typed-out-6{
    overflow: hidden;
    white-space: nowrap;
    margin-top: 5%;
    margin-left:5em;
    font-size: 0.9rem;
    color: white;
    animation:
            typing 1.5s steps(20, end) forwards,
            blinking .75s infinite;
    width: 0;
    animation-delay: 14s;
}
@keyframes typing {
    from { width: 0 }
    to { width: 100%; }
}
@keyframes blinking {
    from { border-color: transparent }
    to { border-color: orange; }
}