fix blue highlight

src/components/keyboard.style.ts

@@ -22,7 +22,11 @@ export const Wrapper = styled.div`
     align-items: center;
     justify-content: center;
     animation: ${reveal} .5s;
-    animation-timing-function: cubic-bezier(0, 0.65, 0.25, 1);
+    animation-timing-function: cubic-bezier(0, 0.39, 0.29, 1.02);
+
+    @media screen and (max-width: 600px) {
+        padding: 6px;
+    }
 `;
 
 export const KeyRow = styled.div`
@@ -50,6 +54,10 @@ export const Key = styled.button`
     border: none;
     box-shadow: 1px 2px 6px #5c7cc9;
 
+    @media screen and (max-width: 600px) {
+        margin: 2px;
+    }
+
     &:active {
         background: #f5f5f5;
         box-shadow: inset 1px 2px 6px #5c7cc9,

src/pages/style.ts

@@ -92,6 +92,13 @@ export const StartLabel = styled.label`
         inset 0 2px 3px rgba(255,255,255,0.13),
         0 5px 8px rgba(0,0,0,0.3),
         0 10px 10px 4px rgba(0,0,0,0.3);
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 
     &::after {
         content: ""; 
@@ -131,6 +138,13 @@ export const StartInput = styled.input`
     z-index: 100;
     position: absolute;
     cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 
     &:checked ~ label {
         box-shadow: