/* THEMES */
:root{
    --icol:#CCC;
    --txtcol:#444;
    --subtxtcol:#AAA;
    --hcol:#F36;
    --bgcol:#FFF;
}
:root.dark{
    --icol:#555;
    --txtcol:#CCC;
    --subtxtcol:#999;
    --hcol:#F36;
    --bgcol:#222;
}
*{box-sizing: border-box;}
.fr{float: right;}
.hidden{display: none!important;}
body { overflow:hidden; background:var(--bgcol) url(../media/logo-light.png) no-repeat bottom 20px right 30px; font-family:Roboto, Arial, sans-serif; transition:background-color 500ms; margin: 0; padding: 0}
.dark body{background-image: url(../media/logo-dark.png);  line-height: 140%}
#bg{ opacity:0; width: 100%; height: 100%; transition: opacity 3s; animation: movebg 15s infinite;}
	:root:not(.bgCols) #bg{ opacity:0!important;}
#canvas { position:fixed; z-index: 0; left:50%; top:50%; transform:translate(-50%,-50%);}
	.reverseX #canvas{ transform:translate(-50%,-50%) scaleX(-1);}
h1{font-weight: 900; font-size:34px}

.disc{position: absolute; background-color: #9995; /*border:solid 10px #0002;*/ border-radius: 50%; width: 100px; height: 100px; will-change:transform, left, top, opacity;  transition: filter 500ms}
#menu{ position: fixed; z-index: 1; left:20px; bottom: 30px; width: calc(100% - 190px);}

	.spacer{background:rgba(0,0,0,0.1); line-height:30px; text-align:center; border-radius:50px; display:inline-block; padding:0 40px; margin:30px auto 20px;}
    #menu button{width:30px; height: 30px; background: var(--bgcol); border-radius:50px; border: solid 2px var(--icol); color: var(--subtxtcol); padding: 0; line-height: 28px; outline:none; z-index: 1; position: relative;font-size: 20px;  vertical-align: middle;}
    #menu button .material-icons{font-size: 16px}
    #menu button:active{ border-color: var(--hcol); color: var(--hcol)}
    #menu button+button{margin-left:7px;}

    #vMeter{display:inline-block;width:100px;height: 11px;overflow: hidden;padding: 0 2px;margin:-2px -5px;z-index: 0; position: relative;}
        #vMeter:before{content:'';position:absolute; width:100%; border-bottom:dotted 4px var(--icol); margin:3px 0;}
        #vMeter span{background: var(--icol);border: solid 2px var(--bgcol);height:100%;border-radius: 0 10px 10px 0;display: block;z-index: 0;position: relative; transition: width 300ms,background-color 800ms}
        #vMeter span.on{background-color: var(--hcol); transition: width 300ms,background-color 200ms}
     #debugPane{position: fixed; bottom: 0px; left: 0px; font-size: 10px; padding:0 10px; color:var(--icol)}
        #debugPane div{display: inline-block; padding: 10px;}

	.popup { font-size:13px; position:fixed; background:var(--bgcol); border:solid 5px var(--icol); border-radius:40px; color:var(--txtcol); top:50%; left:50%; padding:20px 50px 50px; z-index:5; transform:translate(-50%,-50%) scale(0.7); opacity:0; pointer-events:none; transition:transform 300ms, opacity 300ms; text-align:center; min-width:850px; max-width:1000px; width:90%; }
		.popup.on { transform:translate(-50%,-50%); opacity:0.95; pointer-events:all; }
		.half{width: 50%; float: left;}
		.third{width:33%; float: left;}
		.popup h1{margin-bottom: 0;}
        .closebtn{ color:var(--bgcol); background: var(--icol); width: 24px; height: 24px; line-height: 24px; font-weight: bold; text-decoration: none; border-radius: 50%; text-align: center; font-size: 10px; margin: -0px -30px}
        .closebtn:active{background: var(--hcol);}
        #menu label{display: block; border-radius: 50px; line-height: 40px; text-align:left; padding-left:10%;}
        #menu label:hover{background:#0001;}
        label button{margin-right: 7px;}
        button.check:before{content:'check_circle';font-family: 'Material Icons';font-size:16px; line-height:16px;}
        #menu button.check{transform:scale(0.9); opacity: 0.8; transition:transform 300ms}
        #menu button.check:hover{color:var(--hcol);}
        #menu button.check.on{background:var(--hcol); color: #FFF;opacity:1; border-color:#FFF2; transform:scale(1)}
		#devices{color:#AAA; font-style:italic; font-weight:bold;}

@keyframes shrink {
  100% {transform: scale(0.02); }
}
@keyframes grow {
  0% {transform: scale(0.02); }
  100% {transform: scale(0.3); }
}
@keyframes movebg {
  from {background-position: -10vw}
  50% {background-position: 10vw}
  to {background-position: -10vw}
}
@keyframes burst {
  100% {transform: scale(0.5);opacity: 0}
}