:root {
    --spacing-unit: 10px;
    --logo-color: #273992;
    --text-color: #222;
    --medium-color: #333;
    --grey-color: #444;
    --link-border: 1px solid rgba(34, 34, 34, 0.2);
    --header-font-family: europa, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --body-font-family: chaparral-pro, serif;
    /* font-size: 1.1em; */
}

* {
    margin: 0;
    padding: 0;
    color: var(--text-color);
    /* font-family: var(--body-font-family); */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--header-font-family);
}

p {
    font-family: var(--body-font-family);
    font-size: 1.1em;
    line-height: 1.6em;
    color: var(--medium-color);
}

i, del, b {
    color: currentColor;
    font-family: inherit;
}

p b {
    font-family: var(--header-font-family);
    color: currentColor;
}

a {
    color: currentColor;
    text-decoration: none;
    cursor: pointer;
    /* border-bottom: var(--link-border); */
}

button, a {
    transition: opacity 0.3s;
}

a:hover, button:hover {
    opacity: 0.6;
}

header, footer {
    background: #EEE;
    padding: var(--spacing-unit);
}

header {
    margin-bottom: var(--spacing-unit);
    border-bottom: 10px solid #E6E6E6;
}

footer {
    margin-bottom: 0;
    margin-top: var(--spacing-unit);
    border-top: 10px solid #E6E6E6;
}

.content {
    max-width: min(100%, 800px);
    margin: var(--spacing-unit) auto;
}

.beyond-wordplay-link {
    border: none;
}

.beyond-wordplay-logo {
    width: 10em;
}

.headers {
    font-size: 1.5em;
    text-align: center;
    margin: calc(2 * var(--spacing-unit)) 0;
}

h3 {
    color: var(--grey-color);
    font-weight: normal;
    font-style: italic;
}

.body {
    padding: var(--spacing-unit);
    margin: var(--spacing-unit);
}

.body h1, .body h2, .body h3, .body h4, .body h5, .body h6 {
    margin-bottom: 0.5em;
    text-align: center;
}

.body a {
    border-bottom: 1px solid #DDD;
}

.body img {
    max-width: 100%;
}

@media all and (max-width: 600px) {
    .headers {
        font-size: 1.1em;
    }

    .body img {
        height: 300px;
        display: block;
        margin: auto;
        margin-bottom: var(--spacing-unit);
    }
}