:root {
	--header-color: #fff;
	--text-color: #eee;
	--link-color: #52a8e2;
	--link-color-hover: #8dd5e3;
	--button-color: #2e597ff8;
	--button-color-hover: #3b72a1f8;
	--background-color: #29374df8;
	--background-color2: #2b5377f8;
	--background-border-color: #364358;
	--background-border-color2: #2d4d6bf8;
}

@font-face {
	font-family: "SimpleSquare";
	src: url("./ST_simple_square/ST-SimpleSquare/ST-SimpleSquare.woff") format("woff");
}

body {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto auto 1fr;
	margin: 0px;

	width: calc(100vw - (100vw - 100%));
	/* overflow-x: hidden; */
	/* Fixes horizontal scrollbar appearing when the vertical one does */
	min-height: 100vh;
	height: 100%;

	background-size: cover;
	background-position: 50% 80%;
	background-repeat: repeat;
	background-image: url(https://github.com/MT-CTF/capturetheflag/blob/master/menu/background.png?raw=true);
	background-attachment: fixed;
	background-color: #464745;

	font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
	color: var(--text-color);
}

header {
	display: flex;
	align-items: center;

	height: 40px;
	margin-bottom: 24px;
	padding: 12px 24px;
	background: var(--background-color);
}

header img#header-image {
	display: inherit;
}

header img#header-icon {
	display: none;
}

@media all and (max-width: 600px) {
	header img#header-image {
		display: none;
	}

	header img#header-icon {
		display: inherit;
	}
}

nav {
	height: fit-content;
}

nav a:not(:first-of-type) {
	margin-left: 24px;
}

nav a,
nav button {
	font-family: "SimpleSquare", sans-serif;
	font-size: larger;
	text-decoration: none;
}

nav a:hover {
	text-decoration: underline;
}

footer {
	margin-top: auto;

	background: var(--background-color);

	border-top: 2px var(--background-border-color) solid;
	border-radius: 3px;

	line-height: 1.5rem;
	padding: 12px 12px;
}

footer ul {
	list-style-type: none;
	text-align: center;
	margin: 0px;
}

footer ul li * {
	display: inline;
}

h1,
h2,
h3 {
	color: var(--header-color);
}

a {
	color: var(--link-color);
}

a:hover {
	color: var(--link-color-hover);
}

code {
	background-color: #00000055;
	padding: 6px;
	border-radius: 6px;
}

.shield,
.shield img {
	display: inline-block;
	height: 1.5rem;
	margin: 6px;
}

.container {
	box-sizing: border-box;
	width: fit-content;
	max-width: 100vw;
	margin-bottom: 48px;
	margin-left: auto;
	margin-right: auto;
}

.content {
	padding: 12px 24px;
	background: var(--background-color);

	border: 2px var(--background-border-color) solid;
	border-radius: 3px;
}

.ranklist {
	max-width: 100%;
	overflow-x: auto;
	padding-bottom: 12px;
}

.ranklist table {
	border-collapse: collapse;
}

.ranklist table thead {
	position: sticky;
	top: 0;
	background-color: var(--background-color);
}

.ranklist table tbody tr:nth-of-type(odd) {
	background-color: var(--background-color2);
}

.ranklist table tbody td {
	text-align: right;
}

.ranklist table tbody td,
.ranklist table th {
	padding: 2px 6px;
}