Update index.html

index.html

@@ -136,11 +136,11 @@
             border-bottom: 4px solid #181818;
             border-radius: 0 0 3px 3px;
             position: absolute;
-            z-index: 2; /* White keys: 1, Active keys: 3, Particles: 4 */
+            z-index: 3; /* White keys: 1, Active keys: 3, Particles: 4 */
             box-shadow: -1px 0 2px rgba(0,0,0,0.4), 1px 0 2px rgba(0,0,0,0.4), 0 2px 3px rgba(0,0,0,0.55), inset 0 -1px 1px rgba(60,60,60,0.3);
         }
         .key.active { /* Applied when key is pressed by user or MIDI */
-            z-index: 3 !important; /* Active keys always on top of other keys */
+            z-index: 2 !important; /* Active keys always on top of other keys */
         }
         .white-key.active {
             background: linear-gradient(to bottom, #d5d5d5, #c2c2c2);
@@ -289,7 +289,7 @@
                         keyElement.classList.add('black-key');
                         // Position black key centered over the "crack" of the preceding white key
                         // currentWhiteKeyVisualOffset is the right edge of the *previous* white key
-                        keyElement.style.left = (currentWhiteKeyVisualOffset - (BLACK_KEY_WIDTH_PX / 2) - (WHITE_KEY_OVERLAP_PX / 2)) + 'px';
+                        keyElement.style.left = (currentWhiteKeyVisualOffset - (BLACK_KEY_WIDTH_PX / 2) - (WHITE_KEY_OVERLAP_PX / 2) - 5) + 'px';
                         keyElement.style.top = '0px';
                     } else { // White key
                         keyElement.classList.add('white-key');