body {
	font-family: "Linux Biolinum G", "Segoe UI", Carlito, Calibri, Arial, Helvetica, sans-serif;
	background: #ffe800;
	margin: 1em 1.5em;
}

ul.magic {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 1ex;
	list-style-type: none;
	padding-left: 0;
}

ul.magic li {
	padding: 5px;
	background: white;
}

ul.magic li.license {
	border: solid 1px #f0d000;
	border-left-width: 4ex;
	font-size: 100%;
}
ul.magic li.license:before {
	content: '\20ac';
	font-weight: bold;
	margin: 0 2.25ex 0 -3.25ex;
}

body.song h1 {
	margin-bottom: 0.5em;
}
body.song h2 {
	margin: 2em 0 0.5em;
}
body.song p {
	margin-top: 0.5em;
}

body.song #show-single {
	background: #f0d000;
	padding: 2ex;
	font-weight: bold;
}
body.song #show-single button {
	background: transparent;
	border: solid 1px black;
	padding: 1ex;
	height: 3em;
	margin-top: 1ex;
	cursor: pointer;
}
body.song #show-single .prev:before {
	content: '⏮';
	margin-right: 1ex;
}
body.song #show-single .next:after {
	content: '⏭';
	margin-left: 1ex;
}

body.song iframe + h2 {
	border-top: solid 1px #410;
	padding-top: 0.5em;
}
body.song div.detail {
	border-left: solid 1ex #f0d000;
	border-right: solid 1ex #f0d000;
	padding: 1em 2em;
}
body.song div.detail > p {
	margin-top: 0;
}
body.song div.detail > p.meta {
	margin-top: -2ex;
	font-size: 75%;
}

body.song div.play-container { display: flex; gap: 2ex; flex-wrap: wrap; }
body.song img.play-cover { flex: initial; }
body.song div.play-controls { flex: auto; display: flex; justify-content: center; flex-direction: column; gap: 1ex; }
body.song button.play-setup { background-color: #f0d000; border: solid 1px black; border-radius: 0; cursor: pointer; font-size: 150%; padding: 1ex 1ex; }
body.song button.play-setup div.play-setup-hint { font-size: 40%; margin-top: 1ex; }
body.song div.play-controls audio { width: 100%; }

footer {
	margin-top: 2em;
	border-top: solid 1px black;
	padding-top: 3px;
	font-size: 80%;
}