@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700');

/*@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;1,700&display=swap');
*/


@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;700&display=swap');



@font-face{
	font-family: "Big Noodle Titling Oblique";
	src: url('http://chazu.arkku.net/files/font/big_noodle_titling_oblique.ttf');              
}

/*
@font-face{
	font-family: "Big Noodle Titling Oblique";
	src: url('/font_local/big_noodle_titling.ttf') format('truetype');              
}
*/

*, *:before, *:after {
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	zoom: reset;
}


html{
	xoverflow-y: scroll;
	overflow-x: hidden;
	padding:0px;
	margin:0px;
	width:100vw;  
	zoom: reset;
}
	
body{
	background-color:#2b2f34 ;  
	font-family: 'Roboto', sans-serif;
	xoverflow-y: scroll;
	overflow-x: hidden;
	padding:0px;
	margin:0px;	
	width:100vw;
	transition:all 0.3s;
	zoom: reset;
}

#content {
	font-size:1em;
	margin:auto;
	color:#DCEBDD; 
}


.darkener {
	width:100%;
	height:100%;
	position:absolute;
	background-color:rgba(0,0,0,0.6);
	z-index:-1;
}



#icon-list{
	position:relative;
	width:95vw;
	margin:auto;
	text-align:center;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	opacity:0;
	transition: opacity 1.5s;
}

#row-list{
	text-align:left;
	max-width:40vw;
	margin:auto;
	opacity:0;
	transition: opacity 1.5s;
}

#icon-list > .item{
	width: 180px;
	height:180px;
	aspect-ratio: 1/1;
	xheight: 280px;  
	margin: 15px;
	position: relative;  
    cursor:pointer;
	display:inline-block;
	border-radius:5px;

	
}

#icon-list > .item.playing{
	background-color:rgba(0,0,0,0.5);
	background-color: #1d1d1d;
}

/* make the track info to be on top of playing overlay */
#icon-list > .item.playing >.info{
	z-index:3;
	border:2px solid rgba(0,0,0,0); /* make the green border visible through */
}

#row-list > .item.playing{
	background-color: #1d1d1d;
}

#row-list > .item{
	border-bottom:1px solid #1d1d1d;
	width: 100%;
	height: 70px;  
	display:inline-block;
	padding:0px 0px 0px 10px;
	margin:0px;
	display: flex;
	align-items:center;
}

#row-list > .item > .info {
	color: #DCEBDD ;
	padding: 5px;
	display:inline-block;
	font-size:0.9em;
	margin-left:10px;
	letter-spacing:0.2px;
}

#icon-list > .item:active  {
	transform:scale(0.9);
}

#icon-list > .item > .info {
	color: #DCEBDD ;
	xbottom: 0;
	padding: 0px;
	text-align:center;
	width:100%;
	height:100%;
	transition: all 0.3s, border 0s;
	letter-spacing:0.2px;

	xborder:1px solid grey;
	
	xborder-radius:0px;
	position:absolute;
	display: flex;
	flex-direction: column;
	xjustify-content: center;
	xjustify-content: space-around;
	justify-content: end;
	xz-index:1;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
	overflow:hidden;
	white-space: nowrap;
	box-shadow: 0 0 1px transparent;
	
}

#icon-list > .item.playing > .info {
	xfilter:brightness(3);
}


#icon-list > .item > .info > .artist{
	xborder:1px solid red;
	border-radius: 0px 0px 4px 4px;
	padding:5px;
	bottom: 0;

	font-weight: 500;
	font-size: 1em;
    color:#d9d9d9;
	transition:all 0.05s;
	letter-spacing:0.3px;

	xposition:absolute;
	text-align:left;
	xdisplay:inline-flex;
	width:100%;

	xbackground-color:rgba(0,0,0,0.9);
	xoverflow:hidden;
	white-space: nowrap;

	xbackground: rgb(2,0,36);
	background: linear-gradient(90deg, rgba(2,0,36,1) 38%, rgba(0,0,0,0.510329131652661) 100%);


}
	
#icon-list > .item > .info > .track{
	xborder:1px solid red;

	padding:5px;
	xmargin-bottom:3px;

	font-weight: 400;
	font-size: 1em;
    color:#b3b3b3;
	transition:all 0.05s;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 4; /* number of lines to show */
	-webkit-box-orient: vertical;
	text-align:left;

	xposition:absolute;
	xbottom:29px;
	width:100%;
	white-space: nowrap;
	xbackground-color:rgba(0,0,0,0.9);

	xbackground: rgb(2,0,36);
	background: linear-gradient(90deg, rgba(2,0,36,1) 38%, rgba(0,0,0,0.510329131652661) 100%);
	
}

#icon-list > .item.playing > .info > .track{
	color:#1db954!important;
}

#icon-list > .item.playing > .info > .artist{
	xcolor:white!important;
	xborder:1px solid red;
}

#row-list > .item.playing > .info > .track{
	color:#1db954;
}



	

#row-list > .item > .info > .track{
	font-weight: 500;
	font-size: 1em;
    color:#ffffff; /* ffffff d9d9d9 */
	transition:all 0.05s;
	margin-bottom:5px;
	letter-spacing:0.3px;
	overflow:hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1; /* number of lines to show */
	-webkit-box-orient: vertical;
}

#row-list > .item > .info > .artist, #row-list > .item > .info > .album{
	font-weight: 400;
	font-size: 1em;
    color:#b4b4b4;
	transition:all 0.05s;
	display:inline-block;
	overflow:hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1; /* number of lines to show */
	-webkit-box-orient: vertical;
}





.item:active .artist, .item:active .track{
	color: #1db954;
}


.item > img.image{
	border-radius:5px;
	z-index: -1;
	-webkit-box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.55);
	-moz-box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.55);
	
	user-select:none;

	box-shadow: 0px 0px 20px 3px rgba(0,0,0,0.55);

}

#icon-list > .item > img.image{
	width: 100%;
	height: 100%;  
	xmargin-bottom:5px;
}

#row-list > .item > img.image{
	width: 40px;
	height: 40px;  
	display:inline-block;
	z-index: 1;
}


.item > .overlay, .item > .overlay-playing{
	position:absolute;
	opacity:0;
	z-index: 2;
	transition: all 0.10s ease-out;
	user-select:none;
	display:flex;
	align-items: center;
	justify-content: center;
}

/* make the big playing icon a bit higher to avoid it being under the track info */
#icon-list > .item > .overlay, #icon-list > .item > .overlay-playing > i {
	xborder:1px solid red;
	margin-bottom:50px;
}

.item > .overlay{
	background-color:rgba(0,0,0,0.6);
}
.item > .overlay-playing{

	background-color:rgba(0,0,0,0.6);
}



#row-list> .item>.overlay-playing {
	background-color:rgba(0,0,0,0.8);
}

.item.playing > .overlay{
	display:none;

}

.item > .overlay-playing {
	xbackground-color:rgba(0,0,0,0.8);
	border:2px solid #1db954
}


#icon-list > .item > .overlay, #icon-list > .item > .overlay-playing{
	width: 180px;
	height: 180px; 
	border-radius:5px;
}

#icon-list > .item > .overlay > i,  #icon-list > .item > .overlay-playing > i{
	font-size:5em;
	filter: drop-shadow(3px 3px 2px rgba(0,0,0,.9));
	color:white;
}



#row-list > .item > .overlay, #row-list > .item > .overlay-playing{
	width: 40px;
	height: 40px; 
	cursor:pointer;
}

#row-list > .item > .overlay > i, #row-list > .item > .overlay-playing > i{
	font-size:1.5em;
}
	
#icon-list > .item:hover .overlay, #row-list > .item:hover .overlay{
	transition: opacity 0.05s ease-in; opacity:1;
}



#icon-list > .item:active .overlay, #row-list > .item > .overlay:active {
	xtransition: opacity 0.05s ease-in; opacity:1;
	xtransform:scale(0.9);
}

#icon-list > .item.playing > .overlay-playing, #row-list > .item.playing > .overlay-playing{
	opacity:1;
}





.clearfix{
    clear:both
}

h1 {
	font-size: 40px;
	margin-bottom: 5px;
	margin-top: 0px;
	font-family: Arial;
}

h2 {
	font-size: 25px;
	margin-bottom: 5px;
	font-family: Arial;
}

h3{
	font-size: 		17px;
	margin-bottom:	3px;
}

.page-title{
	visibility:hidden;
}


.green{
	color:#1db954;
	padding:50px;
}

#toggle-video-wide{
    visibility:hidden;
}



#loading-icon-container {
	xborder:1px solid red;
	xwidth: 100vw;
	xheight: 70vh;
	z-index:6;
	display: flex;
	justify-content: center;
	align-items: center;
	color:#1db954;
	font-size:6em; 
	transition:opacity 0.3s;

	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	
	opacity:1;
	visibility:visible;
}

#loading-icon-container > #spinner-container > i {
	xborder:1px solid red;
	text-shadow: 0px 0px 5px rgba(0,0,0,0.8);
}


/* the big track view which shows large album art */
#track-view {
	xborder:1px solid lime;
	xbackground-color: #101010;
	background-color: rgb(45, 81, 127); /* use default blue color for the bg */
	z-index: 3;
	width:100%;
	position:fixed;
	text-align:center;
	xtext-shadow: 1px 1px 0px black;
	visibility:hidden;
	display:flex;
    align-items: center;
	xjustify-content: start;
	justify-content: center;

}

#track-view > #track-view-darkener {

	xz-index:-1;
}

#player-area > #player-area-darkener {
	xz-index:-1;
}



/* #track-view-playlist-info-container {
	xborder:1px solid green;
	xcolor:#727272;
	xposition:absolute;
	color: rgba(255,255,255,0.1);
	font-family:consolas, monospace;
	text-align:right;
	padding: 5px 5px 0px 0px;
	top:0;
	right:0;
	z-index:-1;
} */

#track-view > .info {
	xborder:1px solid red;
	width:100%;
	padding:30px 10px 50px 10px;

}
#track-view > .info > .image-container {
	xborder:1px solid green;
	width:100%;
	text-align:center; 
	xpadding: 10px;
	xmargin-top:5%;
	margin-bottom:20px;
}

#track-view > .info > .image-container > #track-view-image {
	xborder:1px solid orange;
	width:70%;
	max-width:60vh;
	max-height: 60vh;
	aspect-ratio: 1/1;
	display:inline-block;
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.7);
	box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
	image-rendering:crisp-edges;
	ximage-rendering:pixelated;
	xmix-blend-mode: difference;
	border-radius:5px;
}	


#track-view > .info > .name-container {
	xborder:1px solid green;
	width:100%;
	text-align:center;
	padding: 0px 20px 0px 20px;
	font-size:1.5em;
	font-weight:500;
	line-height: 2.5ex;
	xheight: 5ex; /* 2.5ex for each visible line */
	height: 2.5ex;
}

#track-view > .info > .name-container > #track-view-name {
	width:100%;
	text-overflow: ellipsis;
	overflow: hidden; 
	white-space: nowrap;
	display:block;
	color:#fffffd;
}

#track-view > .info > .artist-container {
	xborder:1px solid green;
	width:100%;
	text-align:center;
	margin-top:10px;
	color:#8a8a8a;
}

/*footer to add margin at the end of playlist */
#footer {
	width:100vw;
	height:300px;
	xoverflow:hidden;
}