body {
	all: unset;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	user-select: none;
}

main {
	flex-grow: 1;
	display: flex;
}

#controls {
	margin: 20px;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
}

#container {
	flex-grow: 1;
	margin: 20px;
}

::-moz-focus-inner {
	border: none;
}

button#playpause {
	border: none;
	background: none;
	cursor: pointer;
	font-size: 64px;
	margin: 8px;
	vertical-align: middle;
	transition: all 50ms;
}

button#playpause:hover,
button#playpause:focus {
	filter: brightness(120%);
	outline: none;
}

button#playpause:active {
	transform: translate(1px, 1px);
}

label#volume-label {
	font-size: 30px;
	vertical-align: middle;
}

input#volume {
	vertical-align: middle;
	width: 80px;
	height: 30px;
	border-radius: 3px;
	background: #eee;
	cursor: pointer;
	-webkit-appearance: none;
}

input#volume::-moz-range-thumb {
	height: 30px;
	width: 20px;
	background-color: #999;
	border-radius: 3px;
	border: none;
}

input#volume::-webkit-slider-thumb {
	height: 30px;
	width: 20px;
	background-color: #999;
	border-radius: 3px;
	-webkit-appearance: none;
}

input#volume:hover,
input#volume:focus {
	filter: brightness(102%);
	outline: none;
}

.context-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	z-index: 9999999;
	border: 1px solid #99999966;
	border-radius: 2px;
	box-shadow: 2px 2px 6px #99999966;
	background: #fcfcfc;
}

.context-menu button {
	background: none;
	border: none;
	font-size: 1em;
	padding: 4px 20px;
}
.context-menu button:hover {
	background: #dddddd99;
}