:root {
			font-size: 17px;
			margin: 0;
			padding: 0;
			--accent: hsl(341, 83%, 63%);
			--hilite: hsla(340.9, 83.1%, 62.9%, 0.1);
		}

		html {
			font-family: Helvetica, Arial, sans-serif;
			margin: 0px;
			padding: 0px;
			scroll-behavior: smooth;
		}

		body {
			background: #fafafa;
			margin: 0 auto;
			max-width: 960px;
			color: #222;
		}

		.slash {
			font-size: 1.5rem;
			color: grey;
			padding: 0rem .25rem;
		}

		#main {
			margin: .5rem;
			padding: 1rem 2rem;
			margin-bottom: 5rem;
		}

		a {
			/* color: royalblue; */
			color: var(--accent);
		}

		/* HEADER */
		header {
			display: flex;
			align-items: baseline;
			justify-content: space-between;
		}

		h1 {
			font-weight: 400;
			font-size: 2rem;
		}

		h1 a {
			color: var(--accent);
			text-decoration: none;
		}

		.hitem {
			/* text-transform: uppercase; */
			font-size: .9rem;
			font-weight: 500;
			letter-spacing: .05rem;
			padding-left: .5rem;
		}

		.hitem:first-child {
			padding: 0rem;
		}

		/* NEWSFLASH */
		#newsflash {
			margin: .5rem;
			margin-bottom: 1rem;
			padding: .75rem 1rem .5rem 1rem;
			background: var(--hilite);
			border-radius: .5rem;
		}

		.newStar {
			color: var(--accent);
			font-size: .9rem;
			;
		}

		#newsflash p {
			padding: 0rem;
			margin: 0rem;
			line-height: 1.5rem;
		}

		/* SEARCH */

		#search {
			position: relative;
			text-align: center;
			margin: .5rem;
			margin-bottom: .5rem;
			display: flex;
			/* gap: .5rem; */
		}

		#input {
			width: 100%;
			font-size: 1rem;
			padding: .5rem .75rem;
			border: 1px solid #ccc;
			border-right: none;
			border-radius: .5rem;
			border-top-right-radius: 0rem;
			border-bottom-right-radius: 0rem;
			/* margin-bottom: .5rem; */
			outline: none;
			background: transparent;
			/* margin-right: .5rem; */
		}

		#input::placeholder {
			opacity: .9;
		}

		#input:focus {
			background: revert;
		}

		/* ALBUMS */

		h4 {
			font-size: 1.2rem;
			margin: .5rem;
			margin-top: 1.5rem;
			display: flex;
		}

		h4 a {
			text-decoration: none;
			color: #222;
		}

		h4 a:hover {
			color: var(--accent);
		}

		.desc {
			font-size: small;
			color: rgba(0, 0, 0, .5);
			padding-left: .5rem;
			margin-top: 0rem;
			/* display: none; */
		}

		.albumHeader {
			display: flex;
			align-items: center;
			padding-top: .5rem;
		}

		.albumCover {
			width: 3rem;
			height: 3rem;
			padding: .5rem;
			border-radius: 50%;
			float: left;
			margin-top: 1.2rem;
			position: sticky;
			top: 1rem;
		}

		ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
		}

		li {
			border-bottom: thin rgba(0, 0, 0, .05) solid;
			padding: .5rem 0rem;
		}

		.albumlistx li,
		radiolistx li {
			margin: 0rem 4.5rem;
		}

		.radiolistx li {
			margin: 0rem 4.5rem;
		}

		.radiolistx .lyrics {
			/* padding: 0rem;
			background: transparent; */
		}

		#search button {
			padding: .25rem .5rem;
			border: none;
			border-radius: .5rem;
			cursor: pointer;
			background: #ccc;
			opacity: .66;
			/* border: 1px solid #ccc; */
		}

		#search button img {
			width: 1.75rem;
			height: auto;
			margin-bottom: -4px;
			opacity: .4;
		}

		#search button:hover {
			/* background-color: var(--hilite); */
			opacity: 1;
		}

		#search button#searchType {
			border-top-left-radius: 0rem;
			border-bottom-left-radius: 0rem;
			margin-right: 1rem;
			color:#666
		}
	
		#search button#searchType img {
			width: 1.5rem;
			padding: 0rem .25rem;
		}

		#search .active {
			background-color: var(--accent);
			opacity: .9;
			/* font-weight: 600; */
			/* color: #222; */
			/* border: thin solid var(--accent); */
		}

		#search .active img {
			opacity: 1;
			filter: invert(100%);
		}

		@media (hover: hover) {
			li:hover {
				text-decoration: none;
				cursor: pointer;
				color: var(--accent);
			}
		}

		li.playing {
			color: var(--accent);
			font-weight: 600;
		}

		.paused {
			color: grey !important;
		}

		li.playing span {
			font-weight: 400;
		}

		li.hit {
			color: var(--accent);
			font-weight: 600;
			animation: fade 5s ease;
		}
		@keyframes fade {
			0% {
				background: var(--hilite);
			}

			100% {
				background: none;
			}
		}

		li.hit::before {
			content: "⏵";
			margin-right: 6px;
		}

		li.playing::before {
			content: "♪";
			margin-right: 6px;
		}

		li.playing .lyrics {
			display: block;
		}

		li span {
			color: rgba(0, 0, 0, .5);
			margin-left: auto;
			font-size: .9rem;
		}

		li .sicon {
			display: inline-block;
			max-width: 1rem;
		}

		.lyrics {
			display: none;
			font-weight: normal;
			color: black;
			font-size: .9rem;
			padding: 1rem;
			padding-bottom: 0rem;
			margin: .5rem 0rem;
			border-radius: .5rem;
			background: rgba(0, 0, 0, .05);
			line-height: 1.25rem;
			max-height: 50vh;
			overflow-y: auto;
			white-space: pre-line;
			cursor: text;
		}

		.lyricsHidden {
			position: absolute;
			left: 9999rem;
		}

		li:target {
			font-weight: 600;
			color: var(--accent);
		}

		.lyrics code {
			font-size: small;
			color: grey;
		}

		.lyrics span {
			font-size: small;
		}

		.backstory {
			display: flex;
			color: #666;
			font-size: .9rem;
			padding: 1rem;
			padding-bottom: .5rem;
			border-radius: .5rem;
			background: rgba(0, 0, 0, .05);
			/* flex-direction: row; */
		}

		.cred {
			display: inline-block;
			padding-bottom: .5rem;
			color: #666;
		}

		.action {
			display: flex;
			align-self: center;
			font-size: small;
			margin: 0rem;
			padding: 0rem;
			padding-top: .75rem;
			white-space: normal;
		}

		.action img {
			width: 1.25rem;
			padding: 0rem .6rem;
			opacity: .6;
		}

		.aname img {
			width: 1.25rem;
			padding-left: .5rem;
			opacity: .3;
			margin-bottom: -0.3rem;
		}

		.action img:hover,
		.aname img:hover {
			opacity: .9;
		}

		.bs {
			margin: 0rem;
			padding: 0rem;
			white-space: normal;
			padding-left: 1rem;
		}

		.bstext {
			white-space: pre-line;
			margin-bottom: .5rem;
		}

		.songSleeve {
			width: 120px;
			display: flex;
			flex-direction: column;
		}

		.songSleeve img {
			max-width: 120px;
		}

		.coverSpin {
			-webkit-animation: spin 3s infinite linear;
			-moz-animation: spin 3s infinite linear;
			-ms-animation: spin 3s infinite linear;
			animation: spin 3s infinite linear;
		}

		@-webkit-keyframes spin {
			0% {
				transform: rotate(0deg);
				-webkit-transform: rotate(0deg);
				-moz-transform: rotate(0deg);
				-ms-transform: rotate(0deg);

			}

			100% {
				transform: rotate(360deg);
				-webkit-transform: rotate(360deg);
				-moz-transform: rotate(360deg);
				-ms-transform: rotate(360deg);

			}
		}

		@-moz-keyframes spin {
			0% {
				transform: rotate(0deg);
				-webkit-transform: rotate(0deg);
				-moz-transform: rotate(0deg);
				-ms-transform: rotate(0deg);

			}

			100% {
				transform: rotate(360deg);
				-webkit-transform: rotate(360deg);
				-moz-transform: rotate(360deg);
				-ms-transform: rotate(360deg);

			}
		}

		@keyframes spin {
			0% {
				transform: rotate(0deg);
				-webkit-transform: rotate(0deg);
				-moz-transform: rotate(0deg);
				-ms-transform: rotate(0deg);

			}

			100% {
				transform: rotate(360deg);
				-webkit-transform: rotate(360deg);
				-moz-transform: rotate(360deg);
				-ms-transform: rotate(360deg);

			}
		}

		/* AUDIO FOOTER */
		#footer {
			position: fixed;
			left: 0;
			bottom: 1rem;
			padding-bottom: env(safe-area-inset-bottom);
			width: 100%;
			display: grid;
			place-content: center;
			z-index: 10;
			pointer-events: none;
		}

		#footerContent {
			opacity: .95;
			background: var(--accent);
			z-index: 10;
			display: flex;
			border-radius: 2rem;
			pointer-events: all;
			box-shadow: inset 0 0 0.5px 1px hsla(0, 0%,
					100%, 0.075), 0px 2px 8px rgba(0, 0, 0, 0.3);
		}

		#audio {
			max-height: 40px;
			opacity: .9;
			mix-blend-mode: lighten;
			padding: .5rem;
			flex: 1;
		}

		.feat {
			font-size: .9rem;
		}

		.sinfo {
			float: right;
			font-size: .9rem;
		}

		.sinfoMobile {
			display: none;
		}

		.searchresults {
			/* background: var(--hilite);  margin: 0rem 1rem;*/
		}

		/* BUTTON BAR */
		#actions {
			position: fixed;
			bottom: 50%;
			right: 0rem;
			transform: translateY(50%);
		}

		.actionButton {
			display: grid;
			place-content: center;

			/* padding: .5rem; */
			/* line-height: 2.5rem; */
			z-index: 10;
			cursor: pointer;
			width: 2.5rem;
			height: 2.5rem;
			box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3);
			border: none;
			border-radius: 50%;
			background: grey;
			color: #fafafa;
			font-size: 1.2rem;
			opacity: .66;
			margin: .5rem;
		}

		.actionButton img {
			width: 1.25rem;
			height: auto;
		}

		.bon {
			background: var(--accent) !important;
		}

		.boff {
			background: grey !important;
		}

		@media (hover: hover) {
			.actionButton:hover {
				opacity: .9;
			}
		}

		/* ABOUT MODAL*/
		#about {
			font-size: .9rem;
			background: rgba(0, 0, 0, .5);
			padding: 1rem;
			margin: 0rem;
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			overflow-y: auto;
			z-index: 20;
		}

		#newsContent,
		.modal {
			max-width: 860px;
			background: #eee;
			margin: 0 auto;
			padding: 1rem;
			border-radius: .5rem;
			margin-bottom: 2rem;
			box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.4);
			z-index: 20;
			max-height: 95%;
			overflow-y: auto;
			position: relative;
			top: 50%;
			transform: translateY(-50%);
		}

		#about #links {
			display: flex;
		}

		#about #links img {
			max-width: 26%;
			height: 26%;
			padding: .7rem;
			background: #fafafa;
			margin-right: 1rem;
		}
		
		#about #links {
			line-height: 1.2rem;
		}

		#latest,
		#keys {
			background: rgba(0, 0, 0, .05);
			padding: .5rem 1rem;
			margin-top: 1rem;
			border-radius: .5rem;
		}

		#latest>p {
			padding-left: .25rem;
		}

		.rss img {
			padding-left: .5rem;
			margin-bottom: -2px;
			opacity: .75;
		}

		#about h4 {
			font-weight: 400;
			padding-top: 0rem;
			margin-top: 1rem;
		}

		#links .tagline {
			max-width: 28rem;
		}

		.tagline {
			color: gray;
			padding-left: .75rem;
		}

		.newslink {
			cursor: pointer;
			text-decoration: underline;
		}

		#newsContent .actionButton {
			float: right;
			margin: 0;
			padding: 0;
			opacity: .9;
			box-shadow: none;
			transform: rotate(45deg);
			font-size: 1rem;
			width: 2rem;
			height: 2rem;
			display: grid;
			place-content: center;
		}

		@media (hover: hover) {
			#newsContent .actionButton:hover {
				opacity: .9;
			}
		}

		kbd {
			padding-left: .5rem;
			display: inline-block;
			width: 3rem;
			color: grey;
		}

		.makeModal {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0rem;
			height: 100vh;
			width: 100%;
			background: rgba(0, 0, 0, .85);
			display: grid;
			place-content: center;
			z-index: 99;
		}

		.karaoke {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0rem;
			height: 100vh;
			width: 100%;
			background: #fafafa;
			max-height: none;
			min-height: 100vh;
			columns: 300px auto;
			overflow-y: auto;
			z-index: 200;
		}

		.makeModal img {
			margin: 0 auto;
			max-height: 85vh;
			max-width: 90%;
			box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.4);
			display: grid;
			place-content: center;
			/* margin-top: -3rem; */
		}

		/* MISC. UTILITY */
		.albumCover,
		.songCover {
			cursor: pointer;
		}

		.albumHit {
			outline: 1px solid #aaa;
			animation: fade 5s ease;

		}

		.hidden {
			display: none !important;
		}

		.xLink::after {
			content: "";
			background: url(../gfx/xlink-icon.svg);
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center center;
			margin-left: 0.25rem;
			padding-right: 0.8rem;
		}

		.maintenance {
			display: grid;
			place-content: center;
			max-width: 960px;
			color: #fafafa;
			font-size: 1.5rem;
			line-height: 2rem;
			padding: 2rem;
		}

		.version {
			position: fixed;
			right: .5rem;
			bottom: .5rem;
			font-size: small;
			color: gray;
			opacity: .33;
		}

		@media (prefers-color-scheme: dark) {

			body {
				background: #121212;
				color: rgba(255, 255, 255, .9);
			}

			li {
				border-bottom: thin rgba(255, 255, 255, .05) solid;
			}

			.sinfo,
			.sinfoMobile,
			.sinfoMobile,
			.lyrics span,
			.desc {
				color: rgba(255, 255, 255, .5);
				cursor: text;
			}

			.lyrics,
			.backstory {
				background: rgba(255, 255, 255, .05);
			}

			.lyrics {
				color: rgba(255, 255, 255, .75);
			}

			.backstory {
				color: rgba(255, 255, 255, .66);
			}

			#input {
				border: 1px solid #444;
				color: #aaa;
				border-right: none;
			}

			#search button {
				/* background: transparent; */
				background: #555;
			}
			#searchType {
				color: #999;
			}

			#search .active {
				color: #fafafa;
			}

			#search button:hover {
				color: lightgrey;
			}

			#input:focus {
				background: black;
			}

			#newsContent {
				background: #222;
				color: #fafafa;
			}

			#latest,
			#keys {
				background: rgba(255, 255, 255, .05);
			}

			.action img,
			.aname img,
			#search img,
			.aname img,
			.rss img {
				filter: invert(100%);
			}
			h4 a {
				color: #fafafa;
			}
		}

		@media screen and (min-width:250px) and (max-width:480px) {

			h1 {
				margin: 1rem 0rem .5rem 0;
			}

			.hlinks {
				padding-bottom: 1rem;
			}

			#newsflash {
				padding: .75rem .5rem .5rem .5rem;
				font-size: .93rem;
			}

			#main {
				padding: .25rem;
			}

			.backstory,
			#links {
				flex-direction: column;
			}

			.backstory {
				padding: .75rem;
			}

			#about #links img {
				max-width: 150px;
				height: 150px;
			}

			#newsContent {
				margin-top: 0;
			}

			#latest {
				max-height: none;
				padding: .5rem;
			}

			#keys {
				display: none;
			}

			.bs {
				padding-left: 0rem;
			}

			.action {
				padding: .5rem 0rem;
			}

			/* .songCover {
				padding-bottom: 1rem;
			} */

			.sinfo {
				display: none;
			}

			.sinfoMobile {
				display: block;
				float: none;
				font-size: small;
				padding-top: .25rem;
			}

			.albumlistx li {
				margin: 0rem 1.5rem;
			}

			.radiolistx li {
				margin: 0rem 1.5rem;
			}

			.albumCover {
				position: relative;
				margin-top: 0;
			}

			.karaoke {
				columns: auto;
			}
		}

		/* .albumlistx .searchresults {margin: 0rem;} */

		@media screen and (min-width:481px) and (max-width:834px) {}