body, html {
	margin: 0;
	padding: 0;
	height: 100vh;
}
#visuals {
	position: absolute;
	top: 0; left: 0;
	width: 100vw;
	height: 100vh;
}
#alertlayer {
	position: absolute;
	top: 0; left: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background-color: #CF7500;
	opacity: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	pointer-events: none;
}
#alertlayer > h2 {
	position: absolute;
	text-align: center;
	left: 0; right: 0;
	bottom: 10em;
	font-size: xxx-large;
}
.alertfader {
	animation-duration: 8s;
	animation-delay: 1s;
	animation-name: alertanimation;
}
.zoomanimation {
	opacity: 0;
	animation-delay: 1s;
	animation-duration: 8s;
	animation-name: zoomanimation;
}
#fullscreen > span:hover {
	padding-left: 0.1em;
	padding-right: 0.1em;
	background-color: gray;
	border-radius: 10% / 50%;;
}
#player {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: end;
	color: white;
	zoom: 2;
}
#playercontrols {
	display: flex;
	flex-direction: row;
}
.controlbtn {
		font-size: x-large;
}
#mutedcheckbox {
/* 	font-size: xxx-large; */
}
#audioplayer {
	margin: 2rem 4rem;
}
#volumelabel {
	width: 3rem;
	text-align: center;
}
#coverart {
	aspect-ratio: 1 / 1;
	min-height: 100px;
	flex-grow: 2;
	background-color: transparent;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	opacity: 0.8;ste
}
#trackinfo {
	position: absolute;
	top: 0; left: 0;
	bottom: 0; right: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
#debugoutput {
	position: absolute;
	bottom: 0; left: 0;
	color: white;
	margin-left: 3em;
	visibility: hidden;
}
#stationtag {
	position: absolute;
	bottom: 0; right: 0;
	color: white;
	margin-right: 3em;
}
#fullscreen {
	position: absolute;
	top: 0; right: 0;
	color: white;
	margin-right: 2em;
}
#metadata {
	font-size: x-large;
	background-color: rgba(0, 0, 0, 0.5);
	padding: 0.5em 1em;
}
.noselect {
	cursor: default;
	user-select: none;
}
.fadeable {
	transition: opacity 0.3s ease-in;
}
.faded {
	opacity: 0.0 !important;
	transition: opacity 2s ease-in !important;
}
.playerspacer {
	width: 3rem;
}
@keyframes alertanimation {
	0% {  opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; }
	100% { opacity: 0; }
}
@keyframes zoomanimation {
	0% {  animation-timing-function: ease-out; opacity: 0; transform: scale(0.3) rotate(-1080deg); }
	10% { opacity: 1; }
	20% { transform: scale(1.1); }
	25% { transform: scale(1.0) rotate(0deg); }
	75% { animation-timing-function: ease-in; transform: scale(1.0) rotate(0deg); }
	90% { opacity: 1; }
	100% { opacity: 0; transform: scale(0.3) rotate(1080deg); }
}