@font-face {
  font-family: 'Montserrat';
  font-weight: 400;
  font-style: normal;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url('https://punklabs.com/shared/fonts/Montserrat/Montserrat-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Montserrat';
  font-weight: 700;
  font-style: normal;
  src: local('Montserrat Bold'), local('Montserrat-Bold'), url('https://punklabs.com/shared/fonts/Montserrat/Montserrat-Bold.woff') format('woff');
}

body {
	margin: 0;
	padding: 0 0 10px 0;
/*	background: url(/images/header.jpg) no-repeat center fixed; */
/*	background: radial-gradient(#ffffff, #d9e3a7, #4e9877) no-repeat center fixed; */
/*	background-color: #86b990; */
	background: radial-gradient(#ffffff, #625f74, #0c1729) no-repeat center fixed;
	background: url(/images/header4.jpg) no-repeat center fixed;
	background-color: #625f74;
	background-size: cover;
	font: 18pt 'Montserrat', Verdana, Helvetica, Arial, sans-serif;
	color: #eee;
	text-align: center;
}

@supports (-webkit-touch-callout: inherit) { /* Mobile touchscreens */
	body {
		background-image: initial;
/*		background: radial-gradient(#ffffff, #d9e3a7, #4e9877) no-repeat center fixed; */
    	background: radial-gradient(#ffffff, #625f74, #0c1729) no-repeat center fixed;
		background-size: initial;
	}
}

a, a:link {
	color: #22e5cf;
}
a:visited {
	color: #ff77bb;
}
#AsciiWrapper {
	text-align: center;
}
#AsciiLogo {
	display: inline-block;
	text-align: left;
	font-size: 1.5vw;
	font-weight: bolder;
	text-shadow: 0px 3px 3px #000000ff;
	color: #fff;
	user-select: none;
	pointer-events: none;

	/*overflow: hidden;*/
	
	/*
	background-color: #00000033;
	border-radius: 0 35px 0 35px;
	padding: 15px;
	*/

	/*
	position: fixed;
	top: 0;
	left: 25%;
	z-index: 999;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	*/
}
#Main {
	min-width: 600px;
	display: inline-block;
	max-width: 1135px;
	text-align: center;
	/* padding-top: 150px; */
}
#Heading {
	text-shadow: 2px 2px 5px #000000ff;
	font-weight: bold;
}
#Bio {
	background-color: #33333366;
	border-radius: 20px;
	padding: 5px;
	margin: 0 12px;
}
#Footer {
	font-size: 14pt;
	font-weight: bold;
	text-align: center;
	text-shadow: 2px 2px 3px #000000ff;
}
#Player {
	display: none;
	position: fixed;
	z-index: 999;
	left: 0px;
	bottom: 0px;
	width: 100%;
	padding: 5px 0;
	background-color: #ff4678;
	border-top: 2px solid #eee;
	filter: drop-shadow(0px 0px 10px #00000088);
	font-size: 16pt;
	text-align: center;
}
#Player .Links {
	background-color: #fff700;
	padding: 3px;
	margin: 4px;
	border-radius: 5px;
}
#Player .Links, #Player a, #Player a:link, #Player a:visited {
	font-size: 14pt;
	color: #000;
	font-weight: bold;
	text-shadow: none;
}
#CurrentTrack {
	color: #fff;
	font-weight: bold;
	text-shadow: 2px 2px 5px #00000088;
}
#Player .AudioWrapper {
	margin: 0 15px;
}
#Player audio {
	width: 90%;
	height: 50px;
	margin: 5px 10px 20px 10px;
	border-radius: 5px;
}
#PlayerPadding {
	display: none;
	height: 155px;
}
#AlbumList {
}
.Album {
	width: 500px;
	margin: 10px;
	padding: 20px;
	display: inline-block;
	vertical-align: top;
	background-color: #666;
	border-radius: 10px;
	filter: drop-shadow(0px 8px 10px #00000088);
}
.Album img.Cover {
	width: 350px;
	min-height: 250px;
	filter: drop-shadow(0px 6px 6px #00000055);
}
.Album .Title {
	font-size: 18pt;
	font-weight: bold;
}
.Album .Info {
	font-size: 12pt;
	font-style: italic;
}
.Album .Links, .Album a, .Album a:link, .Album a:visited {
	font-size: 14pt;
	color: #ddd;
}
a.Track, a.Track:link, a.Track:visited {
	font-size: 14pt;
	color: #eee;
	text-decoration: none;
}
.Tracklist {
}

.Track {
	margin: 5px;
	padding: 10px;
	display: block;
	background-color: #222;
	border-radius: 5px;
	text-align: left;
	font-size: 15pt;
	filter: drop-shadow(0px 2px 2px #00000044);
}

.Promoted.Album {
	background-color: #22e5cf;
}
.Promoted .Title, .Promoted .Info, .Promoted .Links, .Promoted .Links a, .Promoted .Links a:link, .Links .Promoted a:visited {
	color: #333;
}
.Promoted a.Track, .Promoted a.Track:link, .Promoted a.Track:visited {
	color: #fff;
}
.Promoted .Track {
	background-color: #ff4678;
	color: #fff;
	text-shadow: 1px 1px 3px #000000ff;
	
}

.Track.Bonus, .Track.Promoted, .Track.Favorite {
	background-color: #186;
	text-shadow: 1px 1px 3px #000000ff;
}

a.Track.Active, a.Track.Active:link, a.Track.Active:visited {
	background-color: #fff700;
	font-weight: bold;
	color: #000;
	text-shadow: none;
	position: relative;
	left: -5px;
	/* Animated Stripes */
	background-image: linear-gradient(
	-45deg, 
	rgba(0, 0, 0, .1) 25%, 
	transparent 25%, 
	transparent 50%, 
	rgba(0, 0, 0, .1) 50%, 
	rgba(0, 0, 0, .1) 75%,
	transparent 75%, 
	transparent
	);
	background-size: 50px 50px;
	animation: Playing 4s infinite steps(60); /* 60 / 4sec = 15fps */
	animation-play-state: paused;
}

.Playing a.Track.Active, .Playing a.Track.Active:link, .Playing a.Track.Active:visited {
	animation-play-state: running;
}

@keyframes Playing {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: -50px -50px;
	}
}