@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&display=swap');
html{
    background: #292a2f;
    margin: 0;
    padding: 0;
    max-height: 100%;
    max-width: 100%;
    font-family: 'Fira Code', monospace;
    font-size: 11pt;
    color: #BCBEC4;
    line-height: 1.5em;
}
ol{
    margin: 5%;
    list-style: none;
}
a{
    color: #6AAB73;
    text-decoration: none;
    cursor: pointer;
}
a:hover{
    text-decoration: underline;
    text-decoration-color: #6AAB73;
}
a:active,:visited{
    color: #6AAB73;
}
.keywrd{
    color: #CF8E6D;
}
.com{
    color: #7f8994;
}
.cls {
    color: #d9baff;
}
.str {
    color: #6AAB73;
}
.int {
    color: #2AACB8;
}
.fun {
    color: #56A8F5;
}

@keyframes typedjsBlink{
    50% { opacity: 0.0; }
}
@-webkit-keyframes typedjsBlink{
    0% { opacity: 1; }
    50% { opacity: 0.0; }
    100% { opacity: 1; }
}

li:last-child::after {
    margin-right: 16px;
    content: "|";
    color: white;
    animation: typedjsBlink 0.7s infinite;
    -webkit-animation: typedjsBlink 0.7s infinite;
}

@media only screen and (max-device-width: 480px) {
    html{
        margin: 0;
        padding: 0;
        max-height: 100%;
        max-width: 100%;
        font-size: 20pt;
    }
    ol{
        margin: 1%;
        margin-top: 7%;
    }
}

@media (min-width: 480px) {
    ol {
        counter-reset: counter;
    }

    li::before {
        margin-right: 16px;
        content: counter(counter);
        counter-increment: counter;
        color: grey;
    }
}