:root {
	--primary-color: hsl(200, 100%, 50%);
	--secondary-color: hsl(330, 100%, 50%);
	--tertiary-color: hsl(72, 100%, 50%);
	--background-color: hsl(0, 0%, 15%);
	--text-color: hsl(0, 0%, 90%);
	--link-color: hsl(0, 100%, 100%);
}

@font-face {
	font-family: 'EmojiOne';
	src: url('/emojione-svg.woff2') format('woff2');
}
@font-face {
	font-family: 'sPiN! Font';
	src: url('/spinfont-regular.woff2') format('woff2');
}

* {
	font-family: 'sPiN! Font', sans-serif;
	text-transform: lowercase;
}

*, *:before, *:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

html {
	color: var(--text-color);
	height: 100%;
	line-height: 1.15;
	min-height: 100%;
	min-width: 340px;
	text-align: center;
	text-size-adjust: 100%;
}

body {
	background-attachment: fixed;
	background-color: var(--background-color);
	background-image: url('/background.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: auto 80vh;
	box-sizing: border-box;
	margin: 0;
	min-height: 600px;
	min-width: 340px;
	padding-bottom: 3.75rem;
}

nav a {
}


a {
	color: var(--link-color);
	text-decoration: none;
	text-shadow: 0 0 .25em var(--primary-color);
}

h1 {
	text-align: center;
	color: var(--primary-color);
}

iframe {
	border-radius: 10px;
	max-width: 100%;
}

p {
	font-size: 1.5em;
	margin-top: .25em;
}