body {
    /* Text spacing */
    line-height: 1.6em;

    /* Colors; color is text color */
    background: var(--background);
    background-image: var(--background-pattern);
    color: var(--text);

    /* Makes header and footer sit flush with browser edges */
    margin: 0;
}

main {
    /* Limit width for accessibility */
    max-width: 60ch;
    /* Centers everything */
    margin: 2em auto;
    /* Make some horizontal space for thinner screens */
    padding: 0 1em;
}

header, footer {
    background: var(--header-footer-background);
    background-image: var(--header-footer-pattern);
    color: var(--text);
    margin: 0;
    padding: 1em;
    text-align: center;
}

/* Limit footer text width */
footer p {max-width: 65ch; margin: auto;}

/* Makes headings easier to see */
h1, h2, h3, h4, h5, h6, dt {
    background: var(--highlight);
    padding: 0.2em;
    border-radius: 10px;
    text-align: center;
}

/* Fix awkward spacing for header h1 and make the text bigger */
header h1 {margin: 0.2em auto 0.4em auto; font-size: 2.5em; background: none;}

/* Make header list fit all on the same line, no bullet points */
header nav ul {
	margin: 0; padding: 0;
	padding-bottom: 0.5em;
	list-style-type: none;
}
header nav ul li {display: inline-block; padding: 0 0.5em;}
nav {margin: auto;}

/* Makes it obvious you can click on dropdowns */
summary:hover {cursor: pointer;}

/* Makes highlights less eyestrainy */
mark {background: var(--highlight);}

/* Marks asides as being... aside. */
aside {border: 2px solid var(--accent); padding: 1em;}

/* Bold description title elements */
dt {font-weight: bold; text-align: left; margin: 0.5em;}

/* Links */
a {color: var(--unvisited-link);}
a:visited {color: var(--visited-link);}

/* Horizontal rule */
hr {border: 2px dashed var(--accent);}

/* Dark mode tweaks */
@media screen and (prefers-color-scheme: dark) {
    h1, h2, h3, h4, h5, h6, dt, mark {color: var(--header-footer-text);}
    mark {padding: 2px 5px;}
    /* Mouse-highlighted text */
    ::selection {color: var(--header-footer-text); background: var(--highlight);}
}