* {
	box-sizing: border-box;
}
:root {
	--background: #000000;
	--primary: #991000;
	--secondary: #FFFFFF;
	--tertiary: #696969;
	--sectionSpacing: 1em;
	--baseFontSize: 21px;
	--largeScreenFont: 24px;
	--angle: 0deg;
}
@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 rainbowSlide {
    0% {
        background-position: 0 50%;
    }
    100% {
        background-position: 200% 50%;
    }
}
@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 var(--sectionSpacing);
	font-family: 'Terminus', monospace;
	font-size: var(--baseFontSize);
	color: var(--secondary);
	text-align: center;
	scrollbar-color: var(--primary) var(--background);
	scrollbar-width: thin;
}
body {
	background: var(--background);
}
body a {
	color: var(--primary);
	text-decoration: none;
}
body h1, body h2 {
	color: var(--primary);
}
body h1 {
	font-size: 2em;
}
body h2 {
	font-size: 1.5em;
	color: var(--primary);
}
ul {
	list-style: "★ ";
	margin-left: 0.5em;
}
li > ul {
	list-style: "☆ ";
}
#intro {
	display: flex;
	justify-content: center;
	margin: var(--sectionSpacing) auto;
}
#welcome {
	display: block;
}
.rainbowText {
	background-image: linear-gradient(to left,
	#ff0000,
	#ff00ff,
	#8700ff,
	#0000ff,
	#00ffff,
	#00ff00,
	#ffff00,
	#ff8000,
	#ff0000);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	background-size: 200% auto;
	animation: rainbowSlide 4s linear infinite;
}
.title {
	background-image: linear-gradient(to left,
	#ff0000,
	#ff00ff,
	#8700ff,
	#0000ff,
	#00ffff,
	#00ff00,
	#ffff00,
	#ff8000,
	#ff0000);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	background-size: 200% auto;
	animation: rainbowSlide 4s linear infinite;
}
.bat {
	width: 75px;
	height: 75px;
}
.entry {
	display: flex;
	padding-bottom: 10px;
}
.header {
	max-width: 50px;
}
.cd {
	width: 30px;
}
.tv {
	width: 40px;
}
.heart,
.question {
	width: 40px;
}
.entry h3 {
	font-style: italic;
	margin: auto 0.8em;
}
h3 a {
	color: var(--secondary);
}
.entry h4 {
	color: var(--tertiary);
	font-style: italic;
	margin: auto 1em;
	padding-bottom: var(--sectionSpacing);
}
.description {
	display: block;
	text-align: left;
}
.objectTitle {
	margin-top: -0.15em;
	text-decoration: underline;
	padding: 0 20px;
}
.divider {
	padding-bottom: var(--sectionSpacing);
}
ul,
.topFavs {
	text-align: left;
}
.topFavs p,
.oc p {
	font-style: italic;
	padding: 0 20px;
}
.topFavs img {
	width: 300px;
}
.favs {
	display: block;
	justify-content: center;
}
.favs img {
	width: 200px;
}
a img {
	border: 5px solid transparent;
}
a img:hover {
	border: 5px solid;
	border-image: conic-gradient(from var(--angle), 
		#ff0000,
		#ff8000,
		#ffff00,
		#00ff00,
		#00ffff,
		#0000ff,
		#8700ff,
		#ff00ff,
		#ff0000) 
		1;
	animation: rainbowRotate 4s linear infinite;
}
#email:hover,
#neocities:hover,
#viewPlaylist:hover,
.favLinks:hover {
	animation: colourRotate 2s linear 0s infinite;
}
#email:focus,
#neocities:focus,
.favLinks:focus {
	outline: none;
}
.wip {
	padding-bottom: var(--sectionSpacing);
}
#meta {
	text-align: left;
	padding-top: var(--sectionSpacing);
}
#viewPlaylist {
	float: right;
	font-size: 0.75em;
}
.trackTitle {
	font-weight: bold;
}
.trackArtist {
	color: var(--primary);
	font-size: 75%;
	padding-left: 0.5em;
}
.customControls {
	margin-top: 0.5em;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}
.customControls button {
	font-weight: bold;
    color: var(--primary);
    cursor: pointer;
    background: none;
    border: none;
    text-align: center;
}
.customControls button:focus {
	outline: none;
}
#playPauseBtn {
	padding: 0 0.5em 0.25em;
	font-size: 1em;
} 
#prevBtn,
#nextBtn {
	font-size: 1em;
	padding: 0 0.5em;
}
#viewPlaylist a:hover,
#playPauseBtn:hover,
#prevBtn:hover,
#nextBtn:hover {
	animation: colourRotate 2s linear 0s infinite;
}
.timeDisplay {
	padding: 0 var(--sectionSpacing);
}
.progressContainer {
	flex: 1;
    padding-left: 0.5rem;
    cursor: pointer;
    width: 100%;
}
.progressBackground {
	height: 0.25em;
	position: relative;
	background: var(--tertiary);
}
.progressFill {
	height: 100%;
	background: var(--primary);
}
.hiddenPlaylist {
	display: none;
}
.track {
	color: var(--primary);
}