#playerContainer {
	width:90%;
	background-color: var(--accent);
	border-radius:0.5rem;
	border:1px solid var(--border);
	box-shadow: 0 0.1rem 0.3rem #0003;
	
}



#playerControls {
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

button {
	background: none;
	border:none;
}

#playButton {
	color: var(--border);
	animation: appear 0.5s;
	padding: none;
	height: 3rem;
	width: 3rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 1rem;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}


button:active i,
#playButton:active {
	background-color: var(--accent);
	color: var(--text);
}

button:active {
	transform: scale(0.9);
}


.spinner::after {
	content: "";
	width: 1rem;
	height: 1rem;
	border: 0.2rem solid transparent;
	border-top-color: var(--border);
	border-radius: 50%;
	animation: spinner 1s ease-out infinite;
}

@keyframes spinner {
	from {
		transform: rotate(0turn)
	}

	to {
		transform: rotate(1turn)
	}
}



#playSpeed {
	color: var(--border);
	border: none;
	background: none;
	outline: none;
	font-family: 'Noto Sans';
}

#currentDuration,
#fullDuration {
	color: var(--border);
	font-size: 0.7rem;
	padding: 0.3rem;
}


#playerProfiles {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}


#playerProfiles button {
	color: var(--border);
	animation: appear 0.5s;
	transition: transform 0.4s;
	padding: none;
}


#playerProfiles button i {
	height: 2.5rem;
	width: 3rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 0.5rem;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}

#playerProfiles button p {
	margin: 0;
	padding:0;
	font-weight: bold;
	font-size: 0.6rem;
	font-family: 'Noto Sans', sans-serif;
}



.on {
	background: var(--accent);
	color: var(--text);
	border: 1px solid var(--border);
	-webkit-box-shadow: 0 0.1rem 0.3rem #0003;
	box-shadow: 0 0.1rem 0.3rem #0003;
	-webkit-transform: scale(0.9);
	-ms-transform: scale(0.9);
	transform: scale(0.9);
}






@media (min-width:600px) {
	#playerContainer {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}
}


input[type="range"] {
	-webkit-appearance: none;
	background-color: transparent;
	width: calc(100% - 12rem);
	cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
	-webkit-appearance: none;
	width: 100%;
	height: 0.5rem;
	background-color: var(--accent);
	border-radius: 1rem;
	border: 0.1rem solid var(--border);
}

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: 1rem;
	width: 1rem;
	background-color: var(--accent);
	border: 0.1rem solid var(--border);
	border-radius: 1rem;
	margin-top: -0.35rem
}

input[type="range"]::-moz-range-progress,
input[type="range"]::-moz-range-track {
	background-color: var(--accent);
	height: 0.5rem;
	border-radius: 1rem;
	border: solid 0.1rem var(--border);
}

input[type="range"]::-moz-range-thumb {
	height: 1rem;
	width: 1rem;
	background-color: var(--accent);
	border: solid 0.1rem var(--border);
	border-radius: 1rem;
	margin-top: -0.35rem
}

input[type="range"]::-ms-track {
	width: 100%;
	height: 0.5rem;
	background: transparent;
	border-color: transparent;
	color: transparent;
}

input[type="range"]::-ms-fill-lower,
input[type="range"]::-ms-fill-upper {
	background-color: var(--accent);
	border: 0.1rem solid var(--border);
	border-radius: 1rem;
}

input[type="range"]::-ms-thumb {
	height: 1rem;
	width: 1rem;
	background-color: var(--accent);
	border: 0.1rem solid var(--border);
	border-radius: 1rem;
	margin-top: -0.35rem;
}