html, body {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	font-family: Montserrat, Arial, Helvetica, sans-serif;
	color: white;
}
#background-layer{
	transition: background-color 1s ease;

}
body{
	margin: 0;
}
.container{
	display: flex;
	position: absolute;
	bottom: 20px;
	left: 10px;
	width: 100%;
	align-items: center;
	flex-direction: row;
}
.unselectable {
 	user-drag: none; 
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
  	
}
.cdplayer{
	width: 200px;
	display: inline-block;
}

.cd-outer {
	inline-size: max(10rem, 15vw);
	aspect-ratio: 1;
	margin-inline: auto;
	border-top-style: groove;
	border-bottom-style: ridge;
	border-right-style: ridge;
	border-left-style: groove;
	border-width: 8px;
	border-color: #4a4a4a;
	padding: 2px;
	border-radius: 50%;
}
.cd-inner{
	position: relative;
	inline-size: 100%;
	block-size: 100%;
	border-radius: 50%;
	background: linear-gradient( 
		#b3aedc, #a9d6e5, #d6f0f0, #f6d1d1, #e6c9f1	
	);

	mask: radial-gradient(#0000 10px, #000 10px);

}
.cd-inner img{
	display: block;
	inline-size: 1;
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
	animation: playing 13s linear infinite;
}


.cd-inner img.pause{
	animation-play-state: paused !important;
}

.cd-inner img.stop{
	animation: none;
}


.shadow{
	
	background: transparent;
	border-radius:50%;
	height: 20px;
	width: 30vw;
	margin:-25px 0 0 0;
	position: relative;
	box-shadow: 0px 45px 25px rgba(0,0,0,0.7);
	left: 50%;
	transform: translateX(-50%);
}
@keyframes playing {
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}

.musicInfo{
	margin: 16px 0 0 0;
	padding-left: 20px;
	display: inline-block;
}

.songInfo{
	width: 100%;
	display: inline-block;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 32px;
	
}


.songInfo2{
	width: 100%;
	display: inline-block;
	font-weight: 600;
	text-transform: uppercase;

	
}
.songTitle{

}
.artistName{

}

.audioProgress{
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);

}





#progress{
	-webkit-appearance: none;
	grid-column: 1/-1;
	height: 6px;
	cursor: pointer;
	margin: 0;
	margin-bottom: 5px;
	position: relative;
	background-color: white;
	border: none;
	border-radius: 10px;
	
}
#progress::-webkit-slider-thumb{
	-webkit-appearance: none;
	background-color: white;
	height: 15px;
	width: 15px;
	z-index: 5;
	box-shadow: 0 0 0 1px white;
	border-radius: 50%;

}
.progressHead{
	position: absolute;
	background-color: white;
	height: 15px;
	width: 15px;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	z-index: 5;
	box-shadow: 0 0 0 3px orange;
	border-radius: 50%;
}
.currentTime{
	text-align: left;
	margin-left: 8px;
}
.duration{
	text-align: right;
	margin-right: 8px;

}
.controls-wrapper{
	width: 50%;
	margin-left: 16px;

}

.controls-main{
	display: inline-block;
	margin-left: 5%;
	min-width: 400px;
}


.controls-wrapper2{
	text-align:center;
	margin:0 auto;
}



.audioButtons-wrapper{
	width: 100%;
}


.audioButtons{
	top: 20px;
	position: relative;
	width: 25%;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	left: 50%;
	transform: translateX(-50%);
}



.audioButtons2{
	position: relative;
	width: 90%;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
}


.audiobtn{
	cursor: pointer;
	border: unset;
	background-color: unset;
	font-size: 35px;
	color: white;
	display: in-line-flex;
	align-items: center;
	justify-content: center;
}


.audiobtn:hover {
	background-color: #ddd;
	border-radius: 10px;
}
.audiobtn:nth-child(2){
	font-size: 24px;
}

.audiobtn:nth-child(2):hover{
	font-size: 24px;
	border-radius: 50%;
}




.audiobtn{
	cursor: pointer;
	border: unset;
	background-color: unset;
	font-size: 3em;
	color: white;
	display: in-line-flex;
	align-items: center;
	justify-content: center;
}


.audiobtn:hover {
	background-color: #ddd;
	border-radius: 10px;
}
.audiobtn:nth-child(2){
	font-size: 24px;
}

.audiobtn:nth-child(2):hover{
	font-size: 24px;
	border-radius: 50%;
}




.play{
	background: white;
	text-align: center;
	border-radius: 50%;
	padding: 16px 20px;
}
.credit{
	position: absolute;
	bottom: 3px;
	right: 3px;

}





@media (max-width: 768px) {

	.btn2{
		font-size: 5em !important;
	}

}