:root {
  box-sizing: border-box;
	--background-color: #282828;
	--background-color-menu: #e8e8e8e8;
	--background-color-menu-hover: #e8e8e8;
	--color: #e8e8e8;
	--color-menu: #080808;
	--font-size: 10pt;
}

HTML, BODY {
	font-family: Verdana;
	font-size: var(--font-size);
}

BODY {
	background-color: var(--background-color);
	color: var(--color);
	padding: calc(var(--font-size) * 6) 0.6em 0.4em;
}

#BackgroundImage {
	background-image: url("../images/background.png");
	background-repeat: no-repeat;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
}

#Menu {
	position: absolute;
	top: 1em;
	right: 1em;
	background-color: var(--background-color-menu);
	color: var(--color-menu);
	font-size: calc(1dvw * 1.6);
}



#Program-Audio {
	position: absolute;
	top: 5em;
	left: 0.5em;
	background-color: var(--background-color-menu);
	color: var(--color-menu);
	font-size: calc(1dvw * 1.6);
	width: max-content;
}

#Program-Video {
	position: absolute;
	top: 1em;
	background-color: var(--background-color-menu);
	color: var(--color-menu);
	font-size: calc(1dvw * 1.6);
}



#PlayerController {
	position: absolute;
	top: 5em;
	left: 1em;
	font-size: calc(1dvw * 1.6);
	width: max-content;
}

#SongTitle {
	white-space: nowrap;
}

DIV.MenuItem {
	color: var(--color-menu);
	padding: 0.6em 0.4em;
	display: inline-block;
	cursor: pointer;
}

DIV.MenuItem:hover {
	background-color: var(--background-color-menu-hover);
}

.Content {
	opacity: 0;
	position: absolute;
	transition: opacity 0.4s linear;
}

#PlayPause {
	width: 2em;
	height: 2em;
	cursor: pointer;
	float: left;
	vertical-align: top;
	margin: 0 0.6em 0.6em 0;
}

#Info {
	font-size: 0.6em;
	white-space: nowrap;
}


 /* unvisited link */
a:link {
  color: #e8e8e8;
}

/* visited link */
a:visited {
  color: #e8e8e8;
}

/* mouse over link */
a:hover {
  color: #e8e8e8;
}

/* selected link */
a:active {
  color: #e8e8e8;
}

@media  (orientation: landscape) {
	IFRAME {
		height: calc(90dvh - 80px - 2em);
		max-width: 95dvw;
		max-height: calc(90dvh - 80px - 2em);
		aspect-ratio: 16 / 9;
		margin: 2em auto;
	}
}

@media  (orientation: portrait) {
	IFRAME {
		width: 95dvh;
		max-width: 95dvw;
		max-height: calc(90dvh - 80px - 2em);
		aspect-ratio: 16 / 9;
		margin: 2em auto;
	}
}