:root {
	/* Base font size */
	font-size: 10px;

	/* Heading height variable*/
	--heading-height: 18em;
}

body {
	font-family: "Roboto", Arial, sans-serif;
	min-height: 100vh;
	background-color: #101010;
}

header {
	position: fixed;
	width: 100%;
	height: var(--heading-height);
}

/* Create angled background with 'before' pseudo-element */
header::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	bottom: 6em;
	width: 100%;
	height: calc(var(--heading-height) + 10em);
	z-index: -1;
	transform: skewY(-3.5deg);
	background:
		linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)),
		url(https://images.unsplash.com/photo-1495464101292-552d0b52fe41?auto=format&fit=crop&w=1350&q=80) no-repeat center,
		linear-gradient(#4e4376, #2b5876);
	background-size: cover;
	border-bottom: .2em solid #fff;
}

h1 {
	font-size: calc(1.8em + 1.6vw);
	font-weight: 500;
	letter-spacing: .01em;
	padding: 5rem 0 0 4.5rem;
	text-shadow: .022em .022em .022em #111;
	color: #fff;
}

main {
	padding: calc(var(--heading-height) + 1.5vw) 4em 0;
}

.label-title {
	font-size: calc(2em + .25vw);
	font-weight: 400;
	line-height: 1.5;
	margin-bottom: 0.5em;
	color: #fcfcfc;
}

.label-game {
	font-size: calc(2em + .25vw);
	font-weight: 400;
	margin-top: 0.5em;
	color: #fcfcfc;
}

.select {
	width: 150px;
}

.games {
	align-content: left;
	font-size: 15px;
}

th, td {
	text-align: left;
}