html {
	--font-sans-serif: 'Segoe UI', 'Lucida Sans Unicode', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--font-monospace: Consolas, monospace;

	--font-mod-small: 1.25em;
	--font-mod-medium: 1.5em;
	--font-mod-large: 2em;
	--font-mod-huge: 2.5em;
	--font-mod-insane: 3em;

	--spacing-tiny: calc(var(--spacing-small) * 0.5);
	--spacing-small: 1rem;
	--spacing-medium: calc(var(--spacing-small) * 2);
	--spacing-large: calc(var(--spacing-medium) * 2);
	--spacing-huge: calc(var(--spacing-large) * 2);

	--color-foreground: #222;
	--color-background: #fdfdfd;

	--color-accent: #264;
	--color-accent-contrast: var(--color-background);

	--color-accent-secondary: #933;
	--color-accent-secondary-15: #9933331A;

	font-size: 18px;
}

body {
	font-family: var(--font-sans-serif);
	font-weight: 400;
	line-height: 1.5;
	background: var(--color-background);
	color: var(--color-foreground);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--color-accent);
	font-weight: bold;
	text-align: center;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 2rem; }
h4 { font-size: 1.75rem; }
h5 { font-size: 1.5rem; }
h6 { font-size: 1.25rem; }

a {
	color: var(--color-accent-secondary);
	transition: all 300ms ease-in;
}

a:hover, a:active, a:focus { background: var(--color-accent-secondary-15); }

/*
 * Sidebar / Nav
 */

body > header {
	background: var(--color-accent);
	padding: var(--spacing-tiny) var(--spacing-small);
	padding-bottom: 0;
}

body > header * { color: var(--color-accent-contrast) !important; }

body > header h1 { font-size: 1.25rem; }

body > header > nav {
	display: flex;
	align-items: center;
	justify-content: center;

}

body > header > nav > a {
	padding: var(--spacing-tiny) var(--spacing-small);
	text-decoration: none;
	transition: all 250ms ease-in;
}
body > header > nav > a:hover,
body > header > nav > a:active,
body > header > nav > a:focus {
	background: rgba(255, 255, 255, 0.2);
}


#toc ol { padding-left: var(--spacing-small); }


/*
 * Main
 */
body > main { overflow-y: scroll; }

body > main > section {
	margin: var(--spacing-large) auto;
}

body > main > section:first-of-type { margin-top: var(--spacing-medium); }

table { width: 100%; }
th, td { padding: var(--spacing-tiny) var(--spacing-small); }

thead {
	padding: var(--spacing-medium);
	font-size: var(--font-mod-small);
	border-bottom: 2px solid var(--color-foreground);
}

tbody tr:nth-child(odd) { background: rgba(0, 0, 0, 0.075); }

#teams th[scope='row'] { text-align: left; }
/* Games Played, W-L-T */
#teams td:nth-child(2),
#teams td:nth-child(3) {
	text-align: center;
	font-family: var(--font-monospace);
}
/* Owner */
#teams td:nth-child(4) { text-align: right; }
#teams td:last-child { text-align: right; }

#teams .blocked {
	display: block;
	font-size: 0.8em;
	color: #999;
}

/* JS-Only */
#teams .opponent::before { content: ' vs '; }



.schedule tbody td:nth-of-type(2) { text-align: right; }
.schedule .played { color: #ccc; }
.schedule .win { background: #396a; color: #000; }
.schedule .lose { background: #933a; color: #fff; }