@font-face {
	font-family: "Perfect DOS";
	src: url("/fonts/perfect-dos-vga-437.woff") format("woff"),
	url("/fonts/perfect-dos-vga-437.woff2") format("woff2"),
	url("/fonts/perfect-dos-vga-437.svg") format("svg"),
	url("/fonts/perfect-dos-vga-437.eot") format("embedded-opentype");
}

@font-face {
	font-family: "Neoneon";
	src: url("/fonts/neoneon.eot") format("embedded-opentype"),
	url("/fonts/neoneon.svg") format("svg"),
	url("/fonts/neoneon.woff") format("woff"),
	url("/fonts/neoneon.woff2") format("woff2");
}

body {
	font-family: "Perfect DOS", "Courier";
	background-color: #000117;
	color: #ff00ff;
}

a {
	color: #ffa300;
}

a:hover {
	color: #ffa360;
	text-decoration: none;
}

button {
	font-family: "Perfect DOS";
	color: #CF0060;
	background-color: #000117;
	border: #CF0060 1px solid;
	margin: 5px;
	padding: 5px;
}

section {
	margin-top: 10px;
	margin-left: 40px;
}


article section p {
	color: #13A8FE;
	width: 100%;
	margin: auto;
	margin-top: 5px;
}

@media only screen and (min-width: 768px) {
article section p {
	width: 50%;
}
}

nav ul {
	list-style: none;
	overflow: hidden;
	position: relative;
}

nav ul li {
	margin: 0 20px 0 0;
	float: left;
}

.logo {
	font-family: "Neoneon";
	font-size: 7em;
	text-shadow: 
		0 0 10px #CF0060, 
		0 0 20px #CF0060,
		0 0 30px #CF0060, 
		0 0 40px #FF00FF, 
		0 0 70px #ffa300, 
		0 0 80px #ffa300, 
		0 0 100px #FF00FF;
	margin: auto;
	width: 50%;
}

.logo:hover, .logo.on {
	color: #fb7ffb;
	text-shadow: 
		0 0 10px #FB7FFB, 
		0 0 20px #CF0060,
		0 0 30px #CF0060, 
		0 0 40px #FB7FFB, 
		0 0 70px #ffa300, 
		0 0 80px #ffa300, 
		0 0 100px #FB7FFB;
}

@keyframes blink {
	from {
		background-color: #FF00FF;
		box-shadow: 0px 0px 5px 5px #FF00FF;
	}

	to {
		background-color: #FB7FFB;
		box-shadow: 0px 0px 5px 5px #FB7FFB;
	}
}

.neon {
	position: fixed;
	top: 0;
	left: 0;
	background-color: #FF00FF;
	box-shadow: 0px 0px 5px 5px;
	animation: blink 0.2s ease-in-out 0s infinite;
}

.neon.top {
	margin-bottom: 5px;
	width: 100%;
	height: 5px;
}
.neon.bottom {
	top: calc(100vh - 5px);
	bottom: 0;
	width: 100%;
	height: 5px;
}
.neon.left {
	height: 100vh;
	width: 5px;
}
.neon.right {
	left: calc(100vw - 5px);
	right: 0;
	height: 100vh;
	width: 5px;
}