/** Title font **/

@font-face {
	font-family: "ImpactStrive";
	src: url("impact_strive.ttf");
}

/** Body **/

body {
	background-color: black;
	color: white;

	text-align: center;

	font-family: "Noto Sans", sans-serif;

	display: flex;
	flex-wrap: wrap;
	justify-content: start;
	align-items: start;
}

/** Links **/

a {
	color: #9a1e23;
}

a:hover {
	color: #ec5351;
}

a:active {
	color: #ff8882;
}

/** Titles **/

h1, h2, h3, h4, h5, h6 {
	margin: 0;
}

header {
	width: 448px;
	height: 128px;
	margin-bottom: 16px;
}

hgroup {
	position: fixed;

	display: grid;
	grid-template-areas: "logo title" "logo page";
	grid-template-columns: auto auto;
	grid-template-rows: auto auto;
	column-gap: 16px;
	row-gap: 8px;

	justify-content: start;
	align-items: center;
}

hgroup #logo {
	grid-area: logo;
	border-radius: 8px;
}

hgroup #title {
	grid-area: title;
	align-self: end;
}

hgroup #subtitle {
	grid-area: page;
	align-self: start;
}

.red {
	color: #993399;
}

.character {
	height: 1.2em;
	width: 1.2em;
	vertical-align: sub;
}

/** Tables **/

#tables {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px;
}

h1 {
	font-size: xxx-large;
	font-family: "ImpactStrive", "Impact", serif;
}

h1, h2, h3, h4, h5, h6, th {
	text-shadow: 4px 4px 4px #1E0000;
}

#logo, table, .noscript {
	box-shadow: 4px 4px 4px #000000;
}

.noscript {
	padding: 6px 12px;
	background-color: #1E0000;
}

table {
	border-collapse: collapse;
}

td, th {
	border: 0;
	padding: 6px 12px;
	
	background-color: #1e0000;
}

table.matches thead {
	writing-mode: vertical-lr;
}

table.matches thead .character {
	vertical-align: middle;
}

table.matches thead th {
	padding: 12px 6px;
}

table.matches thead th:first-child {
	border: none;

	background-color: transparent;
	box-shadow: none;
}

td.match {
	background-color: #100a0a;
}

td.match.win {
	background-color: #f76768;
}

td.match.loss {
	background-color: #446d9c;
}

td.match.self, td.match.tie {
	background-color: #343434;
}

tr.first {
	font-size: larger;
}

tr.first :is(td, th) {
	background-color: #9a1e23;
}

.disclaimer{
	position:fixed;
	bottom:0;
	text-align:center;
}