html {touch-action: manipulation;user-select: none;}
body {margin:0;background:#000;overflow:hidden;}
#switches {height:calc(var(--vh, 1vh) * 6);width: 96vw;display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;grid-gap: calc(var(--vh, 1vh) * 2) 2vw;}
#switches.top {padding: calc(var(--vh, 1vh) * 2) 2vw 0 2vw;}
#switches.bottom {padding: 0 2vw calc(var(--vh, 1vh) * 2) 2vw;}
#pads1, #pads2, #pads3 {height:calc(var(--vh, 1vh) * 80);width: 96vw;display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;grid-gap: calc(var(--vh, 1vh) * 2) 2vw;padding: calc(var(--vh, 1vh) * 2) 2vw;}
#pads2, #pads3 {display:none;}
.pad, .switch {position:relative;box-shadow:inset 0 0 60px 1px #aaa, 0 0 15px 0px #fff;border:1px solid #000;border-radius:10px;background-color:#fff;padding:0;font-size:calc(5px + 2vw);color:#666;}
#pads2 .pad {;box-shadow:inset 0 0 60px 1px #aaa, 0 0 15px 0px #fff;animation-name:color-change;animation-duration:4s;animation-iteration-count:infinite;animation-direction: normal;animation-timing-function: ease-out;animation-fill-mode:forwards;-webkit-animation-name:color-change;-webkit-animation-duration:4s;-webkit-animation-iteration-count:infinite;-webkit-animation-direction: normal;-webkit-animation-timing-function:ease-out;-webkit-animation-fill-mode: forwards;}

@keyframes color-change {
    100% {
        background-color:#fff;
    }
}

@-webkit-keyframes color-change {
    100% {
        background-color:#fff;
    }
}

#pads2 .pad1 {-webkit-animation-delay: 0s;animation-delay: 0s;}
#pads2 .pad2 {-webkit-animation-delay: 0.25s;animation-delay: 0.25s;}
#pads2 .pad3 {-webkit-animation-delay: 0.5s;animation-delay: 0.5s;}
#pads2 .pad4 {-webkit-animation-delay: 0.75s;animation-delay: 0.75s;}
#pads2 .pad5 {-webkit-animation-delay: 2.75s;animation-delay: 2.75s;}
#pads2 .pad6 {-webkit-animation-delay: 3s;animation-delay: 3s;}
#pads2 .pad7 {-webkit-animation-delay: 3.25s;animation-delay: 3.25s;}
#pads2 .pad8 {-webkit-animation-delay: 1s;animation-delay: 1s;}
#pads2 .pad9 {-webkit-animation-delay: 2.5s;animation-delay: 2.5s;}
#pads2 .pad10 {-webkit-animation-delay: 3.75s;animation-delay: 3.75s;}
#pads2 .pad11 {-webkit-animation-delay: 3.5s;animation-delay: 3.5s;}
#pads2 .pad12 {-webkit-animation-delay: 1.25s;animation-delay: 1.25s;}
#pads2 .pad13 {-webkit-animation-delay: 2.25s;animation-delay: 2.25s;}
#pads2 .pad14 {-webkit-animation-delay: 2s;animation-delay: 2s;}
#pads2 .pad15 {-webkit-animation-delay: 1.75s;animation-delay: 1.75s;}
#pads2 .pad16 {-webkit-animation-delay: 1.5s;animation-delay: 1.5s;}


.active-red {background-color:#ff0000 !important;box-shadow:inset 0 0 100px 0 #fff, 0 0 25px 1px #ff0000 !important;color:#333;}
.active-blue {background-color:#0000ff !important;box-shadow:inset 0 0 100px 0 #fff, 0 0 25px 1px #8888ff !important;color:#333;}
.active-green {background-color:#00c000 !important;box-shadow:inset 0 0 100px 0 #fff, 0 0 25px 1px #89ff89 !important;color:#333;}
.active-purple {background-color:#6626a7 !important;box-shadow:inset 0 0 100px 0 #fff, 0 0 25px 1px #ba76ff !important;color:#333;}
.active-orange {background-color:#ffd484 !important;box-shadow:inset 0 0 100px 0 #fff, 0 0 25px 1px #ffd484 !important;color:#333;}
.keys {display:inline;}
.test {border:1px solid #ff0000;}
.test2 {border:1px solid #00ff00;}