:root {
	--black: #000;
	--white: #fff;
}

/* top page settings button */
.page-settings {
	--color: var(--white);
	--accent: red;
}

#playlist-template { display: none; }

.playlist {
	--text: var(--blood);
	--text-accent: var(--blood);
	--bg: var(--skin);
	--bg-accent: var(--skin-light);
}

.sollux {
	--blood: #a1a100;
	--skin: #c2c2b2;
	--skin-light: #e6e6e0;
	--dark-blood: #666600;
	--red: #f20000;
	
	--text: var(--dark-blood);
	/*
	--dark-red: #b30000;
	--l-blue: #3161ff;
	--blue: #003bff;
	--dark-blue: #001e82;
	*/
}

.karkat {
	--blood: #f20000;
	--text: #626262;
	--skin: #c6bcbc;
	--skin-light: #e8e4e4;
}

.tavros {
	--blood: #a15000;
	--skin: #c1b9b1;
	--skin-light: #e6e3df;
}

.aradia {
	--blood: #a30103;
	--skin: #c7bfbf;
	--skin-light: #b1a1a1;
	.wmplayer.default header .icon { transform: translate(-50%,17%); }
}

body.tqOn {
	.karkat * { text-transform: uppercase; }
	.sollux * { text-transform: lowercase; }
	.tavros {
		* { text-transform: uppercase; }
		span::first-letter, h2::first-letter { text-transform: lowercase; }
	}
}

body {
	margin: 0;
	font-family: Courier, monospace;
	font-weight: bold;
	text-align: center;
	display: flex;
	flex-direction: column;
}

main {
	> span p { width: min(100vw, 600px); margin: 1rem auto; }
}

body > header, nav { 
	background: var(--black);
	color: var(--white);
}