html {
	font-family: "Times New Roman", serif;
	font-size: large;
	line-height: 1.5;
	margin: 0;
	padding: 0;
}
body {
	margin: 0;
	padding: 0;
}
.the-limiter {
	width: 88vw;
	max-width: 72ch;
	margin: 1rem auto 3rem;
}
nav {
	width: 88vw;
	max-width: 72ch;
	margin: 1rem auto 2rem;
	border-top: 2px solid black;
}
h1 {
	border-bottom: 4px solid black;
}
h2 {
	border-bottom: 2px solid black;
}
h2 .rules {
	font-weight: normal;
}
h3 {
	border-bottom: 1px double black;
}
hr {
	border: 1px solid black;
	margin: 3rem 0;
}
img {
	max-width: 100%;
}

.center { text-align: center; }

ol.answer-options { list-style: none; }
ol.answer-options li { margin: 0.25em 0; }
.answer-one {
	border: 4px solid rgb(208, 129, 89);
	padding: 0.5em 1em;
	display: inline-block;
}
.answer-two {
	border: 4px solid rgb(32, 60, 86);
	padding: 0.5em 1em;
	display: inline-block;
}

figure.example {
	border: 2px solid #D2D2D2;
	border-radius: 0.25em;
	padding: 0 1em;
	margin: 1em 2.5em;
}
figure.example figcaption {
	margin: 1em 0;
}

/* ========================================================================== */

.slot details p {
	font-size: 3em;
	border: 2px solid black;
	border-radius: 0.5rem;

	width: 12rem;
	height: 12rem;
	margin: 1rem auto;

	display: flex;
	justify-content: center;
	align-items: center;
}

.secret summary {
	text-align: center;
	text-shadow: 1px 1px 1px #FFF;

	background: #EEE;
	border-width: 4px;
	border-style: solid;
	border-color: #FFF #BBB #BBB #FFF;
	outline-width: 2px;
	outline-style: solid;
	outline-color: #000;
	border-radius: 4px;

	box-sizing: border-box;
	display: block;
	padding: 0.25rem 1.5rem;
	margin: 0 auto;
	width: 16ch;

	user-select: none;
}
.secret summary:hover {
	border-color: #BBB #F0F0F0 #F0F0F0 #BBB;
	background: #DDD;
}
.secret[open] summary::before {
	content: attr(data-open);
}
.secret:not([open]) summary::before {
	content: attr(data-closed);
}
.secret p {
	text-align: center;
}

/* ========================================================================== */

@media print {
	nav, .slot, .solution, .solution-steps { display: none; }
	.the-limiter { width: auto; max-width: none; }
}