body {
	font-family: "DejaVu Sans", "Bitstream Vera Sans", "Helvetica", "Roboto", sans-serif;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: #fafafa;
}
body div {
	flex-grow: 1;
}

.subrecipe {
	background: #eee;
	padding: 5px;
}
.subrecipe h3 {
	margin: 0;
}
.subrecipe-output {
	height: 0;
	overflow-y: hidden;
}
.subrecipe.open .subrecipe-output {
	height: min-content;
}

.subrecipe-heading h3 {
	display: inline-block;
}

.subrecipe-toggle {
	margin-left: 10px;
}
.subrecipe-toggle::after {
	font-style: italic;
}
.subrecipe .subrecipe-toggle::after {
	content: "Show";
}
.subrecipe.open .subrecipe-toggle::after {
	content: "Hide";
}

ul {
	list-style-type: "- ";
}
ul, ol {
	list-style-position: inside;
	padding-left: 10px;
}

footer {
	text-align: center;
	margin: 20px auto;
}
footer, .subtle {
	color: grey;
	font-style: italic;
}