:root {
	--p-size: 24px;
	--bg: #ffffff;
	--text: #000000;
	--shade: #00000020;
	--highlight: #ff000020;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #000000;
		--text: #f5f5f5;
		--shade: #ffffff20;
		--highlight: #ff000020;
	}
}

html, body {
	padding: 0;
	margin: 0;
	touch-action: manipulation;
	font-family: sans-serif;
}

body {
	display: flex;
	flex-direction: column;
	background: var(--bg);
	color: var(--text);
	gap: 1rem;
	padding: 1rem;
	max-height: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

h1 {
	font-size: 48px;
	margin: 0;
}

p {
	font-size: var(--p-size);
	white-space: pre-line;
	margin: 0;
}

.controls {
	display: flex;
	flex: 1;
	gap: 12px;
	max-height: 36px;

	#song {
		flex: 1;
		flex-basis: 10px;
		font-size: 1.25rem;
		background: var(--shade);
		border: none;
		color: var(--text);
		padding: 0 12px;
		border-radius: 8px;
	}

	.size {
		display: flex;
		gap: 12px;
		min-width: 36px;

		button {
			flex: 1;
			width: 30px;
			border: none;
			font-size: 26px;
			border-radius: 8px;
			color: var(--text);
			background: var(--shade);
		}
	}
}

.tab-panels {
	overflow: auto;
	flex: 1;

	.carol {
		display: none;
		border-radius: 8px;
		flex-direction: column;
		gap: 2rem;
		padding-bottom: 1rem;
		line-height: calc(1.3 * var(--p-size));
	}
}

div[data-song="jingle-bells"] #jingle-bells { display: flex; }
div[data-song="go-tell-it-on-the-mountain"] #go-tell-it-on-the-mountain { display: flex; }
div[data-song="silent-night"] #silent-night { display: flex; }
div[data-song="feliz-navidad"] #feliz-navidad { display: flex; }