:root {
	--background-color: rgb(23% 23% 23%);
	--color: rgb(90% 90% 90%);
	background-color: hsl(from var(--background-color) h calc(s * 0.8) calc(l / 1.2) / alpha);;
	color: var(--color);
	scrollbar-color: var(--color) hsl(from var(--background-color) h s l / 0.7);
	font-family: sans-serif;
}

/*
:root * {
	border: 1px solid hsl(from var(--color) h s calc(l * 0.5));
	border-collapse: separate;
	margin: 2px;
	padding: 2px;
}
*/

:root {
	border-collapse: collapse;
}

body {
	display: flex;
	flex-flow: column;
	height: 100vh;
	overflow-y: hidden;
}

@keyframes flash {
	50% { filter: brightness(1); }
}
header {
	background-size: contain;
	background-image: url("images/backdrop0.webp"), url("images/backdrop4.webp");
	background-blend-mode: overlay;
	box-shadow: 0 0 10px rgb(170, 93, 16);
	filter: brightness(0.8);
	animation-name: flash;
	animation-delay: 2s;
	animation-duration: 1.5s;
	padding-top: 0.6em;
	padding-bottom: 0.5em;
	margin-bottom: 0.25em;
	border-radius: 3em;
	img {
		filter: inherit;
		width: 12em;
		height: 5em;
		margin: auto;
	}
	h1 {
		text-align: center;
		margin: 0.2em;
	}
	nav div {
		padding: 0.5em;
		backdrop-filter: brightness(0.55);
		border-radius: 1em;
		h2 {
			margin: 0;
			padding-bottom: 0.25em;
		}
		div { padding: 0; }
	}
}

header:hover {
	filter: brightness(0.85);
}

footer {
	margin-top: 0.5em;
}
header, footer {
	flex: 0 1 auto; /* shorthand for: flex-grow: 0; flex-shrink: 1; flex-basis: auto; */
}

main {
	flex: 1 1 auto;
	overflow-y: scroll;
	> div {
		width: fit-content;
		margin-top: 1em;
		margin-bottom: 1em;
		padding: 0.5em;
		border: 1px solid hsl(from var(--color) h s calc(l * 0.5) / alpha);
		border-radius: 1em;
		box-shadow: 0px 0px 10px hsl(from var(--color) h s calc(l * 0.05) / alpha);
		background:
			linear-gradient(-45deg, transparent 50%, var(--background-color) 75%, hsl(from var(--background-color) 30deg 5% calc(l * 1.2) / alpha)),
			linear-gradient(135deg, transparent 50%, var(--background-color) 75%, hsl(from var(--background-color) 240deg 5% calc(l * 1.2) / alpha)),
			var(--background-color);

	}
}

a {
	color: lightblue;
}

a:hover {
	color: rgb(149, 225, 251);
	background-color: rgb(0 0 0 / 0.35);
}

h1, h2, h3, h4, h5, h6 {
	text-shadow: navy 0 0 0.5em, orangered 0 0 0.3em;
}

table, th, td {
	border: 1px solid hsl(from var(--color) h s calc(l * 0.5) / alpha);
	border-collapse: collapse;
}

table {
	background-color: hsl(from var(--background-color) h calc(s * 0.8) calc(l * 1.25) / alpha);
}

th {
	background-color: hsl(from var(--background-color) h calc(s * 0.8) calc(l * 1.6) / alpha);
	color: hsl(from var(--color) h calc(s * 0.8) calc(l * 1.6) / alpha);
	text-align: left;
}

table.results table th, table table td {
	padding-left: 0.25em;
	padding-right: 0.25em;
}

table.sticky-head thead tr th {
	position: sticky; top: 0; z-index: 1;
	background-color: hsl(from var(--background-color) h calc(s * 0.8) calc(l * 1.6) / 1);
}

table.sticky-head {
	display: block; overflow: auto;
}

th.side-head {
	vertical-align: top;
	padding-top: 0.4em;
	span {
		writing-mode: sideways-lr;
	}
}

tr.alternate:nth-child(odd) {
	background-color: hsl(from var(--background-color) h s calc(l * 1.05) / alpha);
}
tr.alternate:nth-child(even) {
	background-color: hsl(from var(--background-color) h s calc(l / 1.05) / alpha);
}
tr.alternate:hover {
	background-color: hsl(from var(--background-color) h calc(s * 0.8) calc(l * 1.3) / 1);
}

table.team, table.team th, table.team td {
	background-color: inherit;
}

table.player, table.player th, table.player td {
	border: none;
	background-color: inherit;
}

.player-container {
	display: flex;
	padding-bottom: 0.2em;
}

.player div {
	box-shadow: 2px 2px 3px black;
	border: 1px solid black;
	border-radius: 10% 50% 50% 10% / 10% 30% 30% 10%;
	padding-left: 2px; padding-right: 2px;
	padding-top: 1px; padding-bottom: 1px;
	text-align: left;
	span.elo { padding-left: 0.2em; }
}

.player-rank {
	text-align: center;
	font-weight: bold;
	text-shadow: palegoldenrod 0 0 0.3em, black 1px 1px 2px, black -1px -1px 2px;
}

.player-contender, .player-contender div {
	background-color: hsl(from var(--background-color) 60deg 30% l / alpha);
}

.player-winner, .player-winner div {
	background-color: hsl(from var(--background-color) 120deg 30% l / alpha);
}

.player-loser, .player-loser div {
	background-color: hsl(from var(--background-color) 0deg 30% l / alpha);
}

.player-spectator, .player-spectator div {
	background-color: darkblue;
}

.player-empty-slot, .player-empty-slot div {
	background-color: rgb(10%, 10%, 15%)
}

.player-closed-slot, .player-closed-slot div {
	background-color: darkviolet;
}

.number, .duration, .time, .key, .team { font-family: monospace, sans-serif; }

.number, .duration { text-align: right; }

.lov, .number, .key, .date, .duration, .map, .player { white-space: nowrap; }

footer, .key, .mods, .elo, .bot { font-size: 0.8em; }

.lov { text-align: center; }

.dimmed, footer, .key, .mods, .elo, .team, .bot, .player-discounted, .player-spectator, .player-empty-slot, .player-closed-slot {
	color: hsl(from var(--color) h s calc(l * 0.6) / alpha);
}

.bot {
	border: 1px solid hsl(from var(--color) h s calc(l * 0.6) / alpha);
}

.map img {
	 margin-left: 3px; vertical-align: text-bottom; width: 1em; height: 1em; filter: grayscale(75%);
}