body {
	background-image: radial-gradient(closest-side, #BAA, #9AA), url("../img/background.jpg");
	background-blend-mode: color;
	background-repeat: no-repeat;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	min-height: 100vh;
	gap: 0px;
	margin: 0px;
	padding: 20px 10px 2px 10px;
}

/* headings: red border with grey inlay, Orbitron font */

.heading-border {
	background-color: #F00;
	display: flex;
	width: 100%;
	z-index: 2;
}

.heading-block {
	background-color: #BBB;
	color: #022;
	font-family: 'Orbitron', monospace;
	width: 100%;
}

/* groupings: teal border with dark inlay, Rubik font */

.group-border {
	background-color: #3BB;
	width: 100%;
	display: flex;
	margin-top: -8px;
}

.group-block {
	background-color: #022;
	font: 500 16px 'Rubik', sans-serif;
	width: 100%;
	height: 100%;
	color: #EEE;
}

/* geometry */

.outer-polygon-asc {
	--x-offset: calc(var(--height) / tan(60deg));
	clip-path: polygon(var(--x-offset) 0px,0px 100%,calc(100% - var(--x-offset)) 100%,100% 0px);
}

.inner-polygon-asc {
	--x-offset: calc(var(--height) / tan(75deg));
	clip-path: polygon(var(--x-offset) 0px,0px 100%,100% 100%,100% 0px);
}

.outer-polygon-desc {
	--x-offset: calc(var(--height) / tan(75deg));
	clip-path: polygon(0px 0px,var(--x-offset) 100%,100% 100%,calc(100% - var(--x-offset)) 0px);
}

.inner-polygon-desc {
	--x-offset: calc(var(--height) / tan(60deg));
	clip-path: polygon(0px 0px,0px 100%,100% 100%,calc(100% - var(--x-offset)) 0px);
}

/* page title selectors */

.title-outer {
	--height: 72px;
	width: 404px;
	height: var(--height);
	margin: 0px 0px 0px 18px;
}

.title-inner {
	height: 100%;
	margin: 8px 0px 0px 24px;
}

p.title {
	font-size: 32px;
	margin: 8px 0px 0px 24px;
}

/* headline selectors */

.headline-outer {
	--height: 60px;
	height: var(--height);
	width: 424px;
}

.headline-inner {
	height: 100%;
	margin: -8px 8px 0px 0px;
}


.headline {
	margin: 24px 0px 0px 50px;
}

/* media listings */

#media-list {
	flex: 1;
}

.media-list {
	display: flex;
	padding: 2rem 1rem;
	flex-direction: row;
	flex-wrap: wrap;
	column-gap: 2rem;
	row-gap: 2rem;
	justify-content: center;
}

.track-group {
	flex: 0 1 auto;
	width: 424px;
	display: flex;
	flex-direction: column;
}

@media (max-width: 1080px) {
	.media-list {
		flex-direction: column;
	}
}

/* section headings */

.section-heading-outer {
	--height: 52px;
	height: var(--height);
	width: 290px;
	margin: 0px 0px 0px 18px;
}

.section-heading-inner {
	height: 100%;
	margin: 8px 0px 0px 20px;
}

.section-heading {
	font: 24px 'Orbitron', sans-serif;
	color: #022;
	margin: auto;
	margin-top: 6px;
	margin-left: 32px;
}

/* track listings */

.track-listing-outer {
	--height: 240px;
	height: var(--height);
}

.track-listing-container {
	overflow-y: scroll;
	margin: -8px 8px 0px 0px;
	scrollbar-width: none;
}

.track-listing-container ul {
	padding: 8px 84px 0px 64px;
}

.track-item {
	display: flex;
	gap: 8px;
	padding: 4px 0px;
}

.track-item.track-active,
.track-item.track-active .track-queuer,
.track-item.track-active .track-info-toggle{
	color: #3BB;
	filter: drop-shadow(0 0 4px #F00);
}

.track-queuer {
	font-size: 14px;
	margin: 2px 0px 0px 8px;
}

.track-info-toggle {
	font-size: 16px;
	font-weight: bold;
	margin: 1px 0px 0px 0px;
}

.track-queuer,
.track-info-toggle {
	font-family: 'Rubik', sans-serif;
	color: #EEE;
	cursor: pointer;
	text-decoration: none;
	transition: color 0.2s;
}

.track-queuer:hover,
.track-info-toggle:hover {
	color: #3BB;
}

.track-name {
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	font-weight: 500;
	margin: 3px 0px 0px 0px;
}

.track-info-panel {
	overflow: hidden;
	transition: max-height 0.3s ease-out;
}

/* info panels */

.info-panel-content {
	background-color: #BBB;
	--height: 60px;
	padding: 4px 8px 8px 28px;
}

.info-panel-content p {
	margin: 2px 0px 0px 0px;
	font-family: 'Rubik', sans-serif;
	font-size: 10px;
	font-weight: 300;
	color: #022;
}

.info-panel-close {
	display: flex;
	flex-direction: row;
	margin: 4px 0px;
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	color: #EEE;
	text-decoration: none;
	cursor: pointer;
}

.info-panel-close:hover {
	color: #F00;
}

.close-x {
	font-family: 'Orbitron', monospace;
	font-weight: bold;
	font-size: 24px;
	text-decoration: none;
	margin: -4px 8px -4px 0px;
}

/* main player UI controls */

#controls {
	display: flex;
	align-items: center;
	width: 100%;
	height: 30px;
}

#play-control {
	display: flex;
	flex-direction: column;
	width: 60px;
	height: 100%;
	flex-shrink: 0;
	flex-grow: 0;
	background-color: #022;
	--height: 30px;
	height: var(--height);
}

.play-pause-btn {
	cursor: pointer;
}

#player-text {
	color: #3BB;
	font: 22px 'Orbitron', sans-serif;
	margin-left: 24px;
	margin-top: -2px;
}

@keyframes flash {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.play-pause-btn:hover:not(:disabled) {
	animation: flash 0.5s linear infinite;
}

.play-control:disabled {
	opacity: 0.5;
	cursor: default;
}

/* dynamic, interactive timeline */

#timeline {
	--height: 30px;
	height: var(--height);
	width: 100%;
	background-color: #3BB;
	cursor: pointer;
	white-space: nowrap;
	display: flex;
	overflow: clip;
}

.timeline-status {
	font: 12px 'Orbitron', sans-serif;
	overflow: clip;
	margin-top: 8px;
}

#timeline-played {
	--height: 30px;
	height: var(--height);
	background-color: #022;
	overflow: clip;
}

#played-status {
	color: #3BB;
	text-align: right;
	margin-right: 12px;
	margin-left: -400px;
}

#timeline-queued {
	height: 100%;
}

#queued-status {
	color: #022;
	text-align: left;
	margin-left: 2px;
	margin-right: -400px;
}

#footer {
	font: 12px 'Rubik', sans-serif;
	color: #022;
	line-height: 0px;
}