html {
		min-height: 100%;
		background-size: cover;
		background-image: url(/img/cbbg.jpg);
		background-repeat: no-repeat;
		background-position: right bottom;
		background-attachment: fixed;
	}

	h1, p {
		color: white;
		text-shadow: black 0.1em 0.1em 0.2em;
		font-size: 21px;
		font-family: "Oswald", sans-serif;
		text-align: center;
		margin: 0 0 10px 0;
	}
	
	h2 {
		color: white;
		text-shadow: black 0.1em 0.1em 0.2em;
		font-family: "Oswald", sans-serif;
		text-align: center;
	}

	.loading {
		width: 100%;
		z-index: 10;
		top: 0;
		left: 0;
		position: fixed;
		display: flex;
		height: 100%;
		background: linear-gradient(45deg, black, #32002a);
   		justify-content: center;
		flex-direction: column;
		align-items: center;
	}
	
	#allSongs {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}
	
	.lyrics {
		position: fixed;
		top: 100px;
		left: calc(50vw - 400px);
		background: linear-gradient(0deg, #333333, #1c0d1a);
		width: 0;
		height: 0;
		overflow-y: scroll;
	  	text-shadow: none;
		font-weight: 800;
		line-height: 0;
		padding: 0 1em;
		color: transparent;

		/* -webkit-text-stroke: 1px black; */
		text-align: center;
		/* animation: glow 1s ease-in-out infinite alternate; */
		font-size: 20px;

		transition: all .75s ease-in-out;
	}

  	.lyrics.active {
		z-index: 23;
		width: 800px;
		height: 600px;
	   	border: 1px solid white;
		line-height: 1.5;
		padding-top: 1em;
		padding-bottom: 1em;
		color: white;
  	}

	.lyrics .spacer {
		background-color: white;
		width: 300px;
		margin-top: -4px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 16px;
		height: 3px;
	}

	@-webkit-keyframes glow {
		from {
			text-shadow: 0 0 4px #ffffff80, 0 0 6px #ebd302b3, 0 0 8px #ebd302b3, 0 0 10px #ebd302b3, 0 0 12px #ebd302b3, 0 0 14px #ebd302b3, 0 0 16px #ebd302b3;
		}
	  
		to {
			text-shadow: 0 0 4px #ffffffb3, 0 0 6px #fae00280b3, 0 0 8px #fae00280, 0 0 10px #fae00280, 0 0 12px #fae00280, 0 0 14px #fae00280, 0 0 16px #fae00280;
		}
	}
	
	.download-btn {
		background-image: url(/img/download.svg);
		background-repeat: no-repeat;
		background-size: cover;
		width: 32px;
		height: 32px;
	}
	
	.slider-cont {
		width: 89%;
		display: flex;
		flex-direction: column;
		margin: 0 20px;
	}
	
	.vol-slider {
		cursor: pointer;
		position: relative;
		border-radius: 4px 4px 0 0;
		width: 32px;
		height: 100%;
		background: lightgray;
	}
	
	.vol-slider .vol-progress {
		border-radius: 8px 8px 0 0;
		width: 100%;
		height: 100%;
		bottom: 0;
		position: absolute;
		background: linear-gradient(#ffbb3e, #519b00);
		pointer-events: none;
	}
	
	#sound-logo {
		z-index: 23;
		pointer-events: none;
		width: 32px;
		height: 32px;
		position: absolute;
		bottom: -12px;
		background-image: url(/img/sound.svg);
		background-size: contain;
		background-repeat: no-repeat;
	}

	#general-player {
		user-select: none;
		z-index: 999;
		border-radius: 20px 0px 10px 0;
		height: 64px;
    	background: #3d3d3d;
    	position: fixed;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
    	width: 100%;
    	bottom: 0;
	}

	.playpause {
		height: 100px;
	}
	
	.playpause.small {
		height: 36px;
		margin: 0px 24px 0 36px;
	}
	
	.close-btn {
		position: absolute;
		right: 0;
		overflow: visible;
		height: 32px;
		width: 32px;
	}
	
	#time {
		font-size: 16px;
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: space-between;
	}
	
	#time #length {
		float: right;
	}
	
	#time span {
		margin: 0px 4px;
		text-shadow: 3px 1px 0px black;
	    font-weight: 800;
	}
	
	#general-player .slider {
		background-color: white;
		border-radius: 2px;
		cursor: pointer;
		height: 32px;
		position: relative;
		width: 100%;
	}
	
	#general-player .slider .progress {
		background: linear-gradient(#ff4700, #815300);
		height: 100%;
		pointer-events: none;
		position: absolute;
		width: 0;
	}
	
	#general-player .slider .progress .pin {
		height: 40px;
		width: 16px;
		top: -5px;
		right: -8px;
		border-radius: 8px 0 8px 0;
		background: lightgrey;
		position: absolute;
		pointer-events: all;
	}

	.playpause label {
		margin: auto;
  		display: block;
  		box-sizing: border-box;
 		width: 0;
  		height: 74px;
 		border-color: transparent transparent transparent #ff8888;
 		transition: 120ms all cubic-bezier(0.4, 0, 1, 1);
 		cursor: pointer;
		border-style: solid;
  		border-width: 37px 0 37px 60px;
	}
	
	.playpause.small label {
		height: 36px;
		border-width: 17px 0 17px 30px;
		border-color: transparent transparent transparent #bb88ff;
	}

	.playpause input[type=checkbox] {
		visibility: hidden;
	}

	.playpause input[type=checkbox]:checked + label {
  		border-style: double;
  		border-width: 0px 0 0px 60px;
	}
	
	.playpause.small input[type=checkbox]:checked + label {
  		border-width: 0px 0 0px 30px;
	}

	.song-content-square {
		display: flex;
		border: 2px lightgrey solid;
		border-radius: 14px;
		flex-wrap: nowrap;
		flex-direction: column;
		justify-content: center;
		margin: auto;
		width: 25vw;
		height: 350px;
		background: radial-gradient(#000000, #323232);
		
	}
	
	.song-container {
		display: inline-block;
		width: 32vw;
		margin: 24px 0px;
		margin-bottom: 32px;
	}
	
	.audio-container {
		display: none;
		justify-content: center;
		flex-wrap: wrap;
		margin: 25px;
	}
	
	audio {
		width: 80%;
	}

	/*
	audio::-webkit-media-controls-play-button {
	  -webkit-appearance: none;
	  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAQCAMAAAD3Y3VMAAAAGFBMVEXqgWTqgWTqgWTqgWTqgWTqgWTqgWTqgWSqmnHoAAAAB3RSTlMAAQOQkaipUd1d4wAAADBJREFUeAFjYGBgZGSAAUZmZkY4k50dxmFiY6eIw8QKZLMwkspkYGSBMKEcGBPZzQCV0AGPVdxMxgAAAABJRU5ErkJggg==) 50% 50% no-repeat;
	}
*/
	audio::-webkit-media-controls-current-time-display,	audio::-webkit-media-controls-time-remaining-display {
	  color: white;
	}
	
	audio::-webkit-media-controls-panel {
		background: url(/img/wallpurple_medium.jpg) no-repeat center center fixed;
		background-size: cover;
	}