body,html{margin:0;padding:0;width:100%;height:100%}body{display:flex;align-items:center;justify-content:center;background-color:#002b36}#bassContainer,#melodyContainer{width:95vmin;height:95vmin;position:relative}canvas{z-index:2;position:absolute;left:0;top:0;width:100%;height:100%}.padContainer{z-index:1;position:absolute;bottom:0}.pad{position:absolute;top:0;height:100%;background-color:#073642;border:1px solid #586e75}.pad:first-child{border-top-left-radius:1vmin;border-bottom-left-radius:1vmin}.pad:last-child{border-top-right-radius:1vmin;border-bottom-right-radius:1vmin}.padAnimate{-webkit-animation-name:hitnote;-webkit-animation-duration:.5s;animation-name:hitnote;animation-duration:.4s}@keyframes hitnote{10%{background-color:#2aa198}}@-webkit-keyframes hitnote{10%{background-color:#2aa198}}