@import url(./bones.css);

body {
	max-width: 640px;
	margin-inline: auto;
	margin-block: 0;
	padding: 1em;
	font-family: var(--family-sans);
	background-color: var(--back);

	--back: light-dark(#f8f9fa, #212529);
	--edge: #adb5bd;
}

* {
	border-color: var(--edge);
}

a:hover,
a:focus {
	color: light-dark(red, yellow);
}

::marker,
time {
	color: GrayText;
}

footer {
	margin-block: 2em;
	text-align: center;
	color: GrayText;

	a {
		color: inherit;
	}
}

details {
	margin-block: 1em;
	padding: 0.25em;
	border: 1px solid var(--edge);
	background-color: Canvas;
}
summary {
	--back: light-dark(#e9ecef, #343a40);

	padding-inline: 0.7em;
	padding-block: 0.3em;
	background-color: var(--back);

	&:hover,
	&:focus {
		color: Canvas;
		background-color: CanvasText;
	}

	:where(h2, h3, h4) {
		display: inline;
		font: inherit;
	}
}
[open]::details-content {
	padding-inline: 0.5em;
	padding-block: 0.2em;
}