:root {
	--max-width: 80ch;
	background-color: var(--bg-base);
	color: var(--fg-base);
	font-variant-numeric: tabular-nums;
}

body {
	display: grid;
	grid-template:
		"main" 1fr
		"footer" auto;
}

main {
	justify-self: center;
	max-width: var(--max-width);
	grid-area: main;
	display: flex;
	flex-direction: column;
 	gap: calc(var(--sm) * 1rem);
}

footer {
	background-color: var(--bg-base);
	border-top: 2px solid var(--fg-base);
	box-shadow: rgba(0, 0, 0, 0.15) 0 -0.25rem 4rem;
	position: sticky;
	bottom: 0;
	grid-area: footer;
	display: flex;
	justify-content: center;
}

button {
	padding: 0;
	border: none;
	background-color: var(--fg-base);
	font: inherit;
}

button:has(input:checked) {
	--fg-base: orange;
}

button > .btn-inner {
	border: 2px solid var(--fg-base);
	border-radius: inherit;
	padding: calc(.5lh - .5em) .5ch;
	background-color: var(--bg-base);
	color: var(--fg-base);
	transform: translateY(-2px);
	transition: transform 80ms ease, color 80ms ease, background-color 80ms ease; 
}

button:hover > .btn-inner {
	transform: translateY(-3px);
	cursor: pointer;
}

button:active > .btn-inner {
	transform: translateY(0);
}

#btn-theme-toggle > .btn-inner::before {
	content: '🌚';
}

[theme=dark] #btn-theme-toggle > .btn-inner::before {
	content: '🌞';
}

select {
	font: var(--font-sans-serif);
}

code {
	font-family: var(--font-monospace);
}

.song {
	border: 2px solid var(--fg-base);
	border-bottom-width: 4px;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}

.song-name {
	color: var(--fg-base);
	text-decoration: none;
	margin-inline-end: auto;
}

#title {
	margin-inline: 1ch;
	color: var(--fg-base);
	text-decoration: none;
}

.name-is-placeholder::before {
	content: open-quote;
}

.name-is-placeholder::after {
	content: close-quote;
}

.song-released {
	color: var(--fg-base-dim);
}

#playback-controls {
	flex: 1;
	max-width: var(--max-width);
	display: grid;
	gap: 1rem;
	grid-template:
		"name name name" 1fr
		"btn playback time" 2fr / minmax(0, auto) 1fr minmax(0, auto);
	align-items: center;
	font-size: calc(1rem * var(--lg));
}

@media (width < 576px) {
	#playback-controls {
		font-size: 1rem;
		gap: 0.5rem;
		grid-template:
			"name time" 1fr
			"playback btn" 1fr / 1fr minmax(0, auto);
	}
}

#btn-main {
	grid-area: btn;
}

#name-main {
	grid-area: name;
	text-align: center;
}

#playback-progress {
	grid-area: playback;
}

#playback-time {
	grid-area: time;
}