html, body {
    width: 100%;
    height: 100%;
    margin: auto;
    background-color: #151515;
    color: white;
}

.container {
    margin: 5% 10% 10% 10%;
    padding: 10px;
    /* margin-right: 10%; */
    border: 1px whitesmoke solid;
    border-radius: 10px;
    height: 80%;
    display: flexbox;
    flex-direction: column;
}

pre {
    /* font-size: 14pt; */
    color: whitesmoke;
    margin: 0px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#blinking-cursor {
    height: 14px;
    width: 10px;
    position: fixed;
    left: 10%; /* match margin-left of .container */
    background-color: white;
    -webkit-animation: 1s blink step-end infinite;
    -moz-animation: 1s blink step-end infinite;
    -ms-animation: 1s blink step-end infinite;
    -o-animation: 1s blink step-end infinite;
    animation: 1s blink step-end infinite;
}

@keyframes blink {
    from, to {
        background-color: transparent;
    }
    20% {
        background-color: white;
    }
}
  
@-moz-keyframes blink {
    from, to {
        background-color: transparent;
    }
    50% {
        background-color: white;
    }
}

@-webkit-keyframes blink {
    from, to {
        background-color: transparent;
    }
    50% {
        background-color: white;
    }
}

@-ms-keyframes blink {
    from, to {
        background-color: transparent;
    }
    50% {
        background-color: white;
    }
}

@-o-keyframes blink {
    from, to {
        background-color: transparent;
    }
    50% {
        background-color: white;
    }
}