Pyrite/static/pyrite.css

body {
	height: 100vh;
	margin: 0;
	padding: 8px;
	box-sizing: border-box;
	font-family: Helvetica, sans-serif;
	background-color: #eed89b;
}

main {
	height: 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto 1fr auto auto;
	grid-template-areas:
		"h h h"
		"a b c"
		"f f f";
}

header {
	grid-area: h;
}

input[type="radio"] {
	display: none;
}

input[type="radio"]:checked+div {
	background: lightblue;
}

.list {
	overflow: auto;
	border: 1px solid;
	background-color: #e8e2d7;
}

#artist_list {
	grid-area: a;
}

#album_list {
	grid-area: b;
}

#track_list {
	grid-area: c;
}

#player_container {
	grid-area: f;
	display: flex;
	justify-content: center;
}

#cover_art {
	padding-right: 1em;
	padding-top: 0.5em;
}

img {
	height: 100%;
	max-height: 30vh;
}

.list_item {
	height: 2em;
	margin: 0.25em;
	padding: 0.25em;
	border: 1px solid;
	border-radius: 0.5em;
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.list_item:hover {
	background: lightgray;
}

.album_year, .track_length {
	margin-left: auto;
	font-size: 80%;
}

input[type='range'] {
	accent-color: green;
}

.btn {
	height: 3em;
}

button img {
	height: 2em;
}

#next-track-btn img {
	transform: rotate(180deg);
}