html{
/*  background-image: linear-gradient(to top, red, violet);
  background: #153630;*/
  height: auto;
}

@font-face{
	font-family: Nyala;
	src: url(nyala.ttf);
}
@font-face{
	font-family: Remixable;
	src: url(REMIXABLE.ttf);
}
#sesh{
	display: none;
}
#darkBot{
	transform: translate(500px, 120px) rotate(180deg);  
}
#bBankB{
	transform: translate(0, 120px) scaleY(-1);
}
#flit{
	display: none;
}
svg{
	display: block;
}
#outlineAlone{
	display: none;
	pointer-events: none;
	/* filter: url(#imageOut);*/
}
.butbehind{
	fill: #888f;
	pointer-events: none;
}
.button0{
	fill: #0005;
	pointer-events: none;
	filter: url(#spotlight);
}
.button{
	z-index: 10000;
	fill: #534f;
	filter: url(#offsetMO);
}
.highlight{
	filter: url(#convolveMatrix1);
	fill: #6666;
	pointer-events: none;
}
.inner{
  fill: #000d;
  filter: url(#offset);
  pointer-events: none;
}
.bSym, .bESym, .bSSym{
  /*fill: #ffff;*/
	fill: #0c0701;	
	pointer-events: none;
	transition: 500ms;
}
g:hover>.bSym{
	fill: #650a;
}
g:hover>.bESym{
  fill: #f116;
}
g:hover>.bSSym{
  fill: #04f7;
}
g:active>.butbehind{
  fill: #000a;
}
g:active>.bSym, g:active>.bESym,
g:active>.bSSym{
	fill: #ddaf;
	transition: 0ms;
}
@scope (use:hover){
	:scope.button{
		fill: #423f;
	}
}
use:active.button{
  fill: #312f;
}
@keyframes plyB {
0% {fill: #293;}
100%{fill: #120;}
}
.bPlaying {
	animation-name: plyB;
	animation-duration: 1000ms;
	animation-direction: alternate-reverse;
	animation-iteration-count: infinite;
}
audio{
	position: absolute;
	display: none;
}
a{
	font-size: 30px;
	font-family: monospace;
}
a:link{
	color: hotpink;
}
a:visited{
	color: darkgoldenrod;
}

h1{
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: Nyala;
	font-size: 3rem;
	color: white;
}

body{
	margin-inline: 1%;
	overflow-y: scroll;
	overflow-x: clip;
	height: 100%;
	width: 90%;
}

#bBg {
	z-index: -10;
    display: block;
    position: absolute;
	min-height: 100%;
    background-image: radial-gradient(at -30% -10%, #fea5, #ff00);
    /* background-repeat: no-repeat; */
    top: -1px;
    left: -1px;
	width: -webkit-fill-available;
}
#vgr{
	margin: 1%;	
	width: 90vw;
}
#ground{
	z-index: -34;
    position: absolute;
    width: -webkit-fill-available;
    height: 150vh;
    top: -1px;
    left: -1px;
    background-image: linear-gradient( rgb(58, 34, 119), rgb(26, 46, 94) );
    background-position: 0%;
	background-repeat: no-repeat;
    background-size: 150vw, 150vh;
}


.itrf{
	background-image: conic-gradient(from 269.27deg at -54% -14.7%, #fff0 54.34%, #dff8 54.39%, #fff0 54.42%, #ff00 54.43%, #0ff0 54.44%, #fcfa 54.48%, #ff00 54.52%);
    background-size: 5150vw 5150vh;
	border: 5px ridge #050405;
	margin: 1%;
	display: flex;

}

#interfaceWrapper{
	display: grid;
	width: 100%;
	grid-gap: 6px;
	grid-template-areas: 
	'hdr hdr hdr hdr hdr hdr hdr hdr hdr'
	'plT plT plT plT plT plT plT plT plT'
	'bBl bBl bBl bBl bBl bBl bBl bBl stT'
	'bBl bBl bBl bBl bBl bBl bBl bBl ...'
	'bBl bBl bBl bBl bBl bBl bBl bBl crT'
	'bBl bBl bBl bBl bBl bBl bBl bBl ...'
	'bBl bBl bBl bBl bBl bBl bBl bBl enT'
	'bBl bBl bBl bBl bBl bBl bBl bBl ...'
	'bBl bBl bBl bBl bBl bBl bBl bBl ...'
	'bBl bBl bBl bBl bBl bBl bBl bBl ...'
	'bBl bBl bBl bBl bBl bBl bBl bBl ...';
}

#header{
	grid-area: hdr;
}
#playTime{
	background-size: 46350px 46478.8px;
	width: 98%;
	grid-area: plT;
	display: flex;
	align-items: center;
	flex-direction: row;
	border: ridge 7px #090A0A;
}

/*#DOMTimeBar{
	padding-inline-end: 0%;
	width: 100%;
	margin-inline-end: 0;
	max-height: 200px;
	min-height: 80px;
}*/
#timeBlock{
	background-size: 46350px 45191.2px;
     background-position: 0% 0.12%;
    border-radius: 20% 0% 0% 20% / 20% 0% 0% 20%;
    position: relative;
    isolation: isolate;
    width: 30vw;
    height: 100%;
    margin-block-start: 16%;
   padding-inline-start: 9%;
    /*margin-inline-start: -25%;*/
    right: -25%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-around;
}
.timers{
    width: 101%;
    border-radius: 10% 0% 0% 5% / 30% 0% 0% 20%;
    border: 5px ridge #05040550;
    background-color: #001d05aa;
    /* padding-inline: 1rem; */
    display: flex;
    position: relative;
    right: 5%;
    padding-block: 1.0rem;
    margin-block: 2%;
    margin-inline: 3%;
    height: 1.12em;
    font-family: monospace;
    justify-content: flex-start;
	padding-inline-start: 3vw;
    font-size: 1.5rem;
    /* align-content: space-between; */
}

#playTimer{
	grid-area: crT;
	color: #ff8;
}

#startTimer{
	grid-area: stT;
	color: #04f;
}
#endTimer{	
	grid-area: enT;
	color: #f00;
}


#blockFuck{

display: block;
width: 100%;
height: fit-content;
margin-block: 0% 2%;
padding-block: 0;
	
}

#fuckBlock{
    /* background: darkgray; */
    border-radius: 0% 60% 10% 0% / 10% 30% 15% 10%;
    position: relative;
    isolation: isolate;
    width: 50vw;
    left: -5%;
    margin-inline: 0% 0%;
    margin-block: -5% 0%;
    padding-inline: 5% 8%;
    padding-block: 6%;
    /* background-image: none; */
    background-size: 46350px 45191.2px;
    display: flex;
    flex-direction: column;
    justify-content: revert;
    align-items: baseline;
    /* border: 5px ridge #fff7; */
    outline: 5px double #0009;
    outline-offset: -7px;
    /* outline-width: medium; */
    border-color: #57f4 #48f4 #37f4;
    border-style: groove solid inset outset;
    border-width: 15px 5px 5px 10px;
}
#buttonBlock{

	grid-area: bBl;
	margin-top: 5%;
	width: 100%;
	height: 100%;
	border: none;
}

#keywrapper{
	position: relative;
	left: 0;
	width: 100%;
	height: 3em;
	border: none;
	background-image: none;
	margin-block-start: 1%;
	margin-block-end: 1%;
	margin-inline: .5%;
	border: ridge 7px #090A0A;
	background-image: linear-gradient(20deg, #031401 0%,  #002801 17%,  #031401 20%, #021000 100% );	
}
#thisKey{
	position: absolute;
	display: flex;
	color: #1f3;
	font-size: 1.5rem;
	/*font-family: "Courier New";*/
	font-family: Remixable;
	align-items: center; 
	justify-content: space-around;
	width: 100%;
	height: 3rem;
	text-shadow: 0 0 3px #afa

}
/*#thisKey::after{
	content:;
	left: 0;
	width: 100%;
	height: 100%;
}*/

@keyframes wGlow{
0%	{opacity: 1;}
100%	{opacity: .5;}
}