* {
	box-sizing: border-box;
}
:root {
	--background: #000000;
	--primary: #991000;
	--secondary: #FFFFFF;
	--tertiary: #696969;
	--sectionSpacing: 0.5em;
	--backgroundImg: url('../graphics/bg/bats.png');
	--backgroundImg2: url('../graphics/bg/num.gif');
	--baseFontSize: 21px;
	--largeScreenFont: 24px;
	--angle: 0deg;
}
@font-face {
  font-family: 'Scary_Halloween_Bold';
  src: url('../graphics/fonts/scary_halloween_font-webfont.woff2') format('woff2'),
       url('../graphics/fonts/scary_halloween_font-webfont.woff') format('woff');
}
@font-face {
	font-family: 'Terminus';
	src: url('../graphics/fonts/TerminusTTF_4.49.3.woff') format('woff'),
		url('../graphics/fonts/TerminusTTF_4.49.3.woff2') format('woff2');
}
@keyframes colourRotate {
  from {
    color: #ff0000;
  }
  12.5% {
	color: #ff8000;
  }
  25% {
	color: #ffff00;
  }
  37.5% {
	color: #00ff00;
  }
  50% {
    color: #00ffff;
  }
  62.5% {
    color: #0000ff;
  }
  75% {
    color: #8700ff;
  }
  87.5% {
    color: #ff00ff;
  }
  100% {
    color: #ff0000;
  }
}
@keyframes rainbowRotate {
	to {
		--angle: 360deg;
	}
}
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@media (min-width: 3840px) {
	:root {
		--baseFontSize: var(--largeScreenFont);
	}
}
html, 
body {
	margin: 0;
	font-family: 'Terminus', monospace;
	font-size: var(--baseFontSize);
	scrollbar-color: var(--primary) var(--background);
	scrollbar-width: thin;
}
body {
	background: var(--backgroundImg);
}
body a {
	color: var(--primary);
	text-decoration: none;
}
a:focus {
	outline: none;
}
main {
	display: flex;
	margin: var(--sectionSpacing) auto 0 auto;
	background: var(--backgroundImg);
	color: var(--secondary);
}
#title {
	text-align: center;
	font-size: 3em;
	color: var(--primary);
	margin: 0;
	background: var(--background);
}
#title a,
marquee a {
	animation: colourRotate 4s linear 0s infinite;
}
nav {
	font-family: 'Scary_Halloween_Bold', sans-serif;
	display: flex;
	justify-content: center;
	background: var(--backgroundImg2);
}
#buttons {
	display: flex;
	text-decoration: none;
}
.button {
	font-size: 1.5em;
    padding: 0.5em;
}
.button a {
	border: 3px solid transparent;
}
.button a:hover,
.button a:active {
	animation: colourRotate 2s linear 0s infinite;
}
.button a,
.button a:focus {
	padding: 0.25em;
}
.button a:focus {
    border: 3px solid;
    border-image: conic-gradient(from var(--angle), 
		#ff0000,
		#ff00ff,
		#8700ff,
		#0000ff,
		#00ffff,
		#00ff00,
		#ffff00,
		#ff8000,
		#ff0000) 
		1;
	animation: rainbowRotate 2s linear infinite;
}
section {
	width: 75%;
	text-align: center;
}
aside {
	width: 25%;
	align-items: center;
}
article b,
marquee {
	color: var(--primary);
	background: var(--background);
	padding-bottom: 0.25em;
}
iframe {
	width: 100%;
	border: 5px solid;
	border-image: conic-gradient(from var(--angle), 
		#ff0000,
		#ff00ff,
		#8700ff,
		#0000ff,
		#00ffff,
		#00ff00,
		#ffff00,
		#ff8000,
		#ff0000) 
		1;
	animation: rainbowRotate 4s linear infinite;
}
#content {
	height: 43em;
}
#player {
	height: 6em;
}
.leftSide {
	height: 32em;
}
.rightSide {
	height: 18em;
}
article {
	padding: 0.5em;
}