* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font: 16px/1.5 sans-serif;
    color: #000;
    background: #fff;

    display: flex;
    flex-direction: column;
}

/* Header */
header {
    background: #7317fa;
    padding: .25rem 0;
}

/* Nav */
nav a {
    display: inline-block;
    padding: .4rem .7rem;
    color: #fff;
    text-decoration: none;
}

nav a:hover {
    background: #003b6a;
}

/* Main grows to push footer down */
main {
    flex: 1;
    margin: 1rem 0;
    padding: 0 1rem;
}

/* Typography spacing */
p {
    margin: 0 0 .75rem 0;
}

h1, h2, h3 {
    margin: 0 0 .75rem 0;
}

/* Code blocks */
pre {
    margin: 0 0 1rem 0;
    padding: .75rem;
    overflow-x: auto;
}

/* Footer */
footer {
    margin: 0;
    padding: .75rem 1rem;
    font-size: .8rem;
    border-top: solid 1px grey;
}