/* Layout ******************************************************************* */

body {
    margin: 0;
    line-height: 1.4;
}

body > header, body > nav, body > main, body > footer {
    max-width: 42em;
    margin: auto;
    border: solid 0px var(--neutral-200);
    padding: 0 1em;
}

body > nav {
    display: none;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

body > header h1 {
    margin-bottom: -0.2em;
}

body > header p.subtitle {
    margin: 0;
    font-style: italic;
    margin-bottom: 0.5em;
}

nav > ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
nav > ul > li {
    display: inline-block;
    margin-right: 1em;
}

body > main {
    border: solid 1px var(--neutral-200);
    border-radius: 0.5em;
}

/* Document-wide styles ***************************************************** */

body {
    background: var(--neutral-100);
    color: var(--neutral-800);
    font-size: 14pt;
}

h1 {
    margin: 0;
    font-size: 24pt;
}

h2 {
    margin-top: 0.5rem;
    font-size: 18pt;
    color: var(--primary-500);
}

a {
    color: var(--primary-500);
}
a:hover {
    color: var(--primary-600);
}
a:active {
    color: var(--primary-700);
}

p {

}

footer {
    color: var(--neutral-600);
}

/* Section styles *********************************************************** */

body > main {
    background: var(--neutral-100);
}

body > header h1 a {
    text-decoration: none;
}
body > header h1 a:hover, header h1 a:active {
    text-decoration: none;
}

body > header p.subtitle {
    font-style: italic;
}

nav a {
    text-decoration: none;
    font-weight: bold;
    font-size: 16pt;
    color: var(--secondary-500);
}
nav a:hover {
    color: var(--secondary-600);
}
nav a:active {
    color: var(--secondary-700);
}

article > footer {
    font-style: italic;
}

/* Styles for color palette swatches */

table.palette td {
    width: 3em;
    height: 3em;
    background: var(--neutral-500);
}

table.palette td.primary.value-100 { background: var(--primary-100); }
table.palette td.primary.value-200 { background: var(--primary-200); }
table.palette td.primary.value-300 { background: var(--primary-300); }
table.palette td.primary.value-400 { background: var(--primary-400); }
table.palette td.primary.value-500 { background: var(--primary-500); }
table.palette td.primary.value-600 { background: var(--primary-600); }
table.palette td.primary.value-700 { background: var(--primary-700); }
table.palette td.primary.value-800 { background: var(--primary-800); }
table.palette td.primary.value-900 { background: var(--primary-900); }
table.palette td.secondary.value-100 { background: var(--secondary-100); }
table.palette td.secondary.value-200 { background: var(--secondary-200); }
table.palette td.secondary.value-300 { background: var(--secondary-300); }
table.palette td.secondary.value-400 { background: var(--secondary-400); }
table.palette td.secondary.value-500 { background: var(--secondary-500); }
table.palette td.secondary.value-600 { background: var(--secondary-600); }
table.palette td.secondary.value-700 { background: var(--secondary-700); }
table.palette td.secondary.value-800 { background: var(--secondary-800); }
table.palette td.secondary.value-900 { background: var(--secondary-900); }
table.palette td.neutral.value-100 { background: var(--neutral-100); }
table.palette td.neutral.value-200 { background: var(--neutral-200); }
table.palette td.neutral.value-300 { background: var(--neutral-300); }
table.palette td.neutral.value-400 { background: var(--neutral-400); }
table.palette td.neutral.value-500 { background: var(--neutral-500); }
table.palette td.neutral.value-600 { background: var(--neutral-600); }
table.palette td.neutral.value-700 { background: var(--neutral-700); }
table.palette td.neutral.value-800 { background: var(--neutral-800); }
table.palette td.neutral.value-900 { background: var(--neutral-900); }