body {
    font: 1rem 'Fira Sans', sans-serif;
    background: hsla(0, 0%, 86%, 1);
}
h1 {
    text-align: center;
}
h2 {
    font-size: 1.2rem;
}
footer {
    font-size: 0.8rem;
}
details.todos {
    display: none;
}
.smaller {
    font-size: 0.8rem;
}
@media print {
    body {
	background: unset;
    }
}
details:not([open]) > summary {
    cursor: zoom-in;
}
details:is([open]) > summary {
    cursor: zoom-out;
}
@media print {
    /* I don’t think you’d want to print an unexpandable details element. */
    details:not([open]) {
	display: none;
    }
}
.topping-columns {
    /* outline: 1px solid red; */
    max-width: 45rem;
    column-width: 15rem;
    margin-top: 0.3em;
    column-gap: 0;
    /* column-rule: 4px dotted rgb(79, 185, 227); */
}
.topping-columns ul {
    margin: 0 0 0 2rem;
    padding: 0;
}
a:link[rel~="external"] {
    color: #0cac87;		/* TODO: Gotta figure out a better color for external links. */
}
.print-url {
    display: none; 		/* This gets overridden later */
    text-align: center;
    color: darkgrey;
    font-size: smaller;
}
@media print {
    div.print-url {
	display: block;
    }
    /* TODO: Use layers instead to override styles. */
    .print-url > a,
    .print-url > a:visited {
	color: darkgrey;
	text-decoration: none;
    }
}
/* Print URLs */
@media print {
    /* Man, I need to think of better names */
    .print-link::after {
	content: " (" attr(href) ")";
    }
    .print-link,
    a.print-link:link /* For specificity reasons  */ {
	color: black;
	text-decoration: none;
    }
}