body {
    font-family: sans-serif;
    padding: 0;
    margin: 0;
    flex-direction: column;
}

a {
    color: #7F4A91;
    text-decoration: none;
}
a:hover, a:active {
    color: #3b1c4a;
}

.example {
    display: none;
}

iframe {
    box-sizing: border-box;
    width: 100%;
    background: #f0f0f0;
    height: 400px;
    border: 1px solid #ddd;
}

table {
    border-collapse: collapse;
}

table td, table th {
    border: 1px solid #ddd;
    padding: 8px;
}

thead th {
    text-align: left;
}

code {
    white-space: nowrap;
    font-size: 100%;
    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
    color: #7c3838;
}
code.fn {
    font-weight: bold;
    border: solid 1px #e1e4e5;
    padding: 2px 5px;
}
h1 {
    margin-top: 0;
}
h2, h3, h4, h5, h6 {
    margin-top: 40px;
}
.navigation {
    position: fixed;
    width: 300px;
    flex-shrink: 0;
    height: 100vh;
    box-sizing: border-box;
    padding: 20px;
    overflow: auto;
    background: #f0f0f0;
}
.content-welcome {
    box-sizing: border-box;
    padding: 20px;
    margin: auto;
    max-width: 720px;
}
.center {
    text-align: center;
}
a.cta {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 4px;
    border: 1px solid #3b1c4a;
}
.content {
    box-sizing: border-box;
    padding: 20px;
    margin-left: 300px;
}
.navigation a {
    display: block;
    padding: 2px 0;
}
.navigation a.nav-h1 {
    font-weight: bold;
}
.navigation a.nav-h2 {
    margin-left: 0px;
}
.navigation a.nav-h3 {
    margin-left: 20px;
}
.navigation a.nav-h4 {
    margin-left: 40px;
}
.navigation a.nav-h5 {
    margin-left: 60px;
}
.navigation a.nav-h6 {
    margin-left: 80px;
}
footer {
    color: #ccc;
}
@media(max-width: 900px) {
    .navigation {
        display: none;
    }
    .content {
        margin-left: 0;
    }
}