@@ -7,7 +7,6 @@
 </head>
 <body>
 
-
   <div class="keys">
     <div data-key="65" class="key">
       <kbd>A</kbd>
@@ -58,27 +57,8 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
-  function playSound(e) {
-    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
-    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
-    if(!audio) return; // stop running if the keyCode does not match
-
-    audio.currentTime = 0;  // rewind to the start
-    audio.play();
-    key.classList.add('playing');
-  }
-
-  function removeTransition(e) {
-    if (e.propertyName !== 'transform') return; // skip if it's not a transform
-    this.classList.remove('playing');
-  }
 
-  const keys = document.querySelectorAll('.key');
-  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
-
-  window.addEventListener('keydown', playSound);
 </script>
 
-
 </body>
 </html>
@@ -1,7 +1,9 @@
 html {
   font-size: 10px;
-  background: url(http://i.imgur.com/b9r5sEL.jpg) bottom center;
+  background: bottom center;
   background-size: cover;
+  background-image: linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
+  url(http://i.imgur.com/b9r5sEL.jpg);
 }
 body,html {
   margin: 0;