:root {
	--bg-color: #D0D0D0;
	--text-color: #111111;
	--spoiler-color: #bbbbbb;
	--highlight-color: #EEEEEE;
	--target-color: #ffffcc;
}

body {
	width: inherit;
	margin: 1.5em 20%;
	font-family: Sans-Serif;
	font-size: 14pt;
	background-color: var(--bg-color);
	color: var(--text-color);
}

/*
@media screen and (max-width: 900px) {
	body {
		width: 90%;
	}
}
*/

footer {
	padding: 0 4em;
	font-size: 10pt;
	text-align: center;
}

figure {
	float: right;
	width: 30%;
}

figure.baba-puzzle-title {
	display: flex;
	width: min-content;
	float: none;
	margin: 0.4em auto 0 auto;
}
figure.baba-puzzle-title > img {
	height: 30px;
	width: auto;
	float: none;
}

img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	height: auto;
	float: right;
}

h1, h2, h4 {
	text-align: center;
	margin-top: 0;
	margin-bottom: 0;
}

hr:has(+ .container) {
	margin-block-end: 0;
}

.block {
	position: relative;
	overflow: auto;
	padding: 1em;
	margin-bottom: 0;
}

.container {
	padding-top: 0.5em;
}

.container:target > .block {
	background-color: var(--target-color);
	border-radius: 1em;
	border-style: dashed;

	/* Cancel out border */
	border-width: 2px;
	padding: calc(1em - 2px);
}

.block > h2 {
	margin-top: 0;
}

.rating {
	display: inline-block;
	font-family: monospace;
	font-size: 15.3pt;
	letter-spacing: 0.15rem;
	background-color: var(--highlight-color);
	padding-left: 0.225rem;
	padding-right: 0.1rem;
}

h5 {
	float: left;
	margin-bottom: 0.5em;
}

h5.permalink {
	float: right;
}

.spoiler {
	background-color: var(--spoiler-color);
	color: var(--spoiler-color);
	padding-left: 0.25rem;
	padding-right: 0.2rem;
	box-decoration-break: clone;
}

.spoiler:hover {
	color: var(--text-color);
}

/* Links really have to be coerced into working */
.spoiler:not(:hover) > * {
	color: var(--spoiler-color) !important;
}