body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

body {
    background: #f1f1f1;
    padding: 2rem;
    box-sizing: border-box;
}

#contentContainer {
    display: flex;
    height: 100%;
    width: 100%;
}

.progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 0.5rem;
}

.progress .bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 0%;
    height: 0%;

    background-color: hsl(230, 100%, 50%);
    transition: height, width, background-color;
    transition-duration: .25s;
}

.progress .bar.visible {
    height: 100%;
}

.progress .bar.done {
    background-color: hsl(230, 100%, 75%);
}

iframe {
    width: 100%;
    height: 40vh;
    box-sizing: border-box;
    border: 0;
    border-top: 1px solid;
    border-bottom: 1px solid;
    margin: 1rem 0;
    resize: vertical;
    overflow-y: auto;
}


code,
pre {
    font-size: 1em;
    font-family: Consolas, Liberation Mono, monospace;
}

pre {
    margin-top: 0;
    margin-bottom: 0;
    word-wrap: normal;
    line-height: 1.1;
}

code {
    padding: .2em .4em;
    margin: 0;
    font-size: 85%;
    background-color: rgba(175, 184, 193, 0.2);
    border-radius: 0.5em;
}

pre > code {
    padding: 0;
    margin: 0;
    word-break: normal;
    white-space: pre;
    background: transparent;
    border: 0;
}

pre code {
    display: inline;
    max-width: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    line-height: inherit;
    word-wrap: normal;
    background-color: transparent;
    border: 0;
}