:root {
	--bg: black;
	--fg: white;
	--acc: yellow;
}

body {
	background: var(--bg);
	color: var(--fg);
	width: 28rem;
	margin: 4rem auto;
	line-height: 125%;
	font-family: 'Inter', system-ui, sans-serif;
	letter-spacing: -0.03125em;
	font-feature-settings: 'cv02' 1,'cv03' 1,'cv04' 1, 'cv09' 1, 'cv05' 1, 'ss07' 1, 'ss08' 1, 'cv08' 1, 'cv10' 1;
	font-size: 1rem;
}

@media only screen and (max-device-width: 480px) {
	html {
		font-size: 3.5vw;
	}
	body {
		width: calc(100% - 3rem);
		margin: 1.5rem;
	}
}

h1 {
	color: var(--acc);
	font-weight: bold;
	font-size: 2rem;
	margin: 0;
	margin-top: 1.5rem;
	line-height: 100%;
	font-family: 'InterDisplay', system-ui, sans-serif;
}

::selection {
	background: var(--fg);
	color: var(--bg);
}

img {
	width: 100%;
	user-select: none;
}

table {
	border-collapse: collapse;
	margin: 1rem 0;
}

table:not(:has(.streamlink)) td {
	padding-inline-end: 2rem;
}

table:has(.streamlink) {
	table-layout: fixed;
	width: 100%;
}

td {
	border: 0 solid transparent;
	background-clip: padding-box;
}

tr > td + td {
  border-inline-start-width: 0.25rem;
}

tr + tr > td {
  border-top-width: 0.25rem;
}

td {
	padding: 0;
}

.streamlink.youtube {--acc: #ff0000;}
.streamlink.youtubefullmix {--acc: #ff0000;}
.streamlink.bandcamp {--acc: #1DA0C3;}
.streamlink.applemusic {--acc: #FF2950;}
.streamlink.spotify {--acc: #1ED760;}
.streamlink.soundcloud {--acc: #FF5001;}
.streamlink.amazonmusic {--acc: #25D3DA;}
.streamlink.tencentmusic {--acc: #1073F9;}
.streamlink.iheartradio {--acc: #C6002B;}

.streamlink {
	width: 100%;
	display: inline-block;
	box-sizing: border-box;
	cursor: pointer;
	user-select: none;
	border: solid 0.0625rem var(--acc);
	height: 3.125rem;
	background: none;
	color: var(--fg);
}

.streamlink img {
	width: 2rem;
	height: 2rem;
	vertical-align: middle;
	padding: 0.5rem;
	padding-inline-end: 0;
}
.streamlink span {
	vertical-align: middle;
	width: calc(100% - 2.5rem);
	text-align: center;
	display: inline-block;
}
.streamlink:hover {
	background: var(--acc);
	color: white;
}
@keyframes icon-hover {
	0% {scale: 1.12;}
}
.streamlink:hover img {
	filter: grayscale(100%) brightness(10000%);
	animation: 0.2s icon-hover;
}
.streamlink.spotify:hover img, a.amazonmusic:hover img {
	filter: brightness(0%);
}
.streamlink.spotify:hover, a.amazonmusic:hover {
	color: black;
}

/* mode-black - force all elements to be black for a light background */
.mode-black .streamlink {
	color: black;
	border-color: black;
}
.mode-black .streamlink:hover {
	background: black;
	color: var(--acc);
}
.mode-black .streamlink img {
	filter: brightness(0%);
}
.mode-black .streamlink:hover img {
	filter: none;
}

/* mode-white - force all elements to be white for...also a light background.. */
.mode-white a {
	color: white;
	border-color: white;
}
.mode-white a:hover {
	background: white;
	color: var(--acc);
}
.mode-white a img {
	filter: grayscale(100%) brightness(10000%);
}
.mode-white a:hover img {
	filter: none;
}

a:not(.streamlink) {
	text-decoration: underline;
	cursor: pointer;
	color: inherit;
}
a:not(.streamlink):hover {
	color: var(--acc);
}