body {
    font: 1rem 'Fira Sans', sans-serif;
    background: hsla(0, 0%, 86%, 1);
}
h1 {
    text-align: center;
}
h2 {
    font-size: 1.3rem;
}
h3 {
    font-size: 1rem;
}
footer {
    font-size: 0.8rem;
}
details.todos {
    display: none;
}
.smaller {
    font-size: 0.8rem;
}
@media print {
    body {
	background: white;
    }
}
details:not([open]) > summary {
    cursor: zoom-in;
}
details:is([open]) > summary {
    cursor: zoom-out;
}
.todos {
    display: none;
}
.underconstruction {
    text-align: center;
    border: 2px solid black;
    padding: 10px;
    background: white;
    border-radius: 5px;
    box-shadow: 10px 10px 10px yellow;
}
/* Links that I want to "hide" because they're not really finished yet. */
.hiddenlink {
    text-decoration: none;
    color: inherit;
    cursor: default;
}
/* Make sure that width is in pixels.
   e.g.  style="--width: 200px;"
 */
figure > figcaption {
    font-style: italic;
    font-size: smaller;
    text-align: center;
}
figure.figstack > figcaption {
    max-width: var(--width);
}
@media print {
    /* Weasyprint chokes on nested flexboxes
       https://github.com/Kozea/WeasyPrint/issues/1171 */
    figure.figstack > figcaption {
	width: var(--width);
    }
}
figure.figstack picture img {
    height: auto;
    max-width: 100%;
}
figure.figstack {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.photos {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    align-items: center;
    justify-content: center;
}
/* Added stuff */
@page {
    size: 8.5in 11in;		/* Maybe I should use A4. */
    margin: 0.5in;
}