@font-face {
	font-family: "OCR A";
	src: url("ocraeacute.woff2") format("woff2");
}

@font-face {
	font-family: Pacifico;
	src: url("pacifico.woff2") format("woff2");
}

@font-face {
	font-family: Troika;
	src: url("troika.woff2") format("woff2");
}

:root {
	--body-background-color: #006400;
	--body-text-color: #ff99ff;

	--main-background-color: #6a006a;
	--main-text-color: #ff6600;

	--link-text-color: #fff;
	--link-text-color-hover: #ff6600;

	--paragraph-text-color: #fff;
}

* {
	margin: 0;
	padding: 0;
	font-family: "OCR A";
	text-align: center;
	box-sizing: border-box;
}

a {
	color: var(--link-text-color);
	text-decoration: none;
	transition: color .2s;
}
	a:hover {
		color: var(--link-text-color-hover);
	}

body {
	margin-top: -2em;
	background: var(--body-background-color);
	color: var(--body-text-color);
}
	body > * {
		padding: 6em 0;
	}

h1, h2, h3 {
	font-weight: normal;
}

h1 {
	font-size: 4em;
	-webkit-text-stroke: 1px;
}

h2 {
	font-family: Troika;
	font-size: 3em;
}

h3 {
	font-family: Troika;
	font-size: 2.5em;
}

p {
	color: var(--paragraph-text-color);
}

ul {
	margin-top: 1em;
	list-style-type: none;
}

video {
	margin-top: 2em;
	height: 400px;
	max-width: 80%;
	max-height: 90%;
	border: 2px solid var(--link-text-color);
	cursor: pointer;
	transition: border-color .2s;
}
	video:hover {
		border-color: var(--link-text-color-hover);
	}

main {
	background: var(--main-background-color);
	color: var(--main-text-color);
}
	main ul {
		margin-top: 3em;
	}
	main li {
		font-family: Pacifico;
		font-size: 2em;
	}

footer {
	padding-bottom: 5em;
}