/* This file container some extra styles used for Playlist page */

/* Main - Main contains the primary body*/
main{
	margin-top: 0.83em;
}

/*Heading - Playlist name (ColdPlay)*/
.heading{
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.album-info-subtitle{
	font-size: 1.1rem;
	font-weight: 500;
}

.album-text-color{
	color: #828599;
	
}

.album-info-container{
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background-color: rgba(16,21,66, 0.8);
	margin-bottom: 1rem;
}

.album-info-image{
	position: relative;
	width: 35%;
}

.album-info-image img{
	width: 100%;
	opacity: 0.8;
}

.album-info-img-gradient{
	position: absolute;
	width: 100%;
	top: 50%;
	height: 50%;
	background: linear-gradient(rgba(16,21,66,0),rgba(16,21,66,1));
}

.album-info-description{
	width: 65%;
	padding: 1rem;
	box-sizing: border-box;
}

.album-info-title{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.album-info-description p{
	font-size: 0.9rem;
}

.album-buttons{
	display: flex;
}

.album-info-button{
	font-weight: bold;
	height: 2.5rem;
	width: 8rem;
	position: relative;
}

.play-all-button-bg{
	background-image: linear-gradient(to right, blue , hotpink);
}

.album-info-button>span{
	position: absolute;
	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
}

/* PLAYLIST */

/*Song List (List of song in the album)*/
/* This div container whole list of songs*/
.album-songs{
	display: flex;
	flex-direction: column;
	width: 100%;

}

/* Container for each song (Style)*/
.song-container{
	display: flex;
	width: 100%;
	background-color: #202439;
	opacity: 0.9;
	height: 4rem;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding:0.5rem 1rem;
	margin: 0.25rem 0rem;
	box-sizing: border-box;
	cursor: pointer;
	
}

.playlist-song-info{
	height: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;

}

.playlist-song-info>span{
	font-size: 0.9rem;
	color: #C0C0C0;
}

.playlist-song-info img{
	height: 100%;
	margin: 1rem;
}

.playlist-song-title{
	height: 90%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.playlist-song-title>div{
	font-size: 1.1rem;
	font-weight: bold;
}

.playlist-song-end i{
	margin-right: 1.5rem;
}


/* ASIDE Section */
/* Side Section with Recently Played & Similar Artist */
aside{
	display: flex;
	flex-direction: column;
}

/*Common for both Similar Artist and Recently Played*/
.side-item{
	display: flex;
	flex-direction: column;
	width: 95%;
	margin-left: 2.5%;
	margin-right: 2.5%;
}

.queue-heading div{
	color: white;
}

.similar-artist-container{
	display: flex;
	flex-direction: column;

}

.similar-artist-container>div{
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

.latest-release-item{
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.similar-artist-item{
	display: flex;
	align-items: flex-start;
}

.play-icon-onhover img{
	box-shadow: 0px 5px 5px 2px rgba(250, 0, 0, 0.15);
}

.similar-artist-title{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-self: center;
	font-size: 0.9rem;
	height: 3rem;
	margin-left: 1rem;
}

.similar-artist-item-end{
	display: flex;
	height: 100%;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-end;
}

.subtitle{
	font-size: 0.8rem;
}

.recent-song-list{
	margin-top: -0.5rem;
}