/*
 * The body consists of a nav bar and the website's main content.
 * The main content should take up the entire height of the viewport.
 */
body {
    display: flex;
    flex-flow: column;
    max-width: 120ch;
    min-height: 100vh;
    margin: auto;
    
    background: #fff;
    
    font: 15pt/1.5em sans-serif;
}

/*
 * The website header consists of the website's title and a nav bar.
 * The title is left-aligned; the nav bar is right-aligned.
 *
 * If the nav bar doesn't fit to the right of the site title,
 * it should be located under the website title and possibly turn into columns.
 */
body > header {
    flex: 0 1 auto;

    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    padding: 40px;

    color: #eee;
    background: #111;
    
    font-size: 1.25em;
}

.site-title {
    display: inline-block;

    font-size: 1.5em;
    font-weight: bold;
}

body > header a {
    color: inherit;
}

/* The site navigation links. These are displayed as columns. */
body > header > nav ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    
    list-style-type: none;
}

body > header > nav li {
    flex: 1;
    
    display: inline-block;
    margin: 0 15px;
}

main {
    flex: 1;
    
    background-color: #fafafa;
}

article {
    margin: 20px 40px;
}

p, li {
    max-width: 75ch;
}

aside {
    float: right;
}

img {
    width: 300px;
}