:root {
	--datcolor: #ffb54e;
	--dacolor: #8625be;
	--dafont: 'Verdana', 'Arial', sans-serif;
	--h1font-size: 22px;
	--footfont-size: 14px;
	}
main {
	margin-inline: auto;
	max-height: 100%;
	font-family: var(--dafont);
	background-color: var(--dacolor);
	color: var(--datcolor);
	}
html {
	height: 99.1%;
	max-width: max(calc(100% - 50px), 600px);
	margin-inline: auto;
	font-family: var(--dafont);
	font-size: 15px;
	line-height: 2;
	color: var(--datcolor);
	text-align: center;
	background-color: var(--dacolor);
	background-image: url('/images/banner.png');
	background-repeat: no-repeat;
	background-position: top center;
	animation-name: monitoron;
	animation-duration: 1s;
	animation-direction: reverse;
	}
body {
	height: 100%;
	display: flex;
	flex-direction: column;
	}
@keyframes monitoron {
	from {background-color: var(--dacolor);}
	to {background-color: var(--datcolor);}
	}
.guts	{
	flex: 1 0 auto;
	}
footer {
	flex-shrink: 0;
	background-color: transparent;
	margin-top: 3rem;
	text-align: center;
 	padding-block: 1.5rem 1.5rem;
	border-block-start: 1px solid var(--datcolor);
	color: var(--datcolor);
	position:relative;
    	bottom:0;
	font-size: var(--footfont-size);
	}
h1 {
	padding-block: 1.5rem 1.5rem;
	margin-inline: auto;
	font-family: var(--dafont);
	font-weight: bold;
	font-size: var(--h1font-size);
	}
a {
	color: var(--datcolor);
	}
a:hover {
	text-decoration: none;
	}
iframe {
	border: none;
	float: center;
	overflow-y: hidden;
	}
::selection {
	color: var(--dacolor);
	background-color: var(--datcolor);
	}
ul.nav {
	list-style-type: none;
	margin: 0;
	padding: 0;
	}
li.nav {
	float: none;
	display: inline-block;
	border-right: 1px solid var(--datcolor);
	border-bottom: 1px solid var(--datcolor);
	border-top: 1px solid var(--datcolor);
	border-left: 1px solid var(--datcolor);
	box-sizing: border-box;
	border-radius: 0px;
	margin: 180px 3px;
	}
li.nav a {
	display: block;
	padding: 8px;
	text-decoration: none;
	transition: color 0.8s, background-color 0.8s;
	}
li a:hover {
	color: var(--dacolor);
	border-radius: 0px;
	background-color: var(--datcolor);
	}
.active {
	color: var(--dacolor);
	background-color: var(--datcolor);
	}
.cartists {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	}
.cartist {
	background-color: var(--dacolor);
	animation-name: monitoron;
	animation-duration: 1s;
	animation-direction: reverse;
	border: 2px solid var(--datcolor);
	margin: 20px 20px;
	width: 380px;
	height: 570px;
	box-shadow:5px 5px 5px var(--datcolor);
	text-align: center;
	line-height: 50px;
 	font-size: 35px;
	transition: color 1s, background-color 1s;
	}
.cartist:hover {
	color: var(--dacolor);
	background-color: var(--datcolor);
	}
.cartist:active {
	transform: translate(5px, 5px);
	box-shadow: none;
	}
.cartist img {
	max-width: 80%;
	height: auto;
	}
.othermusic {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	}
.soundcard {
	box-sizing: border-box;
	background-color: var(--dacolor);
	animation-name: monitoron;
	animation-duration: 1s;
	animation-direction: reverse;
	border: 2px solid var(--datcolor);
	margin: 30px 30px;
	width: 380px;
	height:240px;
	padding: 50px;
	text-align: center;
	align-items: center;
	}
@media screen and (max-width: 600px) {
	li.nav {float: none;
		display: inline-block};
	}

/* right now there are margin issues in responsive mode for the li elements of the navigation bar
... this is due to top margin value of 180px in order for nav bar to fall below the banner.
solution is to make banner an actual block element as opposed to background image element.*/