@layer base {
    html {
	--default-color: black;
	--body-bg: #dbdbdb;
	--construction-bg: #ffff71;
	--construction-fg: var(--default-color);
	--anchor-color: gray;
	--construction-bg: white;
	--construction-border: black;
    }
}
/** Dark theme  */
@media (prefers-color-scheme: dark) {
    @layer theme {
    body {
	animation: unset;
    }
    html {
	--default-color: #d1b5a0ff;
	--default-color: #ffb286ff;
	--construction-fg: #dbdb00ff;
	--construction-border: var(--construction-fg);
	--construction-bg: #200405ff;
	--body-bg: #14181e;
    }
    /* An unintentional easter egg is that hidden links will partially
       show up. */
    a:link {
	color: #58c4ffff;
    }
    a:visited {
	color: #dda2fdff;
    }
   }
}
/** Basic elements styling */
/*** The body of the page */
@layer base {
    body {
	font: 1rem 'Fira Sans', sans-serif;
	background-color: var(--body-bg);
	color: var(--default-color);
    }
}
/*** Headers */
h1 { text-align: center; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1rem; }
/*** Footer */
footer {
    font-size: 0.8rem;
}
/*** Smaller text  */
.smaller {
    font-size: 0.8rem;
}
/** Special styling */
/*** Anchors ("#") for sections */
a.anchor {
    text-decoration: none;
    color: var(--anchor-color);
    font-weight: 100;
    margin-left: 0.5em;
}
*:hover > a.anchor::before,
a.anchor:focus::before {
    content: "#";
}
/*** Targets of anchors */
section:target > :is(h2,h3,h4,h5,h6):first-child,
li:target,
.targetable:target,
:is(h2,h3,h4,h5,h6):target {
     animation-duration: 3s;
     animation-name: targetpulse;
     animation-fill-mode: forwards;
}
@keyframes targetpulse {
    from {
    }
    10% {
	background: rgba(255, 255, 0, 1.0);
    }
    50% {
	background: rgba(255, 255, 0, 0.0);
    }
    to {
	/* We should remain visible to remind us we’re looking at a target. */
	background: rgba(255, 255, 0, 0.3);
    }
}
/*** Todos */
details.todos {
    display: none;
}
.todos {
    display: none;
}
/*** Make details elements easier for people unfamiliar with them */
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;
}
/*** Under construction banner */
.underconstruction {
    text-align: center;
    border: 2px solid var(--construction-border);
    padding: 10px;
    background: var(--construction-bg);
    color: var(--construction-fg);
    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;
}
/** Figures */
/*** Quotes */
figure.quote {
    width: fit-content;
}
.quote > figcaption {
    text-align: right;
}
/*** Photos  */
/* 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);
}
figure.figstack picture img,
figure.figstack video {
    height: auto;
    max-width: 100%;
}
figure.figstack {
    display: flex;
    flex-direction: column;
}
.photos,
.middlefigs {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    align-items: center;
    justify-content: center;
}
/** Printing */
@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;
    }
}
/** Added **/
.middlefig {
    align-items: center;
}
/* I also added ".targetable:target" rule above */
/** Emacs config

Local Variables:
outline-regexp: "/\\*\\*+ "
outline-minor-mode-use-buttons: in-margins
End:
*/