@import "https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css";
@import "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css";

:root{
	--primary:#1E90FF;
}

body{
	height: 100vh;
	background-color: #efefef;
	display: flex;
	align-items: center;
	justify-content: center;
}

#player{
	background-color: white;
	width: 100%;
	max-width: 24rem;
	box-shadow: 
		0px 2px 2px 0px rgba(0,0,0,0.12), 
		0px 3px 1px -2px rgba(0,0,0,0.12), 
		0px 1px 5px 0px rgba(0,0,0,0.2), 
		0px 1px 5px 0px rgba(0,0,0,0.2);
	border-radius: .2rem;
}

.card{
	box-shadow: none;
	margin: 0;
}

h4{
	color: var(--primary);
	font-size: 20px;
	font-weight: bold;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
}

.card-image{
	background:url("https://placehold.it/500") no-repeat center center / cover;
	height: 200px;
}

/* Technical adjustments :) */
.card .card-image a:nth-child(1){ 
	margin-right: 8.45rem;
	/* position: relative;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -50%); */
}

.card .card-image a:nth-child(2){ 
	margin-right: 12.8rem;
	/* position: relative;
	top: 95%;
	left: 17%;
	transform: translate(-50%, -50%); */
	background-color: var(--primary);	
}

.card .card-image a:nth-child(3){ 
	margin-right: 5.2rem;
	/* position: relative;
	top: 95%;
	left: 37%;
	transform: translate(-50%, -50%); */
	background-color: var(--primary);
}

audio{
	width: 100%;
	margin-top: 30px;
}

#play-pause{
	background-color: var(--primary);
}

#mute{
	color: var(--primary);
	transform: translateY(2px);
}

input[type="range"]::-webkit-slider-thumb{
	background-color: var(--primary);
}

input[type="range"]::-moz-range-thumb{
	background-color: var(--primary);
}

input[type="range"]::-ms-thumb{
	background-color: var(--primary);
}