musicplayer2.css

html{
	color:white;
	font-family: cursive;
}
html::-webkit-scrollbar {
  display: none;
}
body{
	background-color: #0C1027;
}

main{
	
	width: 60%;
	display: inline-block;
	margin-left: 7%;
	margin-top: 114px;
}
/*nav bar*/
nav{
	
	width:100%;
	height:60px;
	position:fixed;
	display:flex;
	flex-wrap: wrap;
	justify-content:space-between;
	top:0%;
	background-color: #0C1027;
	z-index: 3;
}
nav>div{
	height:100%;
	display:flex;
	align-items: center;
	justify-content: space-between;
	
}
#nav-left-section{
	width:20%;
	display: flex;
}
#nav-logo-name{
	display: flex;
	justify-content:center;
	align-items: center;
}
#nav-right-section{
    width:40%;
}
#myimg img,#musicicon img{
    height:3rem;
	width:3rem;
}
#myimg img{
	border-radius: 50%;
}
input{
	color:#757575;
	background-color: #101642;
	padding:0.4rem;
	padding-left: 1.3rem;
	font-size: 1.1rem;
	border-radius: 7%;
	width: 80%;
}
#nav-left-section img{
	width:3rem;
	height:3rem;
}
#brand-name{
	letter-spacing: 0.1rem;
	height:2px;
}
#brand-name{
	display: flex;
	flex-direction: column;
	justify-content:center;
	align-items: center;
}
#brand-name p{
	margin-bottom: 10px;
}
#brand-name h3{
	margin-top: -10px;
}
#search{
	position: relative;
	width:80%;
}
#search i{
	color:#757575;
	position:absolute;
    top:24%;
}
#search-icon i{
	left:1.4%;
}
#mic-icon i{
	left:84%;
}
/*section*/
section{
	
	width:100%;
	margin:auto;
	margin-top: 10px;
	display:flex;
	justify-content: space-between;
}
/*grey color font*/
.lightgrey{
	color:lightgrey;
}
.bold{
	font-weight: bold;
	letter-spacing: 1px;
}
#section1{
	height:auto;
	align-items: center;
	 background-color: #202439;
}
#section1part1{
   width:35%;
   height:100%;
}
#section1part1 img{
	width:100%;
	height:100%;
}
#section1part2{
	display: flex;
	width:60%;
	flex-direction: column;
	/*margin-top: 40px;*/
}
#section1part2 #part1{
	flex-direction: column;
	/*height: 10%;*/
}

#section1part2 header{
	display:flex;
	justify-content: space-between;
}
#section1part2 #part2{
	display: flex;
	flex-direction: row;
	width:58%;
	justify-content: space-between;
	height:40%;
	flex-wrap: wrap;
}
header{
	height: 37%;
}
button{
	 color: white;
	 background-image: linear-gradient(#ec008c,#fc6767);
	 height: 40px;
	 width: 130px;
	 letter-spacing: 1px;
}
button:hover{
	box-shadow: 0px 0px 2px 2px lightgrey;
}
#button-track p{
	font-size: 13px;
	margin-top: 4px;
}
/*section 2*/
#section2{
	display:flex;
	flex-direction: column;
	height:1800px;
	margin-bottom: 100px;
}
#section2 .name img{
	height: 60px;
	width: 60px;
	border-radius: 10%;
}
#section2 .name{
	display: flex;
	width:20%;
    align-items: center;
    justify-content: space-between;
    margin-left: 10px;
}
#section2 .container{
	background-color: #202439;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top:10px;

}
#section2 .container:hover{
	box-shadow: 0px 0px 2px 2px lightgrey;
}
#section2 .heart-plus{
	display:flex;
	width:10%;
	justify-content: space-around;
}
/*aside*/

aside{
	display: inline-block;
	vertical-align: top;
	/*margin-top: 3rem;*/
	width:268px;
	margin-right:5%; 
	height:auto;
	
	margin-left: 2%;

}
#outeraside{
	margin-top:122px;
}

/**/
#aside1{
	width: 100%;
	height: 307px;
	overflow-y: scroll;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.aside1-container:hover{
	box-shadow: 0px 0px 2px 2px lightgrey;
}
.aside1-container{
	width: 100%;
	height: 100px;
	display: flex;
	justify-content: space-between;
	    margin-bottom: 15px;
    background-color: #202439;
}
.aside1-container .image-container{
	width: 100px;
	height: 98px;
}
.aside1-container .image-container img{
	width: 100%;
	height: 100%;
}
#aside1 .about{
	
	display: flex;
	justify-content: space-between;
	width:70%;
	height:100%;
}
#aside1 .about p{
	color:lightgrey;
}
#aside1 .about .name{
	color:white;
	margin-bottom: -10px;
}
#aside1 .about .more .duration{
 	margin-top: -15px;
}
/*aside 2*/
#inaside2{
	margin-top:20px;

}
#Recently-played{
	display: flex;
	flex-direction: column;
}
#firstpart{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#firstpart h3{
	margin-bottom: 3px;
}
#secondpart{
    height:400px;
	overflow-y: scroll;

	display:flex;
	flex-direction: column;
}
.heart:hover{
	color: red;
}
.heart-plus i:hover{
    color: red;
}
#secondpart .name img{
	height: 60px;
	width: 60px;
}
#secondpart .name{
	display: flex;
    align-items: center;
    justify-content: space-between;
}
#secondpart .container{
	display: flex;
	justify-content: space-between;
	align-items: center;
	    margin-bottom: 15px;
    background-color: #202439;
}
#secondpart .container:hover{
	box-shadow: 0px 0px 2px 2px lightgrey;
}
.container .name{
   width:156px;
}
.lightgrey{
	color: lightgrey;
}
.lightblue p{
	color:#50E3C2;
}
.lightblue i{
	color:#50E3C2;
}

/*////////////////////////////////////////////////////////////*/

/*hide scroll-bars*/

/* Hide scrollbar for Chrome, Safari and Opera */
#secondpart::-webkit-scrollbar {
  display: none;
}
#aside1::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
/*.example {
  -ms-overflow-style: none; */ /* IE and Edge */
  /*scrollbar-width: none;  /* Firefox */
/*}*/
/*--------------------------------------------------*/

/*footer*/
footer{
	background-color: #282828;
	/*background-color: white;*/
	position: fixed;
	top:87%;
	height:13vh;
	width:100%;
	display: flex;
	justify-content: space-around;
	left: 0%;
}
#footdiv1{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#footdiv1 img{
	width: 58px;
    height: 58px;
    opacity: 0.8;
}
#footdiv2{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width:50%;
	margin-top:1.5%;
}
#music-control-icons,#heart-ban-icons,#footdiv3{
	display: flex;
	flex-direction: row;
}
#music-control-icons{
	justify-content: center;
}
#footdiv2 div{
	margin-right: 1rem;
}
#music-range{
	display: flex;
	flex-direction: row;
	justify-content: center;
}
#music-range audio{
	height: 90%;
}
#footdiv3{
	align-items: center;
	justify-content: space-between;
	width:20%;
}


/*media queries to make web page responsive*/
/*//////////////////*/
@media screen and (max-width: 1200px){
	main,#outeraside{
		width : 90% ;
		/*margin:auto;*/
	}
	#outeraside{
	    margin-left: 5%;
	    margin-right:2%;
		margin-top: 5rem;
		margin-bottom: 90px;
	}
	#outeraside aside{
		width:100%;
	}
}
@media screen and (max-width: 900px){
	main,#outeraside{
		width : 90% ;
		/*margin:auto;*/
	}
	#outeraside{
	    margin-left: 5%;
	    margin-right:2%;
		margin-top: 5rem
		margin-bottom: 90px;
	}
	#nav-right-section>div{
		margin:7px;
	}
    #outeraside aside{
		width:100%;
	}
}
/*//////////////////*/