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;
}

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;
}

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;
}