:root {
  --color-text-dark:  #FFF;
  --color-text-light: #000;
  --color-background-light:#FFF;
  --color-background-dark: #000;
  
  --theme-char: "\25CF";

  --background-color:  var(--color-background-light);
  --text-color: var(--color-text-light);
}

.dark {
  --background-color:  var(--color-background-dark);
  --text-color:  var(--color-text-dark);
  
  --theme-char: "\20DD";
  
}


html,body {
			width:100%;
			min-height: 100vh;
			margin:0;
			#text-size-adjust: none;
			background-color: var(--background-color);
			color: var(--text-color);
			font-family: "DejaVu Sans Mono", monospace;
			font-size: 135%;
			-moz-user-select:none;
			-webkit-user-select: none;
			cursor:cell; 
		}
		header {
			margin: 0 1%;
			}
		hr {
			border-top: 1px solid var(--text-color);

		}
		h1 {
		  font-size:5em;
		  margin:auto;
		  font-weight:bold;
		  #text-indent:-18px;
		  line-height:1em;
		  
		}
		#moto 	{
                        cursor:default;
		  	font-size:1em;
		  	font-weight:bold;
		    	padding: 0px 0 0 8px;
						cursor:none; 
		  	}
		   
		#metadata, #metadata a  {
		  font-size:.8em;
		  //background-color:var(--background-color);
		  color:var(--text-color);
		  padding:4px 0 0 8px;
		  line-height:2em;
		  text-decoration:none;
		  text-transform: capitalize; 
		  -moz-user-select: text;
		  -webkit-user-select: text;
		 }

		#metadata a {
		  cursor:help;
		}

		#metadata a:hover img {
		  background-color:var(--background-color);
		  color: var(--text-color);
		  height:1em;
		  text-decoration:underline;
		  cursor: help;		  
		}
		
		a[data-title]:hover::after {
        		content: attr(data-title);
        		z-index: 100;
        		background-color: rvb(204,204,204);
			color:var(--text-color);
		      }

		img {
		  -webkit-filter: invert(100%); /* safari 6.0 - 9.0 */
          		filter: invert(100%);
			height:20px;
		}
		
		#playbutton {
		  font-size: 1em;
		  line-height:1em;
		  background: transparent no-repeat !important;
		  color:var(--text-color) !important;
                  width: .8em;
		  border:none;
		  line-height:.5em
                  border: none !important;
                  cursor: pointer;
                  outline: none !important;
		}

		#pausebutton {
		  font-size:1em;
		  line-height:1em;
		  height: .8em;
  		  width: .8em;
		  background:transparent no-repeat !important;
          color:var(--text-color) !important;
 		  width: 0.8em;
		  border: none;
		  line-height:0.5em;
		  border: none !important;
    	  cursor: pointer;
    	  outline: none !important;
		}
		  
		.play-pause-button {
			background-color: var(--text-color) !important;
			padding: 0px 5px 1px 5px;
			user-select: none;
		}

		.metadata {
			padding-left: 10px;
			text-align: left;
			display:none;
		}

		.btn { 
			border: none; 
			padding: 2px 5px; 
			color:var(--text-color); 
			background-color: var(--background-color); 
			padding: 2px 2px; 
 			align-items:flex-end; 
			display: inline-flex;
		}
	
		.btn:hover {
			cursor:default;
//			background-color: var(--background-color)
		}

		.left {
			display:inline-flex;
			justify-content:center;	
			align-items:flex-start;
		}
		.host,.host a { 
			position:fixed; 
			bottom:5px; 
			right:5px; 
			font-size: .666em; 
			width:auto; 
			color: var(--background-color); 
			background-color: var(--text-color); 	
			font-weight: normal; 
			padding: 1px 4px;
			margin-right: 1%;
			text-decoration:none;
		}
		.host a:hover {
			background-color:var(--background-color);
			color:var(--text-color);
			text-decoration:underline;
		}

		#playbutton{
			display:flex-inline;
		}
		#pausebutton{
			display:none
		}
		fieldset {color: var(--text-color)}

		.piano-key {
			 -webkit-box-flex:1;
			 -ms-flex:1;
			 flex:1;
			 margin:0 .1rem;
			 max-width:8.8rem;
			 position:relative
		}
		.piano-keys {
			  display: flex;
			  list-style: none;
			  margin: 0;
			  padding: 0;
			  justify-content: center;
		}
		.piano-keys .key {
				#cursor: pointer;
				user-select: none;
				position: relative;
				text-transform: uppercase;
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				writing-mode: vertical-rl;
				text-orientation: upright;
				justify-content: center;
		}
		
		.piano-keys .white {
				font-size:.6em;
				color:var(--background-color);
				
		}	
		
		.piano-keys .black {
				font-size:.5em;
				color:var(--text-color);
		}		
		.piano-keys .black {
			  z-index: 2;
			  width: 15px;
			  height: 60px;
			  margin: 0 -7px 0 -7px;
                          border-left: 1px var(--text-color) solid;                                       
                          border-right: 1 px var(--text-color) solid;                                       
                          border-bottom: 1 px var(--text-color) solid;                                       
			  border-top: 1px var(--text-color) solid;
			  border-radius: 0 0 3px 3px;
			  background: var(--text-color);
		}
		.piano-keys .black.active {
			  box-shadow: inset -5px -10px 10px var(--background-color);
			  background:linear-gradient(to bottom, var(--text-color), #434343);
			  font-size:0.3em;
			  border-top:1px var(--background-color) solid;
		}
		.piano-keys .white {
			  height: 100px;
			  width: 30px;
			  border-radius: 0 0 8px 8px;
			  border: 1px solid var(--text-color);
			  background: var(--background-color);
			  #background: linear-gradient(var(--background-color) 96%, #111 4%);
		}
		.piano-keys .white.active {
			  box-shadow: inset -5px 5px 20px var(--text-color);
			  background:linear-gradient(to bottom, #ccc 0%, var(--background-color) 100%);
			  font-size:0.3em;
		}
		.piano-keys .key span {
			  position: absolute;
			  bottom: 20px;
			  width: 100%;
			  color: #A2A2A2;
			  font-size: 1.13rem;
			  text-align: center;
		}
		.piano-keys .key.hide span {
				display: none;
		}
		.piano-keys .black span {
			  bottom: 13px;
			  color: #888888;
		}

		#button, #playingnow {
			align-items: center;
			display:inline-flex;
		}

		#button {
			padding: 0 15px 0 6px;
			}		
		#playingnow {
			font-size: .8em;
		}

		.column {
			width: 100%;
			min-height: 1em;
			display:flex;
			margin: 0px auto 0px auto;
		}

		#streaminfo {
			font-size:.5em;
			line-height:1.0em;
			color:var(--text-color);
			margin: 8px 0 0 0;
			padding: 0;
			#justify-content:center;
			align-self:auto;
		}
		
		#streaminfoR  {
			text-align: right;
                        font-size:.5em;
                        color:var(--text-color);
                        line-height: 1.0em;
                        margin: 6px 0 6px auto;
                        padding: 0;
                        justify-content:center;
                        align-self:anchor-center;
                }

		.badge {
  			display: inline-block;
  			padding: 2px 6px;
  			font-size: 5px;
  			font-weight: bold;
  			color: #000;
  			background-color: #fff;
  			border-radius: 2px;
		}
		.star {
			font-size: 2em;
		}
    
	.theme:before {
            position: absolute;
            top: 0;
            right: 1%;
            cursor: pointer;
            padding: 10px;
            color: var(--text-color);
            font-size: 1em;
            content: var(--theme-char);
        }