:root {
	--page-bg: #31005b;
	--text-color: white;
	--match-border: black;
}

* {
	font-family: 'Varela';
}

html, body {
	height: 100%;
	width: 100%;
	margin: 0;
}

body {
	display: flex;
	flex-direction: column;
	background-color: var(--page-bg);
}

main {
	flex: 1;
}

.control-panel {

}

.match-selection-label {
	color: var(--text-color);
	margin-left: 1rem;
}

.match-selection {
	color: var(--text-color);
	background-color: grey;
	overflow-y: auto;
	margin-left: 1rem;
	min-width: 12rem;
	width: auto;
}

.livematches {
	width: 100% - 3rem;
	margin: 3rem;
}

.match {
	color: var(--text-color);
	width: 100%;
}

.player-table {
	color: var(--text-color);
	border: none;
	font-size: 2.5rem;
	margin-bottom: none;
}

.score {
	text-align: center;
	margin-top: none;
	font-weight: bold;
}

.match-table h1 {
	color: var(--text-color);
	text-align: center;
}

.match-table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
}

.match-table th, td {
	border: 3px solid var(--match-border);
	padding: 8px;
	text-align: left;
	vertical-align: top;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.no-matches {
	color: var(--text-color);
	text-align: center;
}

.header-highseed {
	width: 50%;
	text-align: right;
}

.header-lowseed {
	width: 50%;
	text-align: left;
}

.header-vs {
	padding-left: 1rem;
	padding-right: 1rem;
	text-align: center;
}

.header-player1 { width: 95% / 7%; }
.header-player2 { width: 95% / 7%; }
.header-bans1   { width: 95% / 7%; }
.header-bans2   { width: 95% / 7%; }
.header-pickers { width: 95% / 7%; }
.header-picks   { width: 95% / 7%; }
.header-wins    { width: 95% / 7%; }