body {
    margin: 3em;
    margin-top: 0.5em;
    max-width: 55em;
    font-size: 125%;
    font-family: Arial, sans-serif;
    color: #404040;
    line-height: 150%;
}

iframe {
    margin: 1em;
    margin-bottom: 2em;
    max-width: 50em;
}

p {
    margin: 1em;
    margin-bottom: 2em;
}

p.intro {
    margin-bottom: 0em;
}

.code {
    background: #f5f5f5;
    font-family: monospace;
    font-size: 1.25em;
}

p.code {
    padding-left: 1.5em;
    padding-right: 1.5em;
    white-space: pre;
    overflow-x: auto;
    font-size: 1.25em;
    max-width: 61em;
}

h1 {
    padding-top: 1em;
    margin: 0em;
    line-height: 125%;
}

h2 h3 {
    padding-top: 1em;
    padding-bottom: 1em;
    margin: 0em;
}

div.p {
    padding: 1em;
    padding-bottom: 0em;
    padding-top: 0em;
    display: flow-root;
}

img {
    max-width: 100%;
    margin: 1em;
}

div.preview {
    display: flex;
    max-width: 18em;
    min-width: 18em;
    margin-right: 1em;
}

div.slide {
    display: flex;
    max-width: 26em;
    min-width: 26em;
    height: 100%;
    margin-right: 2em;
}

.flex-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.flex {
    display: flex;
}

.flex-column {
    display: flex;
    flex-direction: column;
    margin-bottom: 1em;
}

@media (max-width: 1000px) {
    div.preview {
        width: 20em;
        display: block;
        margin: 0em;
    }

    div.slide {
        width: 28em;
        display: block;
        margin: 0em;
    }

    img.preview {
        margin-bottom: 0em;
    }

    .flex {
        display: block;
    }
}