body{
	margin:0px;
	height: 100vh;
	width:100%;
	background: url('Images/background.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	padding: 0px;
	display: flex;
	
	flex-direction: column;

}


/*header*/
header{
	
	margin: 0px;
	
	height: 15vh;
	/*background: linear-gradient(black,red);*/
}

header h1{
	margin: 0px;
	text-align: center;
	color: white;
	transition: color 1s;

}

header h1:hover{
	color: black;
	
}

header li{
	display: inline-block;
	text-decoration:none;
}

header li a{
	text-decoration:none;
	color: white; 
	transition: color 1s;
}

li a:hover{
	color:grey;
}


/*Main Music Body*/

main{
	
	/*margin-bottom: 8px;*/
	height: 75vh;
	padding: 0px;
	width:99%;
	display: flex;
	justify-content: space-between;
	
	

}

/*song list*/

#new-release{
	height: 100%;
	padding: 0px;
	margin:0px;
	/*min-width: 300px;
	min-height: 400px;*/

}

select{
	background-color:#2c29304a;
	padding: 1rem;
	height: 90%;
	color: white;
	font-weight: bolder;
	font-size: 1rem;
	transition: background-color 3s;

}
select:hover{
	background-color:#2c2930eb;
}


/* Song Detail Section background photos of song details */
#display{
	width: 50%;
	height: 100%;
}


#notification{
	width: 25%;
	height: 100%;
	background-color:#2c2930bf;
	margin: 0px;
}

#progress-notif{
	width: 100%;
	height: 0%;
	background:url("Images/notif.jpeg");
	background-size: contain;
	
	
}

/*Music Body ends*/





/*footer : */


footer{

    height: 10vh;
    padding: 0px;
    position:relative;
    bottom: 0%;
    /*min-height: 200px;*/
}

#music-container{
	height:100%;
	/*background-image: url("Images/rain-drop.jpg");*/
	background-color: grey;
	transition: background-color 3s;
	opacity: 0.8;
	padding: 0px;
	margin: 0px;
	text-align: center;
	position:relative;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: space-around;
}

#music-container:hover{
	background-color:white;
}

#progress{
	width: 250px;
}

.player-button {
	font-size: 3rem;
	color: black;
	opacity: 0.7;
}


#volume{
	font-size: 1.2rem;
}
#play{
	font-size:2.9rem;
	color: black;
	font-weight: bolder;
}

#previous_song{
	font-size:2.5rem;
	color: black;
	font-weight: bolder;
}
#next_song{
	font-size: 2.5rem;
	color: black;
	font-weight: bolder;
}

#music-container  i:hover{
	color: black;
}

.cards{
	width: 20%;
	height: 45%;
	/*background-color: #2c2930eb;*/
}


#cur_song-pic{
	padding: 2%;
}

#a{
	position: absolute;
	left:20%;
	z-index: 1;
	transition: left 3s;
	border-radius:9px;
	
	/*background-repeat: no-repeat;
	background-size:cover;*/

}
#b{
	position: absolute;
	left: 35%;
	transition:left 1s;
	z-index: 2;
	background: url('Images/audio.jpeg');
	background-repeat: no-repeat;
	border-radius:9px;
	background-size: contain;
}

#c{
	z-index: 1;
	position: absolute;
	left: 45%;
	transition: left 2s;
	border-radius:9px;

}

#a:hover{
	z-index: 3;
	left:35%;
}

#b:hover{
	z-index: 3;
	left:30%;


}



#c:hover{
	z-index: 3;
	left: 30%;
}
/*notification*/


#notification{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}