music.css

/*Common Properties*/
body{
	background-color: #090921;
	font-family: calibri;
}
	/*Header Section*/

header{
}
	/*Properties to all divs*/
div{
	display: inline-block;
}
/*Properties to all anchor Tags*/
a{
	text-decoration: none;
	color: white;
}
/*Properties to all buttons*/
button{
	outline: none;
}

/*Header Section*/
.one{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
/*Header Section Left*/
/*It includes logo, website name, fav tab and queue Buttons*/
.header-left{
	width: 40%;
	margin-left: 6%;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
}
.margin-r-small{
	margin-right: 5px;
}
.margin-r{
	margin-right: 10px;
}
/*Logo*/
.icon{
	color: white;
	cursor: pointer;
}
#logo{
	display: flex;
	align-items: center;
}
#logo i{
	font-size: 350%;
	color: white;
}
/*Bhajan Studio-Heading*/
#logo #studio-name{
	font-size: 150%;
	color: white;
	width: 40%;
	margin-left: 1%;
}
/*Favourite Button*/
#favourite{
	box-sizing: border-box;
}
#favourite a{
	font-size: 120%;
	color: white;
	text-decoration: none;
	box-sizing: border-box;
}
/*Queue Button*/
.queue{
display: none;
}
.back{
	display: none;
}
/*Header-Right*/
/*It includes Search Bar, Notification Bell, Profile*/
.header-right{
	display: flex;
	flex-wrap: nowrap;
	width: 45%;
}
/*Search Content*/
.search{
	display: flex;
	width: 60%;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center ;
}
.search-content{
	padding:0px;
	height: 40%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.search .icon{
	background-color: #1f2961;
	height: 100%;
	width: 10%;
	font-size: 100%;
    padding:auto;
    padding-top: 5px;
    padding-left: 2px;
	margin: 0px;
	box-sizing: border-box;
}
.search input{
	background: #1f2961;
	font-size: 100%;
	border:none;
	box-sizing: border-box;
	width: 80%;
	height: 100%;
	padding: 0px;
	padding-left: 5px;
	color: white;
}
.search input:focus{
outline: none;
}
.search .fa-search{
	border-radius: 20% 0% 0% 20%;
}
.search .fa-microphone{
	border-radius: 0% 20% 20% 0%;
}
/*Notification Bell*/
.notification{
	display: flex;
	justify-content: space-around ;
	align-items: center;
	width: 35%;
}
.notification .icon{
	font-size: 190%;
	box-sizing: border-box;
}
/*Profile Picture*/
.notification #my-pic{
	width: 35%;
	border-radius: 50%;
	box-shadow: 0px 0px 1px 2px grey;
}
/*Main Content*/
main{
	display: flex;
}
.main-content{
	width: 65%;
	margin:3% 0% 0% 6%;
}
/*Trending Section*/
.trending{
	display: flex;
	justify-content: space-around;
}
.trending .t-individual{
	width: 32%;
}
.t-individual img{
	width: 100%;
	transition:all;
	transition-duration: 0.3s;
}
.trending img:hover{
	filter: brightness(150%);
	transform: scale(1.1);
	cursor: pointer;
}
/*Latest Release Section*/
.latest-release{
	display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 1rem;
    color: white;
    font-size: 1.3rem;
}
h2{
	margin-top: 3rem;
}
/*Latest Release Individual Card*/
.card{
	position: relative;
	width: 48%;
	display: flex;
	margin-bottom: 1em;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: space-around;
}
.latest-image{
	position: relative;
	width: 30%;
}
.latest-image img{
width: 100%;
height: 100%;
}
/*Latest Release Play :on hover*/
.fa-play{
	position: absolute;
	left: 40%;
	top: 30%;
	opacity: 0;
	font-size: 2.3rem;
}
.latest-image:hover .fa-play{
	cursor: pointer;
	opacity: 1;
}
/*Latest Release Song Details*/
.latest-detail{
	width: 60%;

}
.latest-top{
	display: flex;
	justify-content: space-between;
	margin-top:12%;
}
/*Latest Release HamBurger Button*/
.latest-top button{
	background-color: transparent;
	border:none;
	color: white;
	cursor: pointer;
	font-size: 1.2rem;
}
.latest-top button:focus ul{
	opacity: 1;
}
.latest-bottom{
	display: flex;
	justify-content: space-between;
	margin-top:7%;
}
/*Latest Release HamBurger Button List*/
.fa-ellipsis-h ul{
	opacity: 0;
	cursor: pointer;
	position: absolute;
	background-color: #fff;
	width: 50%;
	padding: 0px;
	text-align: left;
	left:50%;
	font-size: 1rem;
	top: 25%;
}
.fa-ellipsis-h li{
	padding: 4px;
	color: black;
	cursor: pointer;
	list-style: none;
	border-bottom: 1px solid grey;

}
.fa-ellipsis-h ul li i{
	color: black;
}
/*Current Playing Section*/
/*Visible on Clicking the latest song*/
/*It is visible at bottom of the screen*/
.current-playing{
	position: fixed;
	visibility: hidden;
	bottom: 0%;
	background-color: #2d2929ed;
	color: white;
	font-family: calibri;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	width: 100%;
	height: 7.5rem;
	z-index: 2;
}
.current-playing:target{
	visibility: visible;
}
/*Current Playing Left-Section*/
/*It includes Song Image, Name , Singer and Heart Icon*/
.curr-left{
	width: 30%;
	display: flex;
	align-items: center;
	justify-content: space-around;
	font-size: 140%;
}
/*Current Playing Song Image */
.curr-image{
	width: 30%;
	height: 100%;
}
.curr-image img{
	width: 100%;
	height: 100%;
}
/*Current Playing Song Name */
.curr-name-2{
	display: block;
}
/*Current Playing Mid-Section*/
/*It includes Many Buttonslike pause and play, length of the song*/
.curr-mid div{
	display: block;
}
.curr-mid{
	width: 30%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.mid-top{
	font-size: 200%;
}
.mid-bottom{
	font-size: 200%;
}
.mid-bottom{
	font-size: 200%;
}
.mid-bottom p{
	font-size: 55%;
}
.mid-bottom input{
	width: 10rem;
}
/*Current Playing Right-Section*/
/*It includes Miracast Icon, Volume Icon, and Playlist Icon*/
.curr-right{
	width: 30%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	font-size: 200%;      
}
/*Popular Artist Section*/
/*It also connects to new webpage*/
.popular-artists{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
/*Popular Artist Individual Card*/
.artist{
	position: relative;
	width: 14%;
	padding-bottom: 0px;
}
/*Popular Artist Individual Card Image*/
.artist img{
	width: 100%;
	text-align: center;
	border-radius: 50%;
}
/*Popular Artist Play Button*/
.fa-google-play{
	position: absolute;
	opacity: 0;
	left:34%;
	top: 20%;
	z-index: 3;
	color: white;
	font-size: 2.9rem;
}
.artist:hover .fa-google-play{
	opacity: 0.7;
}
/*Popular Artist Individual Details*/
.artist p{
	font-size: 120%;
	color: white;
	text-align: center;
}
/*Station Section*/
.station{
	width: 100%;
	display: flex;
	margin-top: 3rem;
	justify-content: space-between;
	font-size: 130%;
	font-weight: 900;
	background-color: #081352;
	padding:  4% 2%;
	border-radius: 20px;
	box-sizing: border-box;
}
/*Station Section Individual Song*/
.station-individual{
	text-align: center;
	color: black;
	text-shadow: 0px 0px 4px 10px green;
	width: 13%;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 5% 1%;
	padding-bottom: 2%;
    cursor: pointer;
	opacity: 0.8;
}
/*Station Section Song Details*/
.station p{
	color: white;
	text-shadow: 3px 3px  black;
	font-weight: bolder;
	opacity: 1 !important;
	margin: 0px;
	padding-bottom: 0px;
}
/*Station Section Images*/
.sta-1{
	background-image: url("images/station-0.jpg");
}
.sta-2{
	background-image: url("images/station-1.jpg");
}
.sta-3{
	background-image: url("images/station-2.jpg");
}
.sta-4{
	background-image: url("images/station-3.jpg");
}
.sta-5{
	background-image: url("images/station-4.jpg");
}
.sta-6{
	background-image: url("images/station-5.jpg");
}
/*Mood Section*/
.mood{
	margin-top: 3rem;
	width: 100%;
	display: flex;
	justify-content: space-around;
	overflow: hidden;
}
/*Mood Section Individual Songs*/
.mood-individual{
	position: relative;
   width: 30%;
   height: 10rem;
   color: white;
   font-size: 200%;
   text-align: center;
   box-sizing: border-box;
   overflow: hidden;
}
/*Mood Section Images*/
.mood img{
	width: 100%;
	height: 100%;
	transition: all;
	transition-duration: 0.3s;
	transition-timing-function: ease-in-out;
	cursor: pointer;
}
.mood img:hover{
	transform: scale(1.5);
}
/*Mood Section Song Details*/
.mood p{
	position: absolute;
	top:10%;
	left: 30%;
	text-shadow: 1px 1px black;
	font-weight: bolder;
}
/*Latest Chopaaiyan and Aarti Section*/
.latest-english{
	display: flex;
	justify-content: space-around;
	margin-bottom: 3rem;
}
/*Latest Chopaaiyan and Aarti Section Individual Cards*/
.latest-en-individual{
	width: 14%;
	color: white;
	cursor: pointer;
}
/*Latest Chopaaiyan and Aarti Section Images*/
.latest-en-individual img{
	filter: brightness(130%);
	width: 100%;
}
/*Latest Chopaaiyan and Aarti Section Song Details*/
.latest-en-individual p{
	padding: 0px;
	margin: 0px;
}
/*Queue Section*/
#q-song-name{
	font-weight: bolder;
}
/*Heart Icon*/
.heart{
	font-size: 1.6rem;
}
.heart:hover{
	color: red;
	cursor: pointer;
}
/*Queue Section Main Body Container*/
.queue-content{
	display: inline-block;
	width: 25%;
	height: 650px;
	overflow: scroll;
	margin:3% 0% 0% 1%;
	padding: 0px;
	padding-right: 20px;
	font-size: 1.1rem;
	background-color: #090921;
	z-index: 2;
}
/*Queue Section Heading- Heading and Queue Button*/
.queue-top{
	position: sticky;
	top: 0%;
	width: 95%;
	text-align: center;
	padding: 0px 10px;
	display: flex;

	color: white;
	justify-content: space-around;
	text-align: center;
	z-index: 10%;
	background-color: #090921;

}
/*Queue Section- Top Heading*/
.queue-top h1{
	padding: 0px;
	margin: 0px;
	font-size: 2.5rem;
}
/*Queue Section- Top Button*/
.queue-top button{
	cursor: pointer;
	background: transparent;
	border:none;
	color: #58b6e0;
	font-size: 1.2rem;
	position: relative;
}
.queue-top button:focus{
	outline: none;
}
.fa-chevron-down ul{
	padding:0px;
	width: 9rem;
	position: absolute;
	left: -40%;
	background-color: white;
}
.queue-top ul{
	display: none;
}
.queue-top button:focus ul{
	display: block;
}
.fa-chevron-down li{
	color: black;
	padding:0.5rem 0rem;
	list-style: none;
}
/*Queue Section Bottom - Containing Songs*/
.queue-bottom{
	cursor: pointer;
}

/*Queue Section Individual Songs*/
.queue-individual{
	display: flex;
	width: 100%;
	justify-content: space-around;
	align-items: center;
}

.queue-individual .queue-image{
	width: 25%;
	margin-right: 2%;
}

/*Queue Section Individual Songs- Images*/
.queue-individual .queue-image img{
	width: 100%;
	height: 100%;
}
.queue-name p{
	padding:0px;
	margin:0px;
	text-align: left;
}
/*Queue Section Left Containing Image and Song Name*/
.queue-left{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 80%;
	padding: 0px;
}
/*ScrollBars*/
::-webkit-scrollbar{
  width: 0.5rem;
}


::-webkit-scrollbar-track{
	background-color: transparent;
}

::-webkit-scrollbar-thumb{
  border-radius: 11px;
  background:  #1f2961; 
}

/* ----------------------------------------------------------------------- */
/*Media Queries For RESPONSIVENESS*/

@media screen and (max-width: 1100px){
	main{
		position: relative;
	}
	/*Queue Section*/
	.queue-content{
		display: none;
		text-align: center;
	}
	.queue-content:target{
	display: block;
    width: 96%;
    height: auto;
    z-index: 2;
    background-color: #090921;
    position: absolute;
    left: 0%;
    top: -1%;
	}
	
	.queue-bottom {
		font-size: 1.3rem;
	}
	.queue{
		margin-left: -40px;
	}
	.queue,
	.back{
		display: inline-block;
	}
	/*Fav Button*/
	.fav-main{
		position: absolute;
     display: none;
	}
	/*All Heart Icons*/
	.heart{
		font-size: 200%;
	}
    /*Header Left Including Logo and Name*/
	.header-left{
	margin-left: 2%;
	font-size: 1.2rem;
	}
	#logo i{
		font-size: 2.5rem;
	}
	#logo #studio-name{
		font-size: 1.3rem;
	}
	/*Header Right Search bar*/
	.search .icon{
	font-size: 80%;
         }
    /*Main Body Content*/
	.main-content{
		width: 100%;
		margin: 2%;
		font-size: 1.3rem;
	}
	/*Popular Artists Section*/
	.popular-artists{
		font-size: 0.8rem;
	}
	/*Current Playing Section*/
	.current-playing{
		font-size: 0.7rem;
	}
}
@media screen and (max-width: 900px){
	/*Current Playing Section*/
	.current-playing{
		font-size: 0.7rem;
	}
	.curr-mid,
	{
		font-size: 0.5rem;
	}
	.curr-mid input{
		width: 8rem;
	}
	.curr-right input{
		width: 5rem;
	}
}
@media screen and (max-width: 800px){
	/*Header Section*/
	/*Notifiaction*/
	.notification #my-pic{
		width: 3rem;
	}
	.notification .fa-bell{
		font-size: 1.2rem;
	}
	/*Favoutite Button*/
	#favourite{
		font-size: 1rem;
	}
	/*Artist Section*/
	.popular-artists .artist{
		width: 16%;
	}
	/*Staion Section*/
	.station p{
		font-size: 1.4rem;
	}
	/*Mood Section*/
	.mood{
		font-size: 1rem;
	}
	/*Latest Aarti and Choppaiyaan*/
	.latest-english{
		font-size: 1rem;
	}
}

@media screen and (max-width: 700px){
	/*Header Section*/
	.header-left{
		width: 40%;
	}

	.header-right img{
		width: 10rem;
	}
	/*Queue Section*/

	.queue{
		margin-left: 0px;
	}
	/*Current Playing Section*/

	.current-playing{
		height: 100px;
	}
	.curr-mid{
		font-size: 80%;
	}
	/*Latest Releases Section*/
	.latest-release{
		font-size: 1.2rem;
	}
	/*Station Section*/
	.station{
		padding: auto;
		font-size: 0.2rem;
	}
	.station p{
		font-size: 1rem;
	}
	/*Artist Section*/
	.artist{
		width:16%;
		font-size: 0.7rem;
	}
}

@media screen and (max-width: 600px){
	/*Main Content*/
	.main-content{
		font-size: 1rem;
	}
	/*Header Section -Logo*/
 .header-left #logo{
    font-size: 1rem;
 }
	/*Latest Release Section*/

 .latest-release{
 	font-size: 1rem;
 }
	/*Current Playing Section*/

 .curr-mid input{
 	width: 4rem;
 }
 .curr-left .curr-image{
 	width: 70%;
 }
 .curr-details{
 	margin-left: 10px;
 }
 .curr-right{
 	font-size: 0.8rem;
 	justify-content: center;
 }
 .curr-right input{
 	width: 30%;
 }
	/*Mood Section*/
 .mood{
 	font-size: 0.8rem;
 }
	/*Station Section*/
 .station{
 	padding-left: 2px;
 	padding-right: 2px;
 }
 .station-individual{
 	width: 16%;
	font-size: 0.8rem;
}
.station p{
	font-size: 150%;
}
}

@media screen and (max-width: 580px){
	/*Main Body Section*/
	body{
		width:560px;
	}
	/*Header Section*/
    header{
		width: 560px;
	}
	/*Queue Section*/
	.queue{
		font-size:0.5rem;
	}
	/*trending Section*/
	.trending{
		height: auto ;
	}
	/*Current Playing Section*/
    .curr-mid input{
 		width: 3rem;
	}
	
}