:root {
	--theme-main-background: #111;
	--theme-lighter-background: #222;
	--theme-lightest-background: #333;
	--theme-main-text: #eee;
	--theme-darker-text: #999;
	--theme-anchor-color: #19f;

	--theme-transparent-border: rgba(128, 128, 128, 0.3);
	--theme-yellow: #ff0;
}
/* minecraft font */
@font-face {
	font-family: Minecraft;
	src: url(/fonts/Minecraft.ttf);
	font-display: swap;
}
/* latin-ext */
@font-face {
	font-family: 'Atkinson Hyperlegible';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(/fonts/atkinson-hyperlegible/latin-ext-italic.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
		U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Atkinson Hyperlegible';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(/fonts/atkinson-hyperlegible/latin-italic.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
		U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
	font-family: 'Atkinson Hyperlegible';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url(/fonts/atkinson-hyperlegible/latin-ext-italic-bold.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
		U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Atkinson Hyperlegible';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url(/fonts/atkinson-hyperlegible/latin-italic-bold.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
		U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
	font-family: 'Atkinson Hyperlegible';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(/fonts/atkinson-hyperlegible/latin-ext-italic-bold.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
		U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Atkinson Hyperlegible';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(/fonts/atkinson-hyperlegible/latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
		U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
	font-family: 'Atkinson Hyperlegible';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(/fonts/atkinson-hyperlegible/latin-ext-bold.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
		U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Atkinson Hyperlegible';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(/fonts/atkinson-hyperlegible/latin-bold.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
		U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
	font-family: 'Atkinson Hyperlegible', sans-serif;
	color: var(--theme-main-text);
	background-color: var(--theme-main-background);
	margin: 0;
	overflow-x: hidden;
	height: 100%;
}

html {
	scroll-behavior: smooth;
	height: 100%;
}

/* content is uglier when its max width */
main {
	margin: 0 auto;
	width: 80%;
	padding: 1em;
}

/* makes random height and stuff look less broken */
* {
	box-sizing: border-box;
	vertical-align: baseline;
}

/* base styles for inputs */
input[type='text'],
input[type='submit'],
button {
	-webkit-appearance: none;
	background-color: transparent;
	color: var(--theme-darker-text);
	transition-duration: 250ms;
	border: 1px solid var(--theme-transparent-border);
	border-radius: 4px;
	margin: 0;
	height: 2em;
	font-size: 1em;
}

/* base styles for text input boxes */
input[type='text'] {
	text-align: left;
	padding-left: 0.5em;
}

/* Selecting a text box */
input[type='text']:focus {
	/* make the text lighter */
	color: var(--theme-main-text);
}

/* base styles for buttons */
input[type='submit'],
button {
	margin-left: 0.2em;
	cursor: pointer;
}

/* Hovering over a button */
input[type='submit']:hover,
button:hover {
	/* make the text lighter */
	color: var(--theme-main-text);
}

/* base styles for anchor tags */
a {
	color: var(--theme-anchor-color);
	text-decoration: none;
}

h1 {
	font-size: 2.5em;
	overflow-wrap: anywhere;
}

h2,
h3 {
	margin-top: 0;
	margin-bottom: 0.2em;
}

hr {
	opacity: 0.2;
}

button {
	outline: none;
	font-family: inherit;
	/* safari adds a bit of margin for some reason */
	margin: 0;
}

tr {
	text-align: left;
}

/*
 * this is necessary for background theming, the background can be set through
 * the --background css variable
 */
body:before {
	content: '';
	display: block;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -10;
	background: var(--background) no-repeat center center;
	background-size: cover;
}