/* General Style Elements */

/* Color Variables Can Be Modified Here
	some sets are provided, just comment out what you don't want. */
:root {
	/* Gold Color Scheme */
	--aFontFamily: Tahoma, sans-serif;
	--aUIFontFamily: monospace;
	--aPlayContainer-color: rgb(214, 173, 82);
	--aPlayContainer-border: rgb(189, 172, 127);
	--aWrapBg-color: rgb(150, 120, 58);
	--aWrapBg-border: rgb(150, 120, 58);
	--aWrapLabel-color: linear-gradient(rgb(22, 17, 8), rgb(149, 119, 58));
	--aWrapBgSm-color: rgb(149, 119, 58);
	--aUILabel-color: rgb(242, 195, 5);
	--aButton-color: linear-gradient(-45deg, rgb(234, 212, 168), rgb(226, 196, 134));
	--aButton-active: rgb(172, 137, 64);
	--aButton-border: rgb(172, 137, 64);
	--aArtworkFrame-color: rgb(230, 204, 152);
	--aPlayNow-color: rgb(240, 193, 5);
	--aPlayNowBg-color: rgba(170, 175, 170, 0.5);
	--aLoaderBg-color: rgba(107, 86, 42,.5);
	--aSpinner-color: rgb(188, 171, 126);
	--aSpinnerText-color: rgb(0,0,0);
	--aSliderBg-color: rgb(195, 163, 91);
	--aSliderThumbPad-color: rgba(105, 55, 43,1);
	--aListBg-color: rgb(64, 51, 25);
	--aListLabel-color: rgb(237, 220, 185);
	--aScroll-color: rgb(193, 162, 90);
	--aScrollThumbOutline-color: rgb(214, 172, 81);
	--aScrollThumbPad-color: rgb(240, 193, 5);
	--aMarquee-color: rgb(238, 191, 5);
	
	/* Blue Accentuation
	--aPlayContainer-color: rgb(79, 179, 209);
	--aPlayContainer-border: rgb(81, 181, 214);
	--aWrapBg-color: rgb(80, 180, 212);
	--aWrapLabel-color: linear-gradient(rgb(22, 17, 8), rgb(79, 179, 209));
	--aWrapBgSm-color: rgb(80, 180, 212);
	--aWrapBg-border: rgb(80, 124, 212);
	--aPlayNow-color: rgb(240, 193, 5);
	--aPlayNowBg-color: rgb(81, 125, 214);
	--aArtworkFrame-color: rgb(230, 204, 152);
	--aListBg-color: rgb(116, 118, 116);
	
	/* Audius Pallete
	--aPlayContainer-color: rgb(218, 112, 233);
	--aPlayContainer-border: rgb(255, 255, 255);
	--aWrapBg-color: rgb(255, 255, 255);
	--aWrapLabel-color: linear-gradient(rgb(22, 17, 8), rgb(255, 255, 255));
	--aWrapBgSm-color: rgb(202, 15, 222);
	--aWrapBg-border: rgb(120, 24, 195);
	--aPlayNow-color: rgb(240, 193, 5);
	--aPlayNowBg-color: rgb(119, 23, 194);
	--aArtworkFrame-color: rgb(230, 204, 152);
	--aListBg-color: rgb(116, 118, 116);
	/* end */
}

/* Can be used to position player within a container
	Keep this box! It will force the size of the interface
	on your slow-loading screens and reduce janky-ness of the
	User Interface.  */
#aPlayerContainer {
	margin-left: auto;
	margin-right: auto;
	margin-top: 1em;
	margin-bottom: 1em;
	max-width: 60em;
	border: var(--aPlayContainer-border) .2em solid;
	border-radius: .75em;
	background-color: var(--aPlayContainer-color);
}

/* Audio Player Wrapper */
#aWrap {
	display: block;
	align-self: center;
	font-family: var(--aFontFamily);
	box-sizing: border-box;
	max-width: 60em;
	height: 50em;
	padding: 2em 0 0 0;
	border-radius: .5em;
	border: var(--aWrapBg-border) .2em solid;
	/* background styles */
	position: relative;
	display: inline-block;
	background-color: var(--aWrapBg-color);
	/*background: var(--aWrapBg-color)linear-gradient(-45deg, rgb(255, 255, 255) 0%, rgb(150, 120, 58) 100%) 0% 0% / 150% 150%;*/
	animation: 5s ease 1s infinite normal none running Gradient;
}
#aWrap:after{
	position: absolute;
	top: .01em;
	left: 0;
	width: calc(100% - .7em);
	height: 1.2em;
	font-family: var(--aUIFontFamily);
	font-size: 1.5em;
	font-weight: 900;
	vertical-align: middle;
	content: 'LISTEN WITH ME';
	padding-left: .75em;
	color: var(--aUILabel-color);
	letter-spacing: .1em;
	border-radius: .2em;
	text-shadow: 0 .1em #000000;
	background: var(--aWrapLabel-color);
}

/* Horizontal Range Sliders */
#aWrap input[type="range"] {
	box-sizing: border-box;
	appearance: none;
	border: none;
	outline: none;
	box-shadow: none;
	width: 35em;
	padding-left: 1em;
	margin: 0;
	background: 0;
}
#aWrap input[type="range"] + label {
	text-decoration: none;
	cursor: pointer;
	color: var(--aUILabel-color);
	text-shadow: 0 .1em #000000;
	letter-spacing: 0;
	font-family: var(--aFontFamily);
	text-transform: none;
	font-weight: 300;
	padding-left: 1em;
	padding-right: 1em;
	position: relative;
	top: .75em;
}

/* 	SLIDER CONTROLS
	Slider buttons need to be large enough for TOUCH control
	Adding special directives for Chromium vs. Firefox
 */

/* Chromium and Safari Support */
#aWrap input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	vertical-align: middle;
}
#aWrap input[type="range"]::-webkit-slider-runnable-track {
	background: var(--aSliderBg-color);
	height: 1em;
}
#aWrap input[type="range"]::-webkit-slider-thumb {
	width: 1em;
	height: 1em;
	border-radius: 10%;
	border: none;
	background: var(--aSliderThumbPad-color);
	text-shadow: 0 .1em #000000;
}

/* Firefox Support */
#aWrap input[type="range"]::-moz-range-track {
	background: var(--aSliderBg-color);
	text-shadow: 0 .1em #000000;
	height: 1em;
}
#aWrap input[type="range"]::-moz-range-thumb {
	width: 2em;
	height: 2em;
	border-radius: 1em;
	border: 0;
	background: var(--aSliderThumbPad-color);
}

/* NOW PLAYING INFO SECTION
	Track Name, Artist, Cover Art and linking to Audius Profiles
	*/
#aNowPlaying {
	background: var(--aPlayNowBg-color);
	text-shadow: 0 .1em #000000;
}
#aNowPlayingText {
	overflow: hidden;
	padding: 1em 1em 1em 1em;
	margin-bottom: .25em;
	color: var(--aUILabel-color);
	font-size: 2em;
	height: 4em;
}
#aArtworkImg {
	margin: .25em;
	padding: .5em;
	position: relative;
	float: right;
	border-radius: .5em;
	background-color: var(--aArtworkFrame-color);
}
#aArtworkImg a {
	text-decoration: none;
}
#aArtworkImg:hover {
	background: linear-gradient(-45deg, rgb(82, 181, 214) 0%, rgb(97, 82, 214) 100%) 0% 0% / 150% 150%;
	animation: 1s ease 0s infinite normal none running Gradient;
}

/* SEEK BAR and BUTTON CONTROLS */
#aSeekBar {
	display: inline-flex;
	vertical-align: middle;
	width: 37em;
	padding-left: 1em;
	margin-bottom: .75em;
}
/* Pause/Play Button */
#aPlay {
	background: var(--aButton-color);
	border: var(--aButton-border) .1em solid;
	cursor: pointer;
}
#aPlay:active {
	background: var(--aButton-active);
	border: black .1em solid;
}
#aPlay:hover {
	background: linear-gradient(-45deg, rgb(82, 181, 214) 0%, rgb(97, 82, 214) 100%) 0% 0% / 150% 150%;
	animation: 1s ease 0s infinite normal none running Gradient;
}
#aPlayIco {
	font-size: 5em;
}
#aPlayIcoImg {
	height: 3em;
	width: 3em;
}
#aTimeContainer {
	display: inline-flex;
}
#aNow, #aTime, #aSep, #aVolCap {
	position: relative;
	font-size: 1em;
	top: .75em;
	color: var(--aUILabel-color);
	text-shadow: 0 .1em #000000;
	white-space: nowrap;
}

/* Volume Controls */
#aVolBar {
	display: inline-flex;
	vertical-align: middle;
	width: 37em;
	padding-left: 1em;
	margin-bottom: 1.5em;
}
#aVol {
	background: var(--aButton-color);
	border: var(--aButton-border) .1em solid;
	cursor: pointer;
}
#aVol:active {
	background: var(--aButton-active);
	border: black .1em solid;
}
#aVol:hover {
	background: linear-gradient(-45deg, rgb(82, 181, 214) 0%, rgb(97, 82, 214) 100%) 0% 0% / 150% 150%;
	animation: 1s ease 0s infinite normal none running Gradient;
}
#aVolIco {
	width: 3em;
	height: 3em;
	font-size: 5em;
}
#aVolIcoImg {
	width: 3em;
	height: 3em;
}
/* TODO: Add a Visualizer Someday */
#cVisualiser {
	display: inline-flex;
	position: relative;
	font-size: 1em;
	top: .75em;
	color: var(--aUILabel-color);
	text-shadow: 0 .1em #000000;
	white-space: nowrap;
	width: 5em;
}

/* PLAYLIST TRACKS and SELECTORS */
#aListWrap {
	max-height: 25em;
	margin-right: .5em;
	padding-right: 0;
	overflow-y: scroll;
	overflow-x: hidden;
}
/* Chromium and Safari Support */
#aListWrap::-webkit-scrollbar {
	margin: 0;
	width: 2em;
}
#aListWrap::-webkit-scrollbar-track {
	background-color: var(--aScroll-color);
	box-shadow: inset 0 0 .2em var(--aScroll-color);
}
#aListWrap::-webkit-scrollbar-thumb {
	background-color: var(--aScrollThumbPad-color);
}
#aList {
	padding: 0;
	margin: .25em;
	color: var(--aListLabel-color);
	border: 0;
	background: #88847b;
	overflow-x: hidden;
}
.aRow {
	cursor: pointer;
	padding: .5em;
	background: var(--aListBg-color);
}
.aRow.now {
	font-size: large;
	color: var(--aPlayNow-color);
	background: var(--aPlayNowBg-color);
}
#aMarquee {
	display: flex;
	float: right;
	padding-top: .5em;
	padding-right: .5em;
	color: var(--aMarquee-color);
	text-shadow: .1em .05em #000000;
}
#aStatusServers {
	padding-left: .25em;
	color: rgb(0, 0, 0);
}
#aStatusMetadata {
	padding-left: .25em;
	color: rgb(0, 0, 0);
}
#aStatusTracks {
	padding-left: .25em;
	color: rgb(0, 0, 0);
}

/* TODO: Update Loader Animation to show progress with API calls and loading of tracks */

/* Mask Whole Page Until API Data Gathering Completes Successfully */
#aLoaderOverlay {
	display: inline-block;
	position: static;
	width: 100%;
	height: 25em;
	border: 0;
	justify-content: center;
	align-items: center;
	background-color: var(--aLoaderBg-color);
}

#aLoaderSpinner {
	position: relative;
	top: 6em;
	left: 25em;
	margin: 1em;
	width: 2.5em;
	height: 2.5em;
	border: 1.5em solid;
	border-color: var(--aSpinner-color) transparent var(--aSpinner-color) transparent;
	border-radius: 50%;
	animation: animateSpinner 1.2s linear infinite;
	font-weight: 900;
	color: var(--aSpinnerText-color);
}
@keyframes animateSpinner {
	0% { transform: rotate(0deg); }
	25% { transform: rotate(90deg); }
	75% { transform: rotate(270deg); }
	100% { transform: rotate(360deg); }
}

@keyframes animateReady {
	to {
		top: 0;
		left: 0;
	}
	100% {
		top: 0;
		left: 0;
	}
}

/* SMALLER SCREEN MODIFICATIONS
	The Audio Player interface will adjust as the screen size diminishes.
	Adjustments break at 1200px, 1024px, 820px, and 480px.
	*/

/* 1200px ma-width could be a tablet with a landscape layout. */
@media screen and (max-width: 1200px) {
	#aLoaderOverlay {
		height: 35em;
	}
	#aLoaderSpinner {
		top: 11em;
	}
	#aMarquee:after {
		/*content: '[1200px max-width]';*/
	}
	#aNowPlayingText {
		overflow: hidden;
	}
	#aWrap {
		height: 60em;
	}
	#aWrap input[type="range"] {
		width: 28em;
	}
	#aListWrap {
		max-height: 35em;
	}
}

@media screen and (max-width: 1024px) {
	#aLoaderOverlay {
		height: 40em;
	}
	#aLoaderSpinner {
		top: 5em;
		left: 19em;
	}
	#aPlayerContainer {
		max-width: 45.5em;
		width: 45.5em;
	}
	#aWrap {
		max-width: 45.5em;
		width: 45.5em;
		height: 41em;
		padding: 0;
		margin: 0;
		border-radius: .5em;
		background: var(--aWrapBgSm-color);
	}
	#aWrap:after {
		display: none;
	}
	#aWrap input[type="range"] {
		box-sizing: border-box;
		appearance: none;
		border: none;
		outline: none;
		box-shadow: none;
		width: 40em;
		padding: 0;
		margin: 0;
		background: 0;
	}
	#aWrap input[type="range"]::-webkit-slider-thumb {
		width: 2em;
		height: 1em;
		border-radius: 10%;
		border: 0;
		background: var(--aSliderThumbPad-color);
	}
	#aWrap input[type="range"]::-moz-range-thumb {
		width: 2em;
		height: 2em;
		border-radius: 10%;
		border: 0;
		background: var(--aSliderThumbPad-color);
		margin-left: 1.5em;
	}
	#aWrap input[type="range"]::-webkit-slider-runnable-track {
		background: var(--aSliderBg-color);
		margin-left: 1em;
	}
	#aWrap input[type="range"]::-moz-range-track {
		background: var(--aSliderBg-color);
		margin-left: 1.5em;
	}
	#aWrap input[type="range"] + label {
		color: var(--aUILabel-color);
		font-size: 1em;
	}
	#aNowPlaying {
		padding-top: 0;
		border-radius: .3em;
	}
	#aNowPlayingText {
		overflow: hidden;
		font-size: 2em;
		padding-left: .5em;
		padding-top: .5em;
		height: 4em;
	}
	#aArtworkImg {
		margin: .25em;
		padding: .25em;
		width: 150px;
		height: 150px;
		border-radius: .5em;
	}
	#aSeekBar {
		padding-top: .25em;
		margin: 0;
		width: 44em;
		font-size: 1em;
	}
	#aNow, #aTime, #aSep, #aVolCap {
		display: none;
	}
	#aVolBar {
		padding-top: .25em;
		width: 44em;
		margin-bottom: .5em;
		font-size: 1em;
	}
	#aPlayIco, #aVolIco {
		font-size: 3em;
	}
	#cVisualiser {
		display: none;
	}
	#aListWrap {
		max-height: 19em;
		height: 19em;
		margin: 0;
		padding: 0;
		overflow-y: scroll;
		overflow-x: hidden;
	}
	#aList {
		font-size: medium;
		letter-spacing: .12em;
		padding: 0;
		margin: 0;
		color: var(--aListLabel-color);
	}
	/* Chromium and Safari Support */
	#aListWrap::-webkit-scrollbar {
		margin: 0;
		width: 2em;
	}
	#aListWrap::-webkit-scrollbar-track {
		box-shadow: inset 0 0 .2em var(--aScroll-color);
	}
	#aListWrap::-webkit-scrollbar-thumb {
		background-color: var(--aScrollThumbPad-color);
		outline: .1em solid var(--aScrollThumbOutline-color);
	}
	#aMarquee {
		padding-right: 1em;
	}
	#aMarquee:after {
		/*content: ' [1024px max-width]';*/
	}
	
}

@media screen and (max-width: 820px) {
	#aPlayerContainer {
		max-width: 30em;
		width: 30em;
	}
	#aLoaderSpinner {
		top: 5em;
		left: 10em;
	}
	#aWrap {
		max-width: 30em;
		width: 30em;
		height: 41em;
		padding: 0;
		margin: 0;
		border-radius: .5em;
		background: var(--aWrapBgSm-color);
	}
	#aWrap input[type="range"] {
		width: 22em;
	}
	#aWrap input[type="range"] + label {
		font-size: .75em;
	}
	#aNowPlayingText {
		overflow: hidden;
		font-size: 2em;
		padding-left: .5em;
		padding-top: .5em;
		height: 4em;
	}
	#aSeekBar {
		margin: 0;
		width: 19em;
		font-size: 1.5em;
	}
	#aVolBar {
		margin: 0;
		padding-bottom: .5em;
		width: 19em;
		font-size: 1.5em;
	}
	#aMarquee {
		padding-right: 1em;
	}
	#aMarquee:after {
		/*content: ' [820px max-width]';*/
	}
}

@media screen and (max-width: 480px) {
	#aLoaderSpinner {
		left: 6em;
	}
	#aPlayerContainer {
		max-width: 22em;
		width: 22em;
	}
	#aWrap {
		max-width: 25em;
		width: 22em;
		height: 40em;
		margin: 0;
		padding: 0;
	}
	#aWrap input[type="range"] {
		width: 20em;
	}
	#aWrap input[type="range"] + label {
		font-size: 1em;
	}
	#aArtworkImg {
		position: relative;
		float: right;
	}
	#aNowPlayingText {
		font-size: 1.25em;
		font-weight: 900;
		text-shadow: 0 0.05em #000000;
		padding-left: .5em;
		padding-top: .5em;
		height: 6em;
	}
	#aSeekBar {
		padding-top: .25em;
		padding-left: .25em;
		margin: 0;
		width: 22em;
		font-size: 1em;
	}
	#aPlay, #aVol {
		padding-right: .25em;
	}
	#aVolBar {
		padding-top: .25em;
		padding-left: .25em;
		padding-bottom: .25em;
		margin: 0;
		width: 22em;
		font-size: 1em;
	}
	#aListWrap {
		max-height: 18em;
		height: 18em;
		margin: 0;
		padding: 0;
		overflow-y: scroll;
		overflow-x: hidden;
	}
	#aList {
		font-size: medium;
		line-height: .9;
	}
	#aRow.now {
		font-size: unset;
	}
	#aMarquee {
		padding-top: .5em;
		padding-right: .5em;
	}
	#aMarquee:after {
		/*content: ' [480px max-width]';*/
	}
}