:root {
  --color-text-dark:  #FFF;
  --color-text-light: #000;
  --color-background-light:#FFF;
  --color-key-active: #BEBEBE;
  --color-background-dark: #000;
  
  --theme-char: "\25CF";
  --piano-char: "\1F398"; //"\1D11E";
  --increase-char: "\1F5DA";
  --decrease-char: "\1F5DB";
  
  --background-color:  var(--color-background-light);
  --text-color: var(--color-text-light);
  
  --size1:10vw;
  --size2:1.33em;
  --size3: 1em;
}

.dark {
  --background-color:  var(--color-background-dark);
  --text-color:  var(--color-text-dark);
    
}
* {
  box-sizing: border-box;
} 

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: 12px;
			-moz-user-select:none;
			-webkit-user-select: none;
			zoom:1.0;
		}
		header {
			margin: 0 12px;
			line-height: 24px;
			letter-spacing:.045em;
			width: auto;
			display: flex;
			flex-direction: column;
			}
		hr {
			border-top: 1px solid var(--text-color);

		}
		h1 {
			margin-bottom: 0px;
		} 

		#toprow {
			display: flex;
			line-height: 100%;
			#flex-wrap: nowrap;
			justify-content: space-between;	
			color: var(--text-color);
			background-color: var(--background-color);
			align-items: center;
			border-bottom: var(--text-color) .1em dotted;
			padding-left: 12px;
		}
				
		#firstcol  {
			padding: 0;
			display: flex;
			width: 100%;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;			
			align-content: space-around;
			row-gap:25px;
			}
					
		#firstcol ul {
			display:flex;
			padding:0;
			margin:0;
			width:100%;
			align-items: center;
		}
		
		#firstcol ul li {
			margin-right:1em;
			list-style: none;
		}

		#secondcol {
			display: flex;
			align-content: space-between;
			flex-direction: row;
			align-items: flex-start;
			font-size: 1.5em;
			gap: 1.5em;
			padding-right: 12px;
  		}
  		
		title {
		  font-size:var(--size1);
		  margin:0px;
		  font-weight:bold;
		  #text-indent:-4px;
		  line-height:var(--size1);
		  justify-content: flex-start;
		  display: flex;
		}
		#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;
		  flex-direction: column;
		  display: flex;
		 }

		#metadata a {
		  cursor:help;
		  width:20px;
		}

		#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 {
		  background: transparent no-repeat !important;
		  /*! color:var(--text-color) !important; */
		  /*! border:none; */
		  font-size:var(--size2);
		  border: none !important;
		  cursor: pointer;
          outline: none !important;
		  text-indent: -4px;

		}

		#pausebutton {
		  background:transparent no-repeat !important;
          /*! color:var(--text-color) !important; */
		  /*! font-size:2emvar(--size2); */
		  /*! border: none; */
		  border: none !important;
    	  cursor: pointer;
    	  outline: none !important;
    	  text-indent: -4px;
		}
		  
		.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;
			z-index:999;
			border: 0.5px black solid;
		}
		.host a:hover {
			background-color:var(--background-color);
			color:var(--text-color);
			text-decoration:underline;
			border: 0;

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


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

	
		#playingnow {
			line-height: var(--size2);
			padding: 0;
		}

		.column {
			width: 100%;
			min-height: var(--size2);
			display:flex;
			margin: 0;
			flex-wrap: nowrap;
			flex-direction: column;
			flex-direction: column;
			gap:1.5em;
			/*! justify-content: center; */
			/*! align-items: center; */
		}

		#streaminfostatus {
			font-size:var(--size3);
			/*! color:var(--text-color); */
			padding: 0;
			display: flex;
			align-items: center;
		}
		#streaminfocodec {
			font-size:var(--size3);
			color:var(--background-color);
			padding: 0;
			display: flex;
		}
		
		#streaminfocodec:hover{
			color: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;
		}
		

		.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;
		}
		
		.font:before {
				display:flex;
				flex-direction:row-reverse;
				cursor: pointer;
				padding: 10px;
				content: "\1F5DA"; //var(--increase-char);
			}
		
		.theme:before {
				display:flex;
				flex-direction:row-reverse;
				cursor: pointer;
				padding: 10px;
				/*! color: var(--text-color); */
				content: var(--theme-char);
			}
		.piano:before {
				display:flex;
				flex-direction:row-reverse;
				cursor: pointer;
				padding: 10px;
				font-size: 1em;
				content: var(--piano-char);
			}
      
		 ul#piano {
			display:none;
		 } 
		 
		 #switch {  
				display:none;
				cursor: pointer;
				padding: 2px 2px 2px 2px;
				font-weight: bolder;
				font-size:0.65em;
				letter-spacing: 2px;
				align-items: center;
				border: 1px var(--text-color) solid;
				color : var(--text-color);
		 }  
		 
		 #switch:hover {
				background-color :   var(--text-color);
				color : var(--background-color);
		 
		 }
     
      /*
		.piano-key {
			 -webkit-box-flex:1;
			 -ms-flex:1;
			 flex:1;
			 margin:0 .1em 0 0;
			 max-width:8.8rem;
			 position:relative;
		}
		*/
		
				.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;
		}


		.piano-keys {
			  display: flex;
			  flex-wrap:wrap;
			  list-style: none;
			  margin: 0;
			  padding: 12px 0 0 0;
			  justify-content: flex-start;
		}
		.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:.65em;
				color:#000;
				
		}	
		
		.piano-keys .black {
				font-size:.65em;
				color:#000;
		}		
		.piano-keys .black {
			  z-index: 2;
			  width: 12px;
			  height: 70px;
			  margin: 0 -7px 0 -7px;
                          border-left: 1px #000 solid;                                       
                          border-right: 1px #000 solid;                                       
                          border-bottom: 1px #000 solid;                                       
			  border-top: 1px #000 solid;
			  border-radius: 0 0 4px 4px;
			  background: #FFF);
		}
		.piano-keys .black.active {
			  background:#DDD;
			  font-size:0.3em;
			  border-top:1px #000 solid;
		}
		.piano-keys .white {
			  height: 130x;
			  width: 20px;
			  border-radius: 0 0 4px 4px;
			  border: 1px solid #000;
			  background: #FFF;
		}
		.piano-keys .white.active {
);
			  background:#DDD;
			  font-size:0.65em;
		}
		.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;
		}

@media screen and (max-width: 475px) {
	
	#streaminfocodec,#count {
		display:none;
	}
	#firstcol {
		font-size: 1em;
	}
	
	#secondcol {
		gap:0em;
	}
	 .column
	  {
		flex-direction: column;
		column-gap:1.5em;
	 }
	 	
	#moto ,#streaminfoL,#streaminfoR,#playbutton,#pausebutton,#streaminfostatus,#streaminfocodec,#streaminfocodec
	{
		font-size: 1.25em; 
	}
	
	#streaminfoR
	{
		flex-direction: row;
		flex-wrap: wrap;
	}
	#streaminfostatus
	{
		margin:0;
	}
	
	#streaminfocodec
	{
		align-items: flex-start;
		margin:0;
	}
	
	#playbutton,#pausebutton 
	{
			font-size:1.25em;
	}
	 
	 .piano-keys 
	 {
		 flex-wrap: wrap;
		 
	 } 
}