/* global-------------------- */
body{
	height: 100%;
	width: 100%;
	margin-left: -5px;
	margin-top: -1vh;
	background-image: url('image/background.png');
	background-size: cover;
	

}

nav{
	height: 4rem;
	width:100%;
	margin: 0.3rem;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	position: fixed;
	z-index: 1; 
}

main{
	height: 150%;
	width:65%;
	margin-top: 10vh;
	margin-left: 4%;
	margin-right: 3%;
	padding-bottom: 20vh;
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: space-between;
	flex-direction: column;
}

aside{
	height:auto;
	width:28%;
	display: inline-flex;
	flex-direction: column;
	flex-wrap: wrap;
	padding: 0px;
	margin-top: 8%;
	margin-left: -1vw;
	vertical-align: top;
}

/* nav elements------------------------------------------------ */
#music-player-tag{
	width: auto;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
}

#music-player-logo{
	display: inline;
}
#music-player-logo img{
	height: 3.3rem;
	width: 3.3rem;
	border-radius: 50%;
	display: inline;
}
#music-player-name{
	color: white;
	font-family: helvetica, sans-serif;
	padding: 5px;
	margin-top: 7px;
	display: inline;
}
#search-bar-utility{
	width: auto;
	display: flex;
	margin-right: 2rem;
	flex-wrap: wrap;
	justify-content: space-between;
}
#search-bar input[type="text"]{
	height:1.7rem;
	width:17vw;
	margin-right: 3px;
	padding: 1px;
	border:none;
	font-family: helvetica, sans-serif;
}
::placeholder{
	font-family: helvetica, sans-serif;
	padding: 5px;
}
#search-bar input:focus{
	height:1.7rem;
	width:17vw;
	outline:none;
}
#search-bar i{
	margin-top: 1px;
}
#notifications{
	font-size: 1.3rem;
	margin-top: 18px;
	margin-right: 2rem;

}
#user{
	margin-top: 5px;
}
#user img{
	height: 3.3rem;
	width: 3.3rem;
	border-radius: 50%;
}
/* artist start from here------------------------------------------ */
#artist-template{
	height: auto;
	width: 95%;
	margin-top: 5%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

#artist-image{
	height: 60vh;
	width: 40%;
	background: linear-gradient(to bottom, rgba(13,0,101,0) 10%,
              rgba(13,0,101,1)), url(image/alan-walkar.jpg); /*Adding linear gradient*/
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

#artist-details{
	height: 60vh;
	width: 54%;
	display: flex;
	flex-direction: column;
	margin-right: 3%;
	margin-left: 1%;
}

#artist-title{
	height: 20%;
	width: 100%;
	margin-top: 13%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	font-family: helvetica, sans-serif;
	
}

#artist-title b{
	font-size: 1.5rem;
	color: #fff;
}
#artist-title followers{
	font-size: 0.9rem;
	margin-top: 1.5%;
	color: #fff;
}

#artist-title artist-type{
	font-size: 0.9rem;
	font-weight: bold;
	margin-top: 1rem;
	padding: 0.5rem;
}

#artist-intro{
	font-family: helvetica, sans-serif;
	font-size: 0.9rem;
	text-align: justify;
	width: 94%;
}

#artist-buttons{
	height: auto;
	width: 55%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 10%;
}

#playall-button{
	height: 1.7rem;
	width: 9rem;
	color: white;
    text-align: center;
    font-weight: bold;
    font-family: helvetia, sans-serif;
    border-radius: 0.3rem;
    padding-top: 4%;
}
#follow-button{
	font-family: helvetica, sans-serif;
}

/*Artist Songs Begining-----------------------------------------------*/
#artist-songs{
	height: auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-top: 3%;
}
#tracks{
	font-family: helvetica, sans-serif;
	font-size: 0.8rem;
	margin-top: 0.5rem;
}
#song{
	height: 12vh;
	width: 95%;
	min-width: 300px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 2%;
}
#song img{
	height: 10vh;
	width: 10vh;
	margin-left: 2vw;
}

#song-number{
	font-family: helvetica, sans-serif;
    margin-left: 1vw;
    font-size: 0.8rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: 50%;
}

#icons{
	height: auto;
	width: 4vw;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	justify-content: space-between;
	padding-right: 2%;
}

#song-details{
	font-family: helvetica, sans-serif;
	font-weight: bold;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	margin-left: 2vw;
	font-size: 0.95rem;
	color: #fff;
}
#song-details author{
	font-family: helvetica, sans-serif;
	font-size: 0.8rem;
	margin-top: 1vh;
}
/* aside header 1------------------------------------- */
#aside-header-1{
	font-family: helvetica, sans-serif;
	font-size: 1.6rem;
	font-weight: bolder;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin-right: 5vw;
	width: 90%;
}

#aside-header-1 x{
	font-family: helvetica, sans-serif;
	font-size: 0.9rem;
}

#similar-artist{
	height: 20vh;
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 1.5rem;
	font-size: 1.3rem;
	margin-bottom: -1.5rem;
}

#artist-img{
   background-image: url(image/selena-gomez-justin-bieber.jpg);
   height: 15vh;
   width: 15vh;
   background-position: center;
   background-size: cover;
   margin-right: -0.5rem;
}

#similar-artist i{
	margin-left: 8vw;
}
/* aside header------------------------------------------ */

#aside-header-2{
	font-family: helvetica, sans-serif;
	font-size: 1.6rem;
	font-weight: bolder;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin-right: 5vw;
	width: 90%;
	margin-top: 2.5rem;
}

#aside-header-2 x{
	font-family: helvetica, sans-serif;
	font-size: 0.9rem;
}

aside #song{
	align-items: center;
	margin-top: 1.5rem;
	margin-bottom: -1rem;
	
}

aside #song #song-details{
	font-size: 0.8rem;
}

aside #song #song-number{
	width: 70%;
	margin-top: 0.3rem;
}
/* footer------------------------------------music player  */

#music-bar{
	height: 100px;
	width: 1500px;
	position: fixed;
	bottom: 0;
	background-color: #0ed8c5;
	opacity: 1;
	z-index: 15;
}

#music-icon{
	height: 70px;
	width: 70px;
	margin-left: 2vw;
	margin-top: 6px;
	border:2px solid ;
	opacity: 1;
}
#music-icon img{
	height: 70px;
	width: 70px;
	margin-left: 0;
	margin-top: 0;
	position: fixed;
}
#music-bar:target{
	display: block; 
}
#music-icon a{
	position: fixed;
	top:12vh;
	left:98%;

}
#music-title{
	font-family: sans-serif;
	font-size:1rem;
	margin-top: -3.5%;
	margin-left: 7.5%;
}
#music-player-title-artist{
	 color:lightgrey; 
	 font-size:0.8rem;
}
#play-buttons{
	margin-top: -2%;
    margin-left: 34%;
    font-size: 1.3rem;
}
#play-buttons i{
	padding-right: 4%;
}
#progress-bar{
	height:3px;
	width:380px;
	margin-left: 460px;
	margin-top:-1vh;
	border-radius: 2px;
}
#circle{
	position: relative;
	top:-6px;
	left:-1px;
}
#favourite{
	margin-left: 5px;
	display: inline;
}
#remove{
	margin-left: 5px;
   display: inline;
}
#queue{
	display: inline;
	margin-left: 67%;
	position: relative;
	bottom: 21%;
}
#volume{
	display: inline;
	margin-left: 70%;
	position: relative;
	bottom: 38%;
}
#progress-bar-volume{
	height:3px;
	width:10vw;
	position: fixed;
	left: 1100px;
	top:93.5vh;
	border-radius: 2px;
	display: inline;
}

#circle-volume{
	position: relative;
	top:-6px;
	left:0%;
}
#start-time{
	display: inline;
	position: absolute;
	font-family: sans-serif;
	position: relative;
	left:28%;
	top:2.5%;
	font-size: 0.8rem;
}
#end-time{
	display: inline;
	position: absolute;
	font-family: sans-serif;
	font-size: 0.8rem;
	position: relative;
	left:55%;
	top:2.5%;
}