body {
	background-color: black;
	background-image: url("https://i.imgur.com/ksRPfI7.png");
	backdrop-filter: brightness(100%);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	font-family: sans-serif;
	color: white;
	margin: 0px 0px 0px 0px;
	height: 100%;
	-webkit-user-select: none; /* Safari */
  	-ms-user-select: none; /* IE 10 and IE 11 */
  	user-select: none; /* Standard syntax */
}

html {
	height: 100%;
}

@keyframes albumanimation {
	0% {
		transform: perspective(700px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}
	50% {
		transform: perspective(700px) rotateX(0deg) rotateY(-180deg) rotateZ(0deg);
	}
	100% {
		transform: perspective(700px) rotateX(0deg) rotateY(-360deg) rotateZ(0deg);
	}
}

@keyframes album_fadeout {
	from {
		transform: scaleY(1);
	}
	to {
		transform: scaleY(0);
	}
}

@keyframes album_fadein {
	from {
		transform: scaleY(0);
	}
	to {
		transform: scaleY(1);
	}
}

@keyframes bg_fadeout {
	from {
		backdrop-filter: brightness(100%);
	}
	to {
		backdrop-filter: brightness(50%);
	}
}

@keyframes bg_fadeout_more {
	from {
		backdrop-filter: brightness(50%);
	}
	to {
		backdrop-filter: brightness(10%);
	}
}

@keyframes bg_fadein {
	from {
		backdrop-filter: brightness(50%);
	}
	to {
		backdrop-filter: brightness(100%);
	}
}

@keyframes bg_fadein_some {
	from {
		backdrop-filter: brightness(10%);
	}
	to {
		backdrop-filter: brightness(50%);
	}
}

@keyframes bg_crossfade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes start_fade {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

#player {
	display: none;
}

#thecontainer {
	display: flex;
	flex-direction: column;
	height: 100%;
}

#containerbg {
	display: block;
	height: 100%;
	width: 100%;
	position: absolute;
	background-image: url("https://i.imgur.com/ksRPfI7.png");
	background-position: center top;
	z-index: -1;
	opacity: 0;
	background-repeat: no-repeat;
	background-size: cover;
}

#startcontainer {
	display: flex;
	height: 100%;
	width: 100%;
	position: absolute;
	background-color: #000000;
	z-index: 20;
	opacity: 1;
	background-repeat: no-repeat;
	background-size: cover;
}

#startstatus {
	text-align: center;
	flex: auto;
	align-content: center;
}

#header {
	flex: 0 1 auto;
}

#album {
	display: flex;
	flex: 1 1 auto;
	justify-content: center;
    align-content: center;
    align-items: center;
}

#album_art {
	transform: scaleY(0);
	width: 40vmin;
  	/*animation-duration: 4s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;*/
}

#control_panel {
	background-color: rgba(0,0,0,0.5);
	font-size: 1.25em;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 2px;
	padding-right: 2px;
}

#controls {
	/*flex: 0 1 auto;*/
	display: flex;
	align-items: center;
	font-size: 1.25em;
	justify-content: center;
  	/*align-items: center;*/
	/*position:fixed;
	bottom:0;*/
}

#controls_volume {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: auto;
}

#controls_playback {
	display: flex;
	align-items: center;
	justify-content: center;
}

#ticker_bar {
	display: flex;
	align-items: center;
	justify-content: center;
}

.control_button {
	margin-top: 1px;
	margin-bottom: 0px;
	margin-left: 2px;
	margin-right: 2px;
	height: 32px;
	cursor: pointer;
	background-color: rgba(0,0,0,0);
	border: none;
	color: #555555;
}

.control_button img {
	zoom: 2;
	image-rendering: pixelated;
}

.control_button:hover {
	margin-top: 0px;
	margin-bottom: 1px;
	background-color: rgba(100,100,100,0);
}

.control_button:active {
	margin-top: 1px;
	margin-bottom: 0px;
	background-color: rgba(100,100,100,0);
}

#control_mute_img {
	width: 16px;
	height: 16px;
	background: url(./svg/spritesheet.png) -64px -16px;
}

#control_mute_img:hover {
	background-position-y: -48px;
}

#control_voldown_img {
	width: 16px;
	height: 16px;
	background: url(./svg/spritesheet.png) -80px -16px;
}

#control_voldown_img:hover {
	background: url(./svg/spritesheet.png) -80px -48px;
}

#control_volup_img {
	width: 16px;
	height: 16px;
	background: url(./svg/spritesheet.png) -96px -16px;
}

#control_volup_img:hover {
	width: 16px;
	height: 16px;
	background: url(./svg/spritesheet.png) -96px -48px;
}

#control_rewind_img {
	width: 16px;
	height: 16px;
	background: url(./svg/spritesheet.png) -32px 0px;
}

#control_rewind_img:hover {
	background: url(./svg/spritesheet.png) -32px -32px;
}

#control_pause_img {
	width: 16px;
	height: 16px;
	background: url(./svg/spritesheet.png) 0px 0px;
}

#control_pause_img:hover {
	background-position-y: -32px;
}

#control_skip_img {
	width: 16px;
	height: 16px;
	background: url(./svg/spritesheet.png) -48px 0px;
}

#control_skip_img:hover {
	width: 16px;
	height: 16px;
	background: url(./svg/spritesheet.png) -48px -32px;
}

#control_loop_img {
	width: 16px;
	height: 16px;
	background: url(./svg/spritesheet.png) -64px 0px;
}

#control_loop_img:hover {
	background-position-y: -32px;
}

.setting_disabled_img {
	width: 16px;
	height: 16px;
	background: url(./svg/spritesheet.png) 0px -64px;
	zoom: 2;
	image-rendering: pixelated;
	cursor: pointer;
}

.setting_disabled_img:hover {
	width: 16px;
	height: 16px;
	background-position-x: -16px;
	zoom: 2;
	image-rendering: pixelated;
	cursor: pointer;
}

.setting_enabled_img {
	width: 16px;
	height: 16px;
	background: url(./svg/spritesheet.png) -32px -64px;
	zoom: 2;
	image-rendering: pixelated;
	cursor: pointer;
}

.setting_test_img {
	width: 16px;
	height: 16px;
	background: url(./svg/spritesheet.png) -64px -64px;
	zoom: 2;
}

.setting_enabled_img:hover {
	width: 16px;
	height: 16px;
	background-position-x: -48px;
	zoom: 2;
	image-rendering: pixelated;
	cursor: pointer;
}

.settings_button {
	padding: 2px 2px 2px 2px;
	background-color: rgba(75,75,75,0.5);
	border: none;
	color: #dddddd;
	cursor: pointer;
}

.settings_button:hover {
	background-color: rgba(150,150,150,0.5);
	color: #ffffff;
}

#status, .control_button {
	flex-grow: 0;
	white-space: nowrap;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}

#status {
	margin-right: .5em;
}

#ticker {
	width: 100%;
	flex-grow: 1;
	overflow-x: scroll;
	white-space: nowrap;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}


#ticker::-webkit-scrollbar {
	display: none; /* Chrome and Safari */
	
}
#status::-webkit-scrollbar {
	display: none; /* Chrome and Safari */
}

#menu {
	text-align: center;
	display: flex;
	overflow-y: scroll;
	flex: 1 1 auto;
	justify-content: center;
    align-content: center;
    align-items: center;
}

.radiolist_albums {
	width: 8em;
}

.radiolist_album_div {
	display: inline-block;
	margin: 0.1em;
	transform: scaleY(0);
	cursor: pointer;
	
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.05); 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.25); 
}

hr {
	border-color: rgba(255,255,255,0.1);
	margin-left: 110px;
	margin-right: 100px;
}

a {
	color: white;
	text-decoration: none;
}

a:hover {
	color: red;
	text-decoration: underline;
}

#settings_menu {
	display: none;
}

.form_input {
	background-color: #222222;
	outline: none;
	border-color: #444444;
	color: #dddddd;
}
.form_input:focus {
	border-color: #aaaaaa;
}

.extra_control {
	display: none;
}

.settings_section {
	background-color: #44444444;
	max-width: 500px;
	margin: auto;
	margin-top: 2px;
	padding-bottom: 1px;
}

.settings_section > summary {
	border: 2px #8a8a8a solid;
	background-color: #6c6c6c7d;
	cursor: pointer;
	font-size: 1.5em;
	text-align: left;
	padding-left: 4px;
}

form {
	margin-top: 16px;
	margin-bottom: 16px;
}

table {
	margin-left: 20%;
	margin-right: auto;	
	margin-top: 16px;
}

td {
	text-align: left;
	padding-right: 20px;
	padding-bottom: 16px;
}