body {
	margin: 0;
	padding: 0;
	background-color: black;
	font-size: 3vh;
	color: white;
}

body.dark #echo,
body.dark #queue,
body.dark #settings,
body.dark #controls {
	filter: brightness(0.75);
}

body.dark #ytb {
	filter: brightness(0.5) contrast(1.15);
}

#ytb {
	position: fixed;
	top: 0;
	left: 0;
}

#ytb iframe {
	width: 100vw;
	height: 100vh;
}

#connect {
	position: fixed;
	top: 150vh;
	left: 50vw;
	width: 50vw;
	max-height: 85vh;
	overflow: auto;
	transition: top 250ms ease-in-out;
	border: .25em #222 solid;
	border-radius: 2vw;
	background-color: #080808;
	color: white;
	padding: 1em 1ch;
	transform: translate(-50%, -50%);
}

#connect div {
	display: flex;
	justify-content: center;
}

#connect button {
	color: white;
	background: #200;
	border: none;
	padding: .25em 2ch;
	margin: 1em 2ch;
	cursor: pointer;
	border-radius: 1em;
	font-size: inherit;
	background-color: #0a0;
	border: .1em solid transparent;
}

#connect button:first-child {
	background-color: #a00;
}

#connect button:hover {
	border-color: white;
}

#connect.show {
	top: 50vh;
}

#queue {
	position: fixed;
	top: 15vh;
	right: 100vw;
	transition: transform 500ms cubic-bezier(0.5, 0.5, 0, 1);
	transform: translateX(3.5ch);
	color: #888;
	padding: 1em 3.3ch 1em 0;
	width: max-content;
}

#queue:hover,
#queue:focus-within,
#queue.show {
	transform: translateX(100%);
}

#manual.disabled {
	display: none
}

#queue>div {
	display: flex;
	flex-direction: column;
	background-color: #000;
	border-right: 0.3ch solid magenta;
	padding: .25em 1ch;
	align-items: center;
}

#queue input {
	background: #222;
	color: #fff;
}

#queue input:placeholder-shown {
	color: #AAA;
}

#list {
	display: flex;
	flex-direction: column;
}

#list p {
	margin: 0;
}

#list button {
	background-color: #222;
	color: #FFF;
	padding: .25em 1ch;
	margin: .5em 0;
	width: fit-content;
	border-radius: 2em;
}

#controls {
	position: fixed;
	bottom: 30vh;
	left: 100vw;
	transition: transform 500ms cubic-bezier(0.5, 0.5, 0, 1);
	transform: translateX(-3.6ch);
	font-size: 5vh;
	color: #888;
	padding-left: 3.5ch;
}

#controls:hover,
#controls.show {
	transform: translateX(-100%);
}

#controls button {
	padding-left: 0.5ch;
	background: #000;
	color: #888;
	border: none;
	border-left: .2ch solid #D0D;
	font-size: inherit;
	cursor: pointer;
	width: 3ch;
}

#controls img {
	height: 1em;
	padding: .1em .1ch;
}









#settings {
	position: fixed;
	top: 150vh;
	left: 50vw;
	max-height: 80vh;
	transition: top 250ms ease-in-out;
	transition-property: top, opacity;
	opacity: 0;
	transform: translate(-50%, -50%);
	border: .25em grey solid;
	border-radius: 1em;
	padding: 1em 2ch;
	display: flex;
	flex-direction: column;
	width: 70vw;
	background-color: #111;
	font-size: 1.5em;
}

#settings.show {
	top: 50vh;
	opacity: 1;
}

#settings * {
	font-size: inherit;
}

#opt,
#scriptOpt {
	display: grid;
	grid-template-columns: 3fr 2fr;
	row-gap: .25em;
	align-items: center;
}

input {
	background-color: #222;
	margin: 0;
	color: white;
}

input[type=range] {
	width: 40%;
}

#settings #opt div {
	display: flex;
}

#settings #buttons {
	display: flex;
	justify-content: flex-end;
	margin-top: 1em;
}

button .red {
	color: #F88;
	background-color: #400;
}

button .green {
	color: #8F8;
	background-color: #040;
}

#echo {
	position: fixed;
	top: 10vh;
	left: 50vw;
	transform: translateX(-50%);
	opacity: 0;
	transition: opacity 250ms ease-in-out 5s;
	color: white;
	background: radial-gradient(black, black 40%, transparent 70%);
	padding: 1em 5ch;
	font-size: 2em;
	visibility: hidden;
}

#echo.show {
	opacity: 1;
	transition: none;
	visibility: visible;
}

:focus {
	outline: none;
}








input[type=checkbox],
input[type=range] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	height: .8em;
	border-radius: 1em;
}

input[type=checkbox]::before,
input[type=range]::-webkit-slider-thumb {
	width: 1em;
	height: 1em;
	cursor: pointer;
	border-radius: 1em;
}

input[type=range]::-webkit-slider-thumb:hover,
input[type=checkbox]:hover::before {
	background-color: #A0A !important
}

input[type=checkbox] {
	width: 2em !important;
	background-color: #A44 !important;
	position: relative;
	top: .2em;
	transition: background-color 150ms;
}

input[type=checkbox]:checked {
	background-color: #0A0 !important;
}

input[type=checkbox]::before {
	content: "";
	position: absolute;
	background-color: white;
	top: -.1em;
	left: .1em;
	transition: transform 0.3s;
}

input[type=checkbox]:checked::before {
	transform: translateX(.8em);
}

input[type=range] {
	width: 60%;
	background: #444;
	outline: none;
	padding: 0;
}

input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	background: #fff;
}

input[type=range]::-webkit-slider-thumb:active {
	background: #FAF;
}

input[type=range]::-webkit-slider-runnable-track {
	background: #0000;
}