/* TODO:
   - [ ] Disable <abbr> text decoration on print
   - [ ] Anchor target highlighting should stay at least slightly active
   - [ ] Possible max line width?
   - [ ] Prevent images and figures from exceeding width?
   - [ ] Use layers instead to override style for print-url class.
 */
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;
}
a.anchor {
    text-decoration: none;
    color: gray;
    font-weight: 100;
    margin-left: 0.5em;
}
*:hover > a.anchor::before,
a.anchor:focus::before {
    content: "#";
}
section:target > :is(h2,h3):first-child,
li:target,
:is(h2,h3):target {
     animation-duration: 3s;
     animation-name: targetpulse;
}
@keyframes targetpulse {
    from {
    }
    10% {
	background: yellow;
    }
    to {
    }
}
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;
}
/* Helps space out details elements that are in a list */
li > details:is([open]) {
    margin-bottom: 1rem;
}
.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;
}
figure.middlefig {
    display: flex;
    flex-direction: column;
    align-items: center;
}
figure.middlefig > picture {
    max-width: 300px;
}
/* Expand the picture if hoving over it, or if printing. */
figure.middlefig > picture:focus,
figure.middlefig > picture:hover{
    max-width: unset;
}
@media print {
    figure.middlefig > picture {
	width: unset;
    }
}

figcaption {
    font: italic smaller sans-serif;
}
figure > picture > img,
figure > a > picture > img {
    /* Width auto seems incorrect when the picture is not loaded (or
       broken without alt text.) */
    /* width: auto; */
    height: auto;
    max-width: 100%;
}
@media print {
    body {
	background: unset;
    }
}
.print-url {
    display: none; 		/* This gets overridden later */
    text-align: center;
    color: darkgrey;
    font-size: smaller;
}
@media print {
    div.print-url {
	display: block;
    }
    .print-url > a,
    .print-url > a:visited {
	color: darkgrey;
	text-decoration: none;
    }
}