:root{
	box-sizing: border-box;
	color-scheme: light dark;

	--text-1: #000;
	--text-2: #ddd;
	--background-1: #fff;
	--background-2: #000;
	--link-1: #00E;
	--link-2: #fd0;
	--link-visited-1: #70E;
	--link-visited-2: #f80;
	--table-border-odd-1: #000;
	--table-border-odd-2: #fff;
	--table-border-even-1: #007;
	--table-border-even-2: #00ffbb;

	--text: light-dark(var(--text-1), var(--text-2));
	--background: light-dark(var(--background-1), var(--background-2));
	--link: light-dark(var(--link-1),var(--link-2));
	--link-visited: light-dark(var(--link-visited-1), var(--link-visited-2));
	--table-border-odd: light-dark(var(--table-border-odd-1), var(--table-border-odd-2));
	--table-border-even: light-dark(var(--table-border-even-1), var(--table-border-even-2));

	--table-cell-text: var(--text);
	--table-cell-background: var(--background);
	--table-border: var(--text);



	--border: 3px;

	--table-border-1: calc(var(--border) * 2);
	--table-border-2: calc(var(--border) * 2);
	--table-inset-1: calc(var(--border) * 3);
	--table-inset-2: calc(var(--border) * 1);
	--table-padding-1: 4px;
	--table-padding-2: 6px;

	--music-box-max-image-height: 90px;
	--music-box-max-image-width: var(--music-box-max-image-height);
	--music-box-image-magic: calc(var(--music-box-max-image-width));
}

.inverted-fate{
	--text: light-dark(var(--text-2), var(--text-1));
	--background: light-dark(var(--background-2), var(--background-1));
	--link: light-dark(var(--link-2),var(--link-1));
	--link-visited: light-dark(var(--link-visited-2), var(--link-visited-1));
	--table-border-odd: light-dark(var(--table-border-odd-1), var(--table-border-odd-2));
	--table-border-even: light-dark(var(--table-border-even-1), var(--table-border-even-2));

	--table-cell-text: var(--text);
	--table-cell-background: var(--background);
	--table-border: var(--background);
}

a{
	color: var(--link);
}

a:visited{
	color: var(--link-visited);
}

li:empty{
	display: none;
}


body{
	color: var(--text);
}

body {
	background-color: var(--background);
}

table{
	--table-border: var(--table-border-odd);
	border-top: var(--table-border-1) outset var(--table-border);
	border-right: var(--table-border-2) outset var(--table-border);
	border-bottom: var(--table-border-1) outset var(--table-border);
	border-left: var(--table-border-2) outset var(--table-border);
	width: 100%;
	border-spacing: 0;
}

table :is(td, th){
	border-top: var(--table-inset-1) inset var(--table-border);
	border-right: var(--table-inset-2) inset var(--table-border);
	border-bottom: var(--table-inset-1) inset var(--table-border);
	border-left: var(--table-inset-2) inset var(--table-border);
	padding: var(--table-padding-1) var(--table-padding-2);
	background: var(--table-cell-background);
	color: var(--table-cell-text);
}

table :where(tr:nth-child(2n-1) td){
	--table-border: var(--table-border-odd);
}


table :where(tr:nth-child(2n) td){
	--table-border: var(--table-border-even);
	--table-cell-background: #020;
	--table-cell-text: #fff;
}


.music-box :is(td, th):first-child{
	text-align: center;
	width: var(--music-box-image-magic);
	padding: var(--table-padding-1) 0;
}

.music-box :is(td, th):first-child img{
	object-fit: contain;
	height: var(--music-box-max-image-height);
	width: var(--music-box-max-image-width);
	margin: calc(var(--table-inset-1) * -1) calc(var(--table-inset-2) * -1);
}

.music-box tr{
	display: grid;
	grid-template-rows: repeat(2, 1fr);
	grid-template-columns: 0fr 2fr 3fr 2fr 0.75fr 2fr;
	grid-auto-flow: column;
}

.music-box :is(td, th){
	align-content: center;
	display: block;
}

.music-box :is(td, th):is(:last-child, :first-child){
	grid-row: span 2;
}