.control-panel {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 60%;
	}

	.progress-bar input[type=range] {
		-webkit-appearance: none;
		margin: 1em 0;
		width: 100%;
		transition: all 0.2s;
	}

	.progress-bar input[type=range]:focus {
		outline: none;
	}

	.progress-bar input[type=range]::-webkit-slider-runnable-track {
		width: 100%;
		height: 0.5em;
		cursor: pointer;
		animate: 0.2s;
		background: #000;
		border-radius: 3px;
	}

	.progress-bar input[type=range]::-webkit-slider-thumb {
		height: 3em;
		width: 1em;
		border-radius: 0.5em;
		background: #000;
		cursor: pointer;
		-webkit-appearance: none;
		margin-top: -1.166666666666667em;
	}

	.progress-bar input[type=range]:focus::-webkit-slider-runnable-track {
		background: #000;
	}

	.progress-bar input[type=range]::-moz-range-track {
		width: 100%;
		height: 0.5em;
		cursor: pointer;
		animate: 0.2s;
		background: #000;
		border-radius: 3px;
	}

	.progress-bar input[type=range]::-moz-range-thumb {
		height: 3em;
		width: 1em;
		border-radius: 0.5em;
		background: #000;
		cursor: pointer;
	}

	.progress-bar input[type=range]::-ms-track {
		width: 100%;
		height: 0.5em;
		cursor: pointer;
		animate: 0.2s;
		background: transparent;
		border-color: transparent;
		border-width: 16px 0;
		color: transparent;
	}

	.progress-bar input[type=range]::-ms-fill-lower {
		background: #000;
		border: 0.2px solid #000;
		border-radius: 0.5em;
	}

	.progress-bar input[type=range]::-ms-fill-upper {
		background: #000;
		border: 0.2px solid #000;
		border-radius: 0.5em;
	}

	.progress-bar input[type=range]::-ms-thumb {
		height: 3em;
		width: 1em;
		border-radius: 0.5em;
		background: #000;
		cursor: pointer;
		margin-top: -0.5em;
	}

	.progress-bar input[type=range]:focus::-ms-fill-lower {
		background: #000;
	}

	.progress-bar input[type=range]:focus::-ms-fill-upper {
		background: #000;
	}

	.iframe-container {
		position: absolute;
		right: 100%;
		bottom: 100%;
		z-index: -1;
		opacity: 0;
		visibility: hidden;
		width: 0;
		height: 0;
		overflow: hidden;
	}

	#player-progress, #volume-bar {
		width: 100%;
		margin: 0;
		margin-top: 0.25em;
		height: 3em;
		background: transparent;
	}

	#volume-bar {
		min-width: 100px;
	}

	#title {
		text-align: center;
		margin-top: 6rem;
		font-family: cursive;
		font-size: 1.3rem;
	}

	body.off #title {
		color: antiquewhite;
	}

	.progress-bar {
		display: flex;
		align-items: center;
		width: 100%;
		height: 3em;
		margin-top: 2rem;
		box-sizing: border-box;
		min-width: 45vh;
	}

	#volume-bar {
		width: 15%;
	}

	#duration, #position, #volume {
		width: 4em;
		text-align: center;
	}

	#position {
		left: 0;
	}

	.toggle-play {
		z-index: 100;
		width: 8%;
		cursor: pointer;
	}

	.play, .pause {
		min-width: 70px;
		transition: all 0.5s;
		/* margin-top: 5%; */
	}

	.pause {
		transform: rotate(-180deg);
	}

	.unselectable {
		user-select: none;
	}

	#shuffle-button {
		cursor: pointer;
		transform: rotate(-90deg)
	}