body{
        background: rgb(0, 0, 0);
        background-size: cover;
        font-family: 'JetBrains Mono', monospace;
        color: rgb(11, 204, 72);
        font-size: 2rem;
        padding-right: 3rem;
        padding-left: 3rem;
        }
        .container{
        display: inline-block;
        }
        .p {
            padding-bottom: 0.1rem;
        }
        .css-typing p {
            width: 100%;
            border-right: .15em solid rgb(11, 204, 72);
            font-family: 'JetBrains Mono', monospace;
            font-size: 2rem;
            white-space: nowrap;
            overflow: hidden;
            -webkit-animation: type 1s steps(40, end);
            animation: type 1s steps(40, end);
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
            opacity: 0;
        }
        .css-typing p:nth-child(1) {
            animation-delay:0s;
        }
        .css-typing p:nth-child(2) {
            animation-delay:1s;
        }
        .css-typing p:nth-child(3) {
            animation-delay:2s;
        }
        .css-typing p:nth-child(4) {
            animation-delay:3s;
        }
        .css-typing p:nth-child(5) {
            animation-delay:4s;
        }
        .css-typing p:nth-child(6) {
            animation-delay:5s;
        }
        .css-typing p:nth-child(7) {
            animation-delay:6s;
        }
        .css-typing p:nth-child(8) {
            animation-delay:7s;
        }
        .css-typing p:nth-child(9) {
            animation-delay:8s;
        }
        .css-typing p:nth-child(10) {
            animation-delay:9s;
        }
        .css-typing p:nth-child(11) {
            animation-delay:10s;
        }
        .css-typing p:nth-child(12) {
            animation-delay:11s;
        }
        .css-typing p:nth-child(13) {
            animation-delay:12s;
        }
        .css-typing p:nth-child(14) {
            animation-delay:13s;
        }
        .css-typing p:nth-child(15) {
            animation-delay:15s;
        }
        .css-typing p:nth-child(16) {
            animation-delay:16s;
        }
        @keyframes type {
        0% {
            width: 0;
        }
        1% {
            opacity: 1;
        }
        99.9% {
            border-right: .15em solid rgb(11, 204, 72);
        }
        100% {
            border: none;
            opacity: 1;
        }
        }

        @-webkit-keyframes type {
        0% {
            width: 0;
        }
        1% {
            opacity: 1;
        }
        99.9% {
            border-right: .15em solid rgb(11, 204, 72);
        }
        100% {
            border: none;
            opacity: 1;
        }
        }

        .typing{
        overflow: hidden;
        border-right: .15em solid rgb(11, 204, 72);
        white-space: wrap;
        /*font-size: 1.6rem;*/
        font-family: 'JetBrains Mono', monospace;
        animation-delay: var(--animation-delay, 0s);
        animation: 
            typing var(--animation-length, 1s) steps(200, end) forwards;
        }
    .btn {
            background: rgb(0, 0, 0);
        background-size: cover;
        font-family: 'JetBrains Mono', monospace;
        padding: 16px, 16px;
        font-size: 2rem;
        align-self: center;
        color: rgb(11, 204, 72);
        border-color: rgb(11, 204, 72);
        border-width: 0.1rem;
    }
    .btn:hover{
        background: rgb(11, 204, 72);
        color: rgb(0,0,0);
    }
    
    @keyframes typing {
        
        0% { width: 0; }
        99.99% { border-color: rgb(11, 204, 72); }
        100% {border:none}
    }
    
    /* The typewriter cursor effect */
    @keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: rgb(11, 204, 72); }
    }

    /* The typewriter cursor effect */
    @keyframes invisible {
    from, to { border-color: transparent }
    }