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

  --background-color:  var(--color-background-light);
  --text-color: var(--color-text-light);
  
  --size1:12vh;
  --size2:.9em;
  --size3:.666em;
}

.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;
			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;
		}
		header {
			margin: 0 1%;
			line-height: 24px;
			letter-spacing:.045em;
			width: auto;
			max-width:1535px;
			}
		hr {
			border-top: 1px solid var(--text-color);

		}
		h1 {
		  font-size:var(--size1);
		  margin:auto;
		  font-weight:bold;
		  text-indent:2px;
		  line-height:var(--size1);
		  
		}
		#moto 	{
		  	font-size:var(--size2);
		  	font-weight:bold;
		    padding: 0px 0 0 8px;
			cursor:none; 
		  	}
		   
		#metadata, #metadata a  {
		  color:var(--text-color);
		  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: var(--size2);
		  line-height:var(--size2);
		  background: transparent no-repeat !important;
		  color:var(--text-color) !important;
		  border:none;
		  line-height:var(--size3);
		  border: none !important;
		  cursor: pointer;
          outline: none !important;
		}

		#pausebutton {
		  font-size:var(--size2);
		  line-height:var(--size2);
		  background:transparent no-repeat !important;
          color:var(--text-color) !important;
		  border: none;
		  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-start;
			/* display: inline-flex; */
		}
	
		.btn:hover {
			cursor:default;
		}

		.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 .01rem;
			 max-width:8.8rem;
			 position:relative;
		}
		.piano-keys {
			  display: flex;
			  flex:10;
			  list-style: none;
			  margin: 0 0 0 7px;
			  padding: 0;
			  justify-content: start;
		}
		.piano-keys .key {
				cursor: none;
				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: start;
		}
		
		.piano-keys .white {
				font-size:.6em;
				color:#000; 
				
		}	
		
		.piano-keys .black {
				font-size:.5em;
				color:#000;
		}		
		.piano-keys .black {
			  z-index: 2;
			  width: 15px;
			  height: 80px;
			  margin: 0 -8px 0 -8px;
			  border-bottom: 1px solid var(--background-color) ;                                       
			  border-top: 1px solid var(--color-background-dark) ;
			  border-radius: 0 0 4px 4px;
			  background: var(--color-background-dark);
		}
		.piano-keys .black.active {    
			  border-bottom: 1px solid var(--text-color) ;                                       
			  background: var(--color-key-active);
			  border-top:1px var(--color-background-light) solid;
		}
		.piano-keys .white {
			  height: 140px;
			  width: 28px;
			  border-radius: 0 0 8px 8px;
			  border: 1px solid var(--color-text-light);
			  background: var(--color-background-light);
		}
		.piano-keys .white.active {
			  background: var(--color-key-active);
		} 
		.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;
		}

		#button {
			width: 25px;
			display: flex;
			align-items: center;
			}		
		#playingnow {
			line-height: var(--size2);
			padding: 0;
		}

		.column {
			width: 100%;
			min-height: var(--size2);
			display:flex;
			margin: 0 5px 0 7px;
			flex-wrap: nowrap;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}

		#streaminfostatus {
			font-size:var(--size3);
			line-height:var(--size2);
			color:var(--text-color);
			margin-left: 10px;
			padding: 0;
			display: flex;
			align-items: center;
		}
		#streaminfocodec {
			font-size:var(--size3);
			line-height:var(--size2);
			color:var(--text-color);
			margin-left: 10px;
			padding: 0;
			display: flex;
			align-items: center;
			border-right: 1px solid var(--text-color);
		}
		#streaminfoL {
			font-size:var(--size3);
			line-height:var(--size2);
			color:var(--text-color);
			padding: 0;
			flex:7;
			align-self: flex-start;
			display: inline-flex;
		}
		#streaminfoR  {
			color:var(--text-color);
			line-height: var(--size2);
			padding: 0;
			margin: 0 7px 0 0;
			display: inline-flex;
			align-self: flex-start;
			justify-content: flex-start;
			flex: 3;
			flex-direction: row-reverse;
			}

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


 @media screen and (orientation:portrait) {
	 
	 .piano-keys {
		 flex-wrap: wrap;
		 max-width:780px;
		 flex:5;
		 
	 } 
}