*{
	font-family: Arial, sans-serif;
}
body{
	background-color:black;
}
nav{
	position:fixed;
	z-index:1;
	height:46px;
	width:1091px;
	margin-top:-0.3cm;
	margin-left:-0.8%;
	background-color:black;
	padding-top:0.3cm;
}
.HomeCircle{
	height:1cm;
	width:0.85cm;
	border-radius:100px;
	float:right;
	background-color:#212122;
	margin-right:0.3cm;
	padding-right:0.2cm;
}
.HomeCircle:hover{
	background-color:#26282A;
	display:block;
}
.Search{
	height:1cm;
	width:10cm;
	border-radius:20px;
	float:right;
	background-color:#212122;
	margin-right:3cm;
}
.Search:hover{
	border:1px solid grey;
	background-color:#26282A;
}
.SearchLine{
	height:0.5cm;
	width:1px;
	background-color:grey;
	float:right;
	margin-top:0.25cm;
	margin-right:0.25cm;
}
.place{
	background-color:#212122;
	border:none;
	outline:none;
	margin-left:0.25cm;
	margin-top:0cm;
	height:0.9cm;
	width:7cm;
}
.place:hover{
	background-color:#26282A;
}
.navtext{
	font-size:1.2vw;
	color:grey;
	font-weight:bold;
	margin-right:0.2cm;
	float:right;
}
.navtext:hover{
	color:white;
	font-size:1.2vw;
	text-shadow:-1px 0px 1px white;
}
.navtext2{
	font-size:1vw;
	color:grey;
	font-weight:bold;
	margin-left:0.1cm;
	float:left;
}
.navtext2:hover{
	color:white;
	font-size:1vw;
	text-shadow:-1px 0px 1px white;
}
.navtext3{
	font-size:1vw;
	color:grey;
	font-weight:bold;
	margin-right:0.5cm;
	margin-left:-0.5cm;
	float:right;
}
.navtext3:hover{
	color:white;
	font-size:1vw;
	text-shadow:-1px 0px 1px white;
}
.MidLine{
	height:0.5cm;
	width:1px;
	background-color:grey;
	float:right;
	margin-top:0.25cm;
	margin-left:0.3cm;
	margin-right:0.25cm;
}
.Install{
	height:1cm;
	width:3cm;
	float:right;
	margin-left:0.3cm;
}
.navtext4{
	font-size:1.2vw;
	color:grey;
	font-weight:bold;
	margin-right:0.2cm;
	float:right;
}
.navtext4:hover{
	color:black;
}
.Log-In{
	height:0.7cm;
	width:1.7cm;
	float:right;
	background-color:white;
	border-radius:20px;
	padding-left:0.6cm;
	padding-bottom:0.4cm;
}
.Log-In:hover{
	background-color:lightgrey;
}
aside{
	height:10cm;
	width:8cm;
	position:fixed;
	background-color:#0D0E0E;
	top:1.6cm;
	border-radius:4px;
}
.toptext{
	font-size:12px;
	color:white;
	float:left;
	font-weight:bold;
	margin-left:0.5cm;
	margin-top:0.5cm;
}
.top{
	height:0.4cm;
	width:0.6cm;
	background-color:#0D0E0E;
	float:right;
	padding-left:0.2cm;
	padding-bottom:0.25cm;
	padding-top:0.15cm;
	border-radius:100px;
	margin-top:0.3cm;
	margin-right:0.3cm;
}
.top:hover{
	background-color:#1C1C1C;
}
.middle{
	height:4cm;
	width:7.87cm;
	background-color:#0D0E0E;
	margin-top:1.6cm;
	margin-left:0.1cm;
	overflow-y:scroll;
}
.middle1{
	height:2.7cm;
	width:7.2cm;
	border-radius:5px;
	background-color: #1B1B1B;
	margin-top:0.5cm;
	padding-top:0.1pc;
	margin-bottom:1pc;
	margin-left:0.1cm;
}
.middle1text1{
	font-size:12.5px;
	color:white;
	font-weight:bold;
	margin-left:0.5cm;
}
.middle1text2{
	font-size:10px;
	color:white;
	font-weight:bold;
	margin-left:0.5cm;
}
.middle1text3{
	font-size:11.5px;
	width:2.1cm;
	padding:0.2cm 0.4cm;
	background-color:#FFF8E7;
	font-weight:bold;
	border-radius:20px;
	margin-left:0.5cm;
}
.middle1text4{
	font-size:11.5px;
	width:2.53cm;
	padding:0.2cm 0.4cm;
	background-color:#FFF8E7;
	font-weight:bold;
	border-radius:20px;
	margin-left:0.5cm;
}
.middle1text3:hover{
	background-color:#F1E9D2;
	width:2.1cm;
	padding:0.25cm 0.4cm;
	box-shadow:0pc 0pc 1pc #F1E9D2;
} 
.middle1text4:hover{
	background-color:#F1E9D2;
	width:2.53cm;
	padding:0.25cm 0.4cm;
	box-shadow:0pc 0pc 1pc #F1E9D2;
}
.Lastname1{
	float:right;
	font-size:8.5px;
	margin-right:1cm;
	color:lightgrey;
	margin-top:0.8cm;
}
.Lastname2{
	float:right;
	font-size:8.5px;
	margin-right:0.5cm;
	color:lightgrey;
	margin-top:0.8cm;
}
.Lastname3{
	float:right;
	font-size:8.5px;
	margin-right:4.78cm;
	color:lightgrey;
	margin-top:0.2cm;
}
.Lastname4{
	float:right;
	font-size:8.5px;
	margin-right:0.5cm;
	color:lightgrey;
	margin-top:0.2cm;
}
.Lastname5{
	float:right;
	font-size:10px;
	margin-right:6.5cm;
	color:white;
	margin-top:0.2cm;	
}
.Lastname6{
	font-weight:bold;
	float:right;
	font-size:10px;
	width:1.7cm;
	padding:0.18cm 0.2cm;
	color:white;
	border-radius:20px;
	border:1px solid white;
	margin-right:5.4cm;
	margin-top:0.4cm;
}
.Songs{
	height:10cm;
	width:20.2cm;
	background-color:#0D0E0E;
	border-radius:4px;
	position:fixed;
	top:1.6cm;
	left:8.4cm;
	overflow-y:scroll;
	overflow-x:hidden;
}
.music-section{
	margin: 2rem 0rem 2rem;
}
.Trending{
	width:18cm;
	height:1cm;
	margin-left:0.9cm;
	position:sticky;
	margin-bottom:-2rem;
}
.show{
	font-size:12px;
	color:lightgrey;
	font-weight:bold;
	float:right;
	margin:0cm;
}
.show:hover{
	text-decoration:underline 1px solid white;
}
.types{
	font-size:19.5px;
	color:white;
	font-weight:bold;
	float:left;
	margin:0cm;
}.types:hover{
	text-decoration:underline 2px solid currentcolor;
}
.Trending-Songs{
	margin:1.3cm 0cm;
	width:38cm;
	height:6.3cm;
	position:absolute;
	display:flex;
	overflow-x:auto;
	margin-top:0.4cm;
}
.Image1{
	float:right;
}
.music-card .Image1{
	height:3.2cm;
	width:3.2cm;
	border-radius:5px;
}
.music-card{
	width:3.2cm;
	padding:0.3cm;
	background-color: #0D0E0E;
	border-radius:5px;
	margin-right:-1cm;
}
.music-card:hover{
	background-color:#222;
}
.music-play-button{
	color:rgb(32, 234, 32);
	font-size:2.5rem;
	position:absolute;
	background-color:black;
	display:block;
	padding:-1.5rem;
	margin-top:-1.7cm;
	margin-left:2cm;
	border-radius:20rem;
	display:none;
	margin-bottom:1.5cm;
}
.music-card:hover .music-play-button{
	display:block;
}
.text-a1{
	font-size:12.5px;
	color:white;
	margin-top:1cm;
}
.text-a1:hover{
	text-decoration:underline 1px solid white;
}
.text-a2{
	font-size:11.5px;
	color:lightgrey;
	margin-top:-0.5pc;
}
.text-a2:hover{
	text-decoration:underline 1px solid white;
}
.text-a3{
	margin-top:3.5cm;
}
.music-section2{
	margin: 18rem 0rem 2rem;
}
.Image2{
	float:right;
}
.music-card .Image2{
	height:3.2cm;
	width:3.2cm;
	border-radius:110px;
}
.text-a4{
	font-size:11.5px;
	color:lightgrey;
	margin-top:1pc;
}
.text-a4:hover{
	text-decoration:underline 1px solid white;
}
.Line1{
	width:700px;
	height:0.5px;
	background-color:grey;
	margin-top:10cm;
	margin-left:0.6cm;
}
.Line2{
	width:700px;
	height:0.5px;
	background-color:grey;
	margin-top:6.5cm;
	margin-left:0.6cm;
	margin-bottom:2.3cm;
}
.Footer{
	margin-top:1cm;
}
.each-one{
	float:right;
	margin-left:0.8cm;
	margin-right:0.5cm;
}
.sub-main{
	font-size:13px;
	color:white;
	font-weight:bold;
}
.sub-main:hover{
	text-decoration:underline 0.5px solid white;
}
.sub{
	font-size:12.5px;
	color:grey;
}
.sub:hover{
	text-decoration:underline 0.5px solid white;
}
.apps{
	font-size:15px;
	float:right;
	color:white;
	border-radius:100px;
	padding:0.25cm;
	background-color:#26282A;
	margin-right:0.3cm;
}
.apps:hover{
	background-color:#666362;
	display:block;
}
.for-all-app{
	margin-right:0.8cm;
}
.Last-name{
	font-size:11.5px;
	color:grey;
	margin-left:1cm;
	margin-bottom:1cm;
	margin-top:-1.3cm;
}
.bottom{
	width:28.4cm;
	height:1.3cm;
	background-color:grey;
	position:fixed;
	margin-top:11.5cm;
	border-radius:5px;
	background-image: linear-gradient(to right, purple , skyblue);
}
.bottom-left{
	float:left;
	margin-left:0.4cm;
}
.bottom-right{
	float:right;
	margin-right:0.4cm;
}
.bottom-left-top{
	font-size:12px;
	color:white;
	font-weight:bold;
}
.bottom-left-bottom{
	font-size:13px;
	color:white;
	margin-top:-0.3cm;
}
.bottom-right-top{
	
	background-color:white;
	color:black;
	padding:0.31cm 0.6cm 0.31cm 0.6cm;
	font-weight:bold;
	border-radius:20px;
	font-size:12.5px;
	margin-top:0.15cm;
}