*
{
	box-sizing:border:box;
}

body
{
	margin:0px;
	background-color:black;
	overflow:auto;
	overflow-y:hidden;
}

nav
{
	width:100%;
	height:30px;
	position:sticky;
	background-color:skyblu;
	display:flex;
	gap:10px;
	padding:0.5%;
	box-sizing:border-box;
}

.mnu
{
	font-size:30px; 
	color:white;
}

.menu
{
	display:flex;
	gap:10px;
	margin-left:%;
}

.arw
{
	font-size:35px;
	color:grey;
}

.hm
{
	margin-left:20%;
	display:flex;
}

.home
{
	background-color:#57595;
	border-radius:20px;
	padding:3%;
	height:100%;
	width:100%;
}

.srch
{

	background-color:#2C2C2C;
	padding:0.3%;
	width:30%;
	height:30px;
	border-radius:20px;
}

.txt
{
	margin-left:%;
	width:100%;
	height:30px;
	border-radius:20px;
	border:none;
	background-color:#2C2C2C;
}

.acc
{
	display:flex;
	gap:7%;
	background-color:skyblu;
	width:25%;
	margin-left:18%;
	padding:0.2%;
	
}

.bell
{
	color:grey;
	font-size:20px;
	margin-top:2%;
	margin-left:2%;
}

.crs
{
	color:white;
	font-size:20px;
	margin-top:1.5%;
	margin-left:2%;
}

.pfp
{
	width:13%;
	height:30px;
	background-color:lightgreen;
	padding:0.6%;
	text-align:center;
	border-radius:35px;	
}

.pfp div
{
	margin-top:10%;
	font-size:20px;
	font-weight:bold;
}

main
{
	width:100%;
	background-color:skyblu;
	height:500px;
	margin-top:2%;
	display:flex;
	gap:1%;
	
}

.sidebar
{
	width:6%;
	background-color:;
	height:500px;
	margin-left:0.1%;

}

.main_pg
{
	width:60%;
   background: linear-gradient(90deg,rgba(48, 48, 48, 1) 0%, rgba(35, 159, 217, 1) 60%, rgba(6, 34, 59, 1) 100%);
	height:500px;
	overflow:auto;
	overflow-x:hidden;
}




.bk
{
	font-size:27px;
	color:lightgrey;
	margin-left:30%;
}
.add
{
	font-size:27px;
	color:lightgrey;
	margin-left:30%;
	margin-top:15%;
	background-color:grey;
	border-radius:20px;
	display:inline-block;
}

.plimg
{
	height:12%;
	width:65%;
	margin-left:18%;
	margin-top:15%;
}

.playlist
{
	height:430px;
	overflow:auto;
	overflow-x:hidden;
	
}

.playlist::-webkit-scrollbar
{
	display:none;
}
.main_pg::-webkit-scrollbar
{
	display:none;
}

.mnv
{
	display:flex;
	width:100%;
	background-color:re;
	gap:5%;
	padding:%;
	margin-left:5%;
	margin-top:2%;
	text-align:center;
	font-weight:bold;
}

.list
{
	background-color:rgba(247, 250, 244, 0.2);
	width:8%;
	padding:0.3%;
	border-radius:20px;
}

.lt
{
	background-color:white;
	width:5%;
}

.libry
{
	width:90%;
	background-color:re;
	height:42%;
	margin-top:3%;
	margin-left:5%;
}


.plyst
{
	display:flex;
	gap:2%;
}

.sng
{
	margin-top:1.5%;
}

.mlb
{
	width:50%;
	height:45px;
	background-color:rgba(247, 250, 244, 0.4);
	border-radius:10px;
	display:flex;
	gap:5%;
	position:relative;
}

.mlb div
{
	color:;
	font-weight:bold;
	text-align:center;
	margin-top:3.5%;
}

.lked
{
	height:100%;
	width:15%;
	border-top-left-radius:10px;
	border-bottom-left-radius:10px;
}

.h2
{
	color:white;
	font-weight:bold;
	font-size:30px;
	background-color:nav;
}
.new-sg
{
	width:90%;
	height:50%;
	margin-left:5%;
	background-color:re;
}


span
{
	margin-left:43%;
	font-size:20px;
	font-weight:bold;
	color:white;
}

.spn
{
	margin-left:45%;
}

.nmf
{
	background-color:skyblu;
	width:100%;
	height:80%;
	margin-top:-15px;
	display:flex;
	gap:2%;
}

.song
{
	width:25%;
	height:100%;
	background-color:gree;
	
}

.pic
{
	width:100%;
	height:75%;
	border-radius:5px;
}

.song div
{
	color:#F9F8F6;
	
}

.plybt
{
	background-color:lightgreen;
	height:35%;
	padding:1%;
	border-radius:20px;
	right:15px;
	display:none;
	position:absolute;
}

.mlb:hover .plybt
{
	display:block;
}

.play
{
	width:35%;
	background-color:re;
	height:500px;
	overflow:auto;
	overflow-x:hidden;
}

.nmhd
{
	display:flex;
	width:92%;
	background-color:skyblu;
	height:7%;
	margin-left:4%;   
}

.fle
{
	color:white;
	font-size:20px;
	margin-top:3%;
}

a
{
	color:white;	
	margin-top:2.5%;
	margin-left:5%;
	font-size:20px;
	
}

.mrg
{
	margin-left:55%;
}

.lft
{
	margin-left:8%;
}

.tmb
{
	background-color:yello;
	width:92%;
	height:65%;
	margin-left:4%;
	margin-top:5%;
}

.glimg
{
	width:100%;
	height:100%;
	border-radius:10px;
}

.sgname
{
	width:92%;
	height:10%;
	background-color:re;
	margin-left:4%;
	margin-top:3%;
	display:flex;
}

.name
{
	width:30%;
}

.galn
{
	color:white;
	margin-bottom:0px;
	margin-top:0px;
}

.singer
{
	color:grey;
	font-size:17px;
	margin-top:0px;
}

.icons
{
	display:flex;
	margin-top:1%;
	width:100%;
	height:30%;
	background-color:re;
	justify-content:center;
	
}

.right
{
	color:green;
	font-size:25px;
	display:inline-block;
	margin-left:10%;	
}

.share
{
	color:grey;
	font-size:25px;
	margin-left:70%;
}

.artist
{
	width:92%;
	height:85%;
	background-color:#2C2C2C;
	margin-left:4%;
	margin-top:2%;
	border-radius:10px;
}

.play::-webkit-scrollbar
{
	display:none;
}



.bck-img
{
	background-image:url("https://images.squarespace-cdn.com/content/v1/66595228bf38f4188006ec00/bafc9254-7925-4b02-967a-c02c00f67893/40400996.JPG");
	width:100%;
	height:300px;
	background-repeat:no-repeat;
	background-size:cover;
	border-top-right-radius:10px;
	border-top-left-radius:10px;

}

.Ahead
{
	color:white;
	font-weight:bold;
	padding:1%;
	margin:1%;
	
}

.tlwndr
{
	display:flex;
	width:92%;
	height:7%;
	background-color:re;
}

.tlwd
{
	color:white;
	font-size:bold;
	font-size:20px;
	margin-left:3%;
	margin-top:2%;
}

.chck
{
	color:white;
	font-size:20px;
	margin-top:2%;
	margin-left:2%;
}



.flwrs
{
	display:flex;
}

.numb
{
	color:grey;
	margin-left:2%;
	margin-top:4%;
}

.flbtn
{
	width:20%;
	color:white;
	margin-top:2%;
	margin-left:27%;
	border:1px solid white;
	padding:1%;
	border-radius:20px;
	text-align:center;
}

.dcp
{
	color:grey;
	margin-top:4%;
	margin-left:2%;
	display:flex;
	gap:2%;
}

.credits
{
	width:92%;
	height:33%;	
	margin-top:2%;
	margin-left:4%;
	background-color:#2C2C2C;
	border-radius:10px;
}

.chd
{
	display:flex;
}

.chdc
{
	font-size:20px;
	font-weight:bold;
	color:white;
	margin-left:3%;
	margin-top:3%;
}

.show
{
	color:grey;
	margin-top:4%;
	margin-left:60%;
	font-weight:bold;
}

.name2
{
	margin-left:3%;
	margin-top:5%;
	display:flex;
}

.nme1
{
	color:white;
}

.mg
{
	margin-left:55%;
	margin-top:0px;
	height:2%;
}
.name3
{
	margin-left:3%;
	margin-top:5%;
}

.queu
{
	width:92%;
	height:25%;	
	margin-top:2%;
	margin-left:4%;
	background-color:#2C2C2C;
	border-radius:10px;
}

.que
{
	display:flex;
}

.nq
{
	font-size:20px;
	font-weight:bold;
	color:white;
	margin-left:3%;
	margin-top:3%;
	width:30%;
}

.open
{
	color:grey;
	margin-top:4%;
	margin-left:40%;
	font-weight:bold;
}

.nxtsg
{
	display:flex;
	margin-top:2%;
}

.song-img
{
	width:15%;
}

.ttln
{
	width:100%;
	height:90%;
	margin-top:4%;
	margin-left:20%;
}



.thd
{
	color:white;
	margin-top:5%;
	margin-left:10%;
}

.sub-title
{
	color:grey;
	margin-left:10%;
	width:100%;
}

.footer
{
	width:100%;
	height:85px;
	background-color:black;
	position:fixed;
	display:flex;
	
}
.song-name
{
	display:flex;
	gap:2%;
	width:30%;
	padding:1.5%;
	background-color:re;
	
}

.imgg
{
	width:90%;
	height:100%;
}

.img-sng
{
	width:20%;
}

.dspt
{
	width:20%;
	margin-top:2%;
}

.d-name
{
	color:white;
	margin-left:2%;
}

.d-singer
{
	color:grey;
}

.tck
{
	font-size:20px;
	color:green;
	display:inline-block;
}

.tick
{
	margin-top:2.5%;
}

.play-music
{
	width:15%;
	margin-top:1%;
	margin-left:9.5%;
}

.play-keys
{
	display:flex;
	background-color:skyblu;
	gap:10%;
	margin-top:5%;
}

.shlf
{
	color:grey;
	font-size:25px;
	font-weight:bol;
	display:inline-block;
	margin-top:2%;
}

.lftply
{
	font-size:25px; 
	color:grey;
	margin-top:2%;
}

.cntply
{
	font-size:30px;
	background-color:white;
	padding:1%;
	text-align:center;
	border-radius:20px;
}

.short-keys
{
	margin-left:20%;
	margin-top:2%;
	width:20%;
}

.iconsh
{

	background-color:re;
	display:flex;
	gap:5%;
}

.mic2
{
	color:grey;
	font-size:20px;
}

.line
{
	width:25%;
	height:7%;
	background-color:white;
	padding:1%;
	border-radius:20px;
	margin-top:3.5%;
}