body {
    background-color: whitesmoke;
    background-image: linear-gradient(silver, whitesmoke);
    background-repeat: no-repeat;
    background-size: 100vw 60em;
    color: #333333;
    font-family: sans-serif;
    margin-left: auto;
    margin-right: auto;
    max-width: 60em;
    counter-reset: fignum;
}

a {
    color: dodgerblue;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Force article to expand to accomodate floated image. */
article {
    overflow: hidden;
}

article h2 {
    clear: both;
}

article img {
    border: 1px solid dimgray;
    float: left;
    margin-right: 1em;
}

/* The last paragraph element is always the link to the lab. */
article p:last-child {
    text-align: right;
}

code {
    color: black;
    font-size: 1rem;
}

.code-block {
    border: 1px solid black;
    background-color: white;
    color: black;
    display: block;
    padding-left: 1em;
    padding-right: 1em;
    /* padding-top and bottom not needed, because of line breaks already present. */
    white-space: pre;
}

details.help > summary {
    list-style-type: '\01F6DF';
}

figure {
    counter-increment: fignum;
}

/* Keep large images from overflowing the page. */
figure > img {
    max-width: 95%;
}

figcaption:before {
    content: 'Figure ' counter(fignum) ': ';
}

h1, h2, h3 {
    color: black;
}

header {
    border-bottom: 1px solid black;
    margin-bottom: 2rem;
    text-align: center;
}

footer {
    border-top: 1px solid black;
    margin-top: 2rem;
    padding-top: 1em;
}

footer > .quote {
    font-size: 80%;
    font-style: italic;
}

footer > .navigation {
    float: right;
}

footer > .navigation > a:hover {
    text-decoration: none;
}

.tip::before {
    content: '\1F4A1';
}