:root{
	--game-cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAApUlEQVRYCcXBQW4bQRAAMdb/H93phRAkMGSfPBoyDHJJGC+5IMxSWfmwMMujsvJBYZa/KisfEmb5X2XlA8IsX1VWDguzvFNZOSjM8p3KyiFhlp9UVg4Is3xVeSO/LMzyqMyMR2XlsDBLZYVZHpWVg8J4ycssj8rKQXlvlkdl5ZC8N8ujsnJIvjf+ySG5LJflslyWy3JZLstluSyX5bJclstyWS77AxEFQyHrsxOqAAAAAElFTkSuQmCC") 0 0, auto;
	--font-scale: 1.0;
	--font-size: 16px;
	--font-style: normal;
	--font-family: sans-serif;
	--font-weight: normal;
	--hud-highlight: #ffffff;
	--line-height: 1.0;
	--station-size: 128px;
	--text-transform: none;
}

#app{
	align-items: center;
	background-color: unset;
	display: flex;
	font-family: var(--font-family), sans-serif;
	font-weight: normal;
	height: 100vh;
	justify-content: center;
	margin-left: env(safe-area-inset-left);
	margin-right: env(safe-area-inset-right);
	overflow: hidden;
	position: relative;
	width: 100vw;
}
#app:fullscreen .corner{
	height: 0.7rem;
	width: 0.7rem;
}
#app:fullscreen .corner.bl{
	border-right: 0.125rem solid var(--hud-highlight);
	border-top: 0.125rem solid var(--hud-highlight);
}
#app:fullscreen .corner.br{
	border-left: 0.125rem solid var(--hud-highlight);
	border-top: 0.125rem solid var(--hud-highlight);
}
#app:fullscreen .corner.tl{
	border-bottom: 0.125rem solid var(--hud-highlight);
	border-right: 0.125rem solid var(--hud-highlight);
}
#app:fullscreen .corner.tr{
	border-bottom: 0.125rem solid var(--hud-highlight);
	border-left: 0.125rem solid var(--hud-highlight);
}
#app:not(:fullscreen) .corner{
	height: 0.5rem;
	width: 0.5rem;
}
#app:not(:fullscreen) .corner.bl{
	border-bottom: 0.125rem solid var(--hud-highlight);
	border-left: 0.125rem solid var(--hud-highlight);
}
#app:not(:fullscreen) .corner.br{
	border-bottom: 0.125rem solid var(--hud-highlight);
	border-right: 0.125rem solid var(--hud-highlight);
}
#app:not(:fullscreen) .corner.tl{
	border-left: 0.125rem solid var(--hud-highlight);
	border-top: 0.125rem solid var(--hud-highlight);
}
#app:not(:fullscreen) .corner.tr{
	border-right: 0.125rem solid var(--hud-highlight);
	border-top: 0.125rem solid var(--hud-highlight);
}

#backgroundImage{}

body{
	background-color: #000000;
	font-size: 16px;
	margin: 0;
	/*overflow: hidden;
	padding: 0;*/
}

.corner{
	position: absolute;
}
.corner.bl{
	bottom: 0;
	left: 0;
}
.corner.br{
	bottom: 0;
	right: 0;
}
.corner.tl{
	left: 0;
	top: 0;
}
.corner.tr{
	right: 0;
	top: 0;
}

#debugWindow{
	background-color: rgba(0,0,0,0.5);
	color: #ff8800;
	margin: 10px;
	padding: 10px;
	position: absolute;
	top: 0;
	z-index: 1;
}

.fullscreenIcon{
	color: #ffffff;
	cursor: var(--game-cursor);
	height: 2rem;
	mix-blend-mode: difference;
	position: absolute;
	right: 0.25rem;
	top: 0.25rem;
	width: 2rem;
	z-index: 1;
}

#globe-meridian{
	height: 2.7rem;
	opacity: 0.25;
	position: absolute;
	right: 15px;
	top: -10px;
	transform: rotate(10deg);
	width: 2.7rem;
}
#globe-meridian svg{
	height: 150%;
	width: 150%;
}
#globe-meridian svg line{
	stroke: #083b79;
	stroke-width: 6;
}
#globe-meridian svg circle,
#globe-meridian svg ellipse{
	fill: transparent;
	stroke: #083b79;
	stroke-width: 6;
}

html{
	font-size: 16px;
}

#interactionMenu{
	cursor: var(--game-cursor);
	display: none !important;
	flex-direction: column;
	height: 1.5rem;
	justify-content: space-between;
	left: 0.25rem;
	mix-blend-mode: difference;
	pointer-events: none;
	position: absolute;
	top: 0.25rem;
	visibility: hidden;
	width: 2rem;
	z-index: 1;
}
#interactionMenu.active{
	display: none;
}
#interactionMenu > div{
	background-color: #2d6eb8;
	border-radius: 15%;
	height: 25%;
	width: 100%;
}

.loading-active {
	background-color: #2b2b35 !important;
	color: #8c8c9e !important;
	cursor: wait !important;
	pointer-events: none;
}
#localAudioPlayer{
	bottom: -200px;
	position: absolute;
	right: -356px;
}
.logo{
	background-color: unset;
	border-radius: unset;
	height: 70%;
	width: 70%;
}

.menu{
	background-color: rgba(0,0,0,0.7);
	display: none;
	left: 0.25rem;
	padding: 0.25rem;
	position: absolute;
	top: 0.25rem;
	z-index: 2;
}
.menu.active{
	display: block;
}
.menu .preferences{
	background: linear-gradient(135deg,#083b79,#336bbe);
	color: #ffffff;
	font-size: 1.2rem;
	overflow: hidden;
	padding: 0.75rem 0.5rem;
	position: relative;
}
.menu .radioStationFavorites{
	background-color: #000000;
	color: #2b68af;
	padding: 0.5rem;
}
.menu .favorites{
	color: #ffffff;
	cursor: var(--game-cursor);
	display: none !important;
	max-height: calc(95vh - 4.7rem);
	overflow-y: scroll;
	scrollbar-width: none;
	visibility: hidden;
}
.menu .favorites .favorite{
	font-weight: normal;
	min-width: 17rem;
	padding: 0.2rem;
	position: relative;
}
.menu .favorites .favorite:hover{
	background: linear-gradient(to right,#f0f0f0,#abacac);
	color: #000000;
	
}
.menu .favorites .favorite.playingFavorite{
	display: none;
}
.menu .favorites .favorite .stationName{
	display: inline-block;
}
.menu .favorites .favorite .favoriteCheckbox{
	display: inline-block;
	position: absolute;
	right: 0;
}
.menu .favorites .favorite .favoriteCheckbox .checkbox{
	cursor: var(--game-cursor);
}
.menuItem{}

.radio {
	align-items: center;
	display: flex;
	height: 100vh;
	justify-content: space-evenly;
	width: 100vw;
}
.radioStation{
	align-items: center;
	background-color: #000000;
	border-radius: 50%;
	cursor: var(--game-cursor);
	display: flex;
	height: var(--station-size);
	justify-content: center;
	opacity: 0.3;
	overflow: hidden;
	position: absolute;
	transition: background-color 0.2s ease, filter 0.2s ease;
	width: var(--station-size);
}
.radioStation .logo {
	transition: filter 0.2s ease;
}
.radioStation.playing{
	background-color: #ffffff !important;
	opacity: 1.0;
	outline: calc(var(--station-size) / 15) solid var(--hud-highlight);
}
.radioStation.playing .logo {}
#radioWheel{
	border-radius: 50%;
	outline: none;
	padding: unset;
	position: absolute;
	visibility: hidden;
}

.spinner-ring {
	animation: spin-loop 0.8s linear infinite;
	border: 2px solid rgba(255,255,255,0.2);
	border-radius: 50%;
	border-top-color: #fff;
	display: inline-block;
	height: 14px;
	margin-right: 10px;
	vertical-align: middle;
	width: 14px;
}
.station {
	border-radius: 10%;
}
.station#GTRIII {
	outline: 2px solid  #6f8c96;
}
.station#GTRIII:hover {
	outline: 4px solid  #6f8c96;
}
.station#GTRViceCity {
	outline: 2px solid #f793dc;
}
.station#GTRViceCity:hover {
	outline: 4px solid #f793dc;
}
.station#GTRV {
	outline: 2px solid #2d6eb9;
}
.station#GTRV:hover {
	outline: 4px solid #2d6eb9;
}
.station img {
	height: 200px;
	width: 200px;
}
.stationData{
	color: var(--hud-highlight);
	cursor: default;
	display: flex;
	font-size: var(--font-size) !important;
	justify-content: center;
	margin: 0.1rem 0;
	text-align: center;
}
#stationData{
	font-style: var(--font-style);
	pointer-events: none;
	transform: scale(var(--font-scale), var(--font-scale));
	visibility: hidden;
	z-index: 1;
}
#stationData #name{
	font-weight: var(--font-weight);
	line-height: var(--line-height);
	text-align: center;
	text-shadow:
		2px 0px 0px #000000,
		2px 2px 0px #000000,
		0px 2px 0px #000000,
		-2px 2px 0px #000000,
		-2px 0px 0px #000000,
		-2px -2px 0px #000000,
		0px -2px 0px #000000,
		2px -2px 0px #000000;
	text-transform: var(--text-transform);
}
#stationData #artist{
	display: none;
}
#stationData #title{
	display: none;
}
#stationData #share{
	align-items: center;
	display: none;
	min-height: 1rem;
	pointer-events: auto;
}

#video-background-container {
	background-color: #0a0514;
	background-image: url("fallback_wallpaper.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100vh;
	left: 0;
	overflow: hidden;
	position: fixed;
	top: 0;
	width: 100vw;
	z-index: -1;
}
#video-background-container iframe {
	height: 56.25vw;
	left: 50%;
	min-height: 100vh;
	min-width: 177.77vh;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100vw;
}
#video-overlay-vignette {
	backdrop-filter: blur(5px);-webkit-backdrop-filter: blur(5px);
	background: linear-gradient(to right, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0));
	height: 100%;
	left: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 100%;
}

@keyframes spin-loop {
    to { transform: rotate(360deg); }
}

@media (orientation: landscape) {
	.radio {
		flex-direction: row;
	}
}
@media (orientation: portrait) {
	.radio {
		flex-direction: column;
	}
	.station {
		margin: 20px 0;
	}
}