diff --git a/index.css b/index.css
index efa3252..42cd7a9 100644
--- a/index.css
+++ b/index.css
@@ -87,15 +87,24 @@ header p {
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  font-size: 1.2rem;
   font-weight: 100;
 }
+@media (max-width: 786px) {
+  .letters {
+    gap: 0.5rem;
+  }
+}
 .letters .row {
   display: flex;
   flex-direction: row;
   justify-content: center;
   gap: 1rem;
 }
+@media (max-width: 786px) {
+  .letters .row {
+    gap: 0.5rem;
+  }
+}
 .letters .row .letter {
   width: 3rem;
   height: 4rem;
@@ -109,6 +118,13 @@ header p {
   transition: all 0.3s;
   transform: scale(-1, 1);
 }
+@media (max-width: 786px) {
+  .letters .row .letter {
+    width: 1.75rem;
+    height: 3rem;
+    font-size: 0.8rem;
+  }
+}
 .letters .row .letter.correct {
   background-color: #6aaa64 !important;
   color: #fff;
@@ -127,6 +143,11 @@ header p {
 .letters .row #backspace {
   width: 5rem;
 }
+@media (max-width: 786px) {
+  .letters .row #backspace {
+    width: 3rem;
+  }
+}
 .letters .row #backspace svg {
   transform: scale(-1, 1);
   width: 50%;
@@ -134,6 +155,11 @@ header p {
 .letters .row #enter {
   width: 5rem;
 }
+@media (max-width: 786px) {
+  .letters .row #enter {
+    width: 3.5rem;
+  }
+}
 
 .toast {
   background: black !important;
diff --git a/index.css.map b/index.css.map
index d980035..3765c7d 100644
--- a/index.css.map
+++ b/index.css.map
@@ -1 +1 @@
-{"version":3,"sources":["index.sass","index.css"],"names":[],"mappings":"AAWA;EACE,UAAA;EACA,SAAA;EACA,sBAAA;ACVF;;ADYA;EACE,YAAA;EACA,aAAA;EAEA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;EAEA,yBAAA;KAAA,sBAAA;UAAA,iBAAA;ACXF;;ADaA;EACE,sCA5BM;EA6BN,iBAAA;EACA,gBAAA;EACA,mBAAA;EACA,uBAAA;ACVF;ADYE;EACE,iBAAA;EACA,gBAAA;EACA,mBAAA;ACVJ;;ADYA;EACE,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,WAAA;EACA,kCA3CW;ACkCb;;ADWA;EACE,aAAA;EACA,sBAAA;EACA,WAAA;ACRF;ADUE;EACE,aAAA;EACA,mBAAA;EACA,WAAA;ACRJ;ADUI;EACE,WAAA;EACA,YAAA;EACA,yBAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,eAAA;EACA,gBAAA;EACA,YAAA;ACRN;ADUM;EACE,YAAA;EACA,uBAAA;ACRR;ADUM;EACE,YAAA;EACA,uBAAA;EACA,oBAAA;ACRR;ADUM;EACE,yBAzEQ;EA0ER,WAAA;EACA,YAAA;ACRR;ADUM;EACE,yBA/EQ;EAgFR,WAAA;EACA,YAAA;ACRR;ADUM;EACE,yBAlFO;EAmFP,WAAA;EACA,YAAA;ACRR;;ADUA;EACE,aAAA;EACA,sBAAA;EACA,SAAA;EACA,iBAAA;EACA,gBAAA;ACPF;ADSE;EACE,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,SAAA;ACPJ;ADSI;EACE,WAAA;EACA,YAAA;EACA,uBAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,eAAA;EACA,gBAAA;EACA,eAAA;EACA,oBAAA;EACA,uBAAA;ACPN;ADSM;EACE,oCAAA;EACA,WAAA;EACA,YAAA;ACPR;ADSM;EACE,yBApHY;EAqHZ,WAAA;EACA,YAAA;ACPR;ADSM;EACE,yBAvHW;EAwHX,WAAA;EACA,YAAA;ACPR;ADSI;EACE,WAAA;ACPN;ADSM;EACE,uBAAA;EACA,UAAA;ACPR;ADUI;EACE,WAAA;ACRN;;ADUA;EACE,4BAAA;EACA,YAAA;EACA,kCAjJW;EAkJX,gBAAA;EACA,6BAAA;EACA,kCAAA;ACPF;;ADSA;EACE,sCAxJM;EAyJN,eAAA;EACA,gBAAA;EACA,gBAAA;ACNF;ADQE;EACE,WAAA;EACA,qBAAA;EACA,gBAAA;EACA,oBAAA;ACNJ;ADQI;EACE,WAAA;ACNN","file":"index.css"}
\ No newline at end of file
+{"version":3,"sources":["index.sass","index.css"],"names":[],"mappings":"AAgBA;EACE,UAAA;EACA,SAAA;EACA,sBAAA;ACfF;;ADiBA;EACE,YAAA;EACA,aAAA;EAEA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;EAEA,yBAAA;KAAA,sBAAA;UAAA,iBAAA;AChBF;;ADkBA;EACE,sCAjCM;EAkCN,iBAAA;EACA,gBAAA;EACA,mBAAA;EACA,uBAAA;ACfF;ADiBE;EACE,iBAAA;EACA,gBAAA;EACA,mBAAA;ACfJ;;ADiBA;EACE,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,WAAA;EACA,kCAhDW;ACkCb;;ADgBA;EACE,aAAA;EACA,sBAAA;EACA,WAAA;ACbF;ADeE;EACE,aAAA;EACA,mBAAA;EACA,WAAA;ACbJ;ADeI;EACE,WAAA;EACA,YAAA;EACA,yBAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,eAAA;EACA,gBAAA;EACA,YAAA;ACbN;ADeM;EACE,YAAA;EACA,uBAAA;ACbR;ADeM;EACE,YAAA;EACA,uBAAA;EACA,oBAAA;ACbR;ADeM;EACE,yBA9EQ;EA+ER,WAAA;EACA,YAAA;ACbR;ADeM;EACE,yBApFQ;EAqFR,WAAA;EACA,YAAA;ACbR;ADeM;EACE,yBAvFO;EAwFP,WAAA;EACA,YAAA;ACbR;;ADeA;EACE,aAAA;EACA,sBAAA;EACA,SAAA;EACA,gBAAA;ACZF;AD5EE;EAoFF;IAOI,WAAA;ECXF;AACF;ADYE;EACE,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,SAAA;ACVJ;ADvFE;EA6FA;IAOI,WAAA;ECTJ;AACF;ADUI;EACE,WAAA;EACA,YAAA;EACA,uBAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,eAAA;EACA,gBAAA;EACA,eAAA;EACA,oBAAA;EACA,uBAAA;ACRN;ADzGE;EAsGE;IAcI,cAAA;IACA,YAAA;IACA,iBAAA;ECPN;AACF;ADQM;EACE,oCAAA;EACA,WAAA;EACA,YAAA;ACNR;ADQM;EACE,yBAnIY;EAoIZ,WAAA;EACA,YAAA;ACNR;ADQM;EACE,yBAtIW;EAuIX,WAAA;EACA,YAAA;ACNR;ADQI;EACE,WAAA;ACNN;ADlIE;EAuIE;IAII,WAAA;ECLN;AACF;ADMM;EACE,uBAAA;EACA,UAAA;ACJR;ADOI;EACE,WAAA;ACLN;AD9IE;EAkJE;IAII,aAAA;ECJN;AACF;;ADKA;EACE,4BAAA;EACA,YAAA;EACA,kCAtKW;EAuKX,gBAAA;EACA,6BAAA;EACA,kCAAA;ACFF;;ADIA;EACE,sCA7KM;EA8KN,eAAA;EACA,gBAAA;EACA,gBAAA;ACDF;ADGE;EACE,WAAA;EACA,qBAAA;EACA,gBAAA;EACA,oBAAA;ACDJ;ADGI;EACE,WAAA;ACDN","file":"index.css"}
\ No newline at end of file
diff --git a/index.js b/index.js
index bb36d9d..d9e7bc5 100644
--- a/index.js
+++ b/index.js
@@ -72,7 +72,7 @@ let handleButtonPress = (button) => {
 };
 
 onkeyup = (event) => {
-  if (!running || runningAnim) {
+  if (!running || runningAnim || !event.key.match(/[a-z]/i)) {
     return;
   }
 
diff --git a/index.sass b/index.sass
index dd6dd66..6e9325e 100644
--- a/index.sass
+++ b/index.sass
@@ -8,7 +8,12 @@ $color-absent: #787c7e
 $key-color-present: #c9b458
 $key-color-correct: #6aaa64
 $key-color-absent: #787c7e
-  
+
+@mixin mobile 
+  @media (max-width: 786px)
+    @content
+
+
 *
   padding: 0
   margin: 0
@@ -93,15 +98,20 @@ header
   display: flex
   flex-direction: column
   gap: 1rem
-  font-size: 1.2rem
   font-weight: 100
 
+  @include mobile
+    gap: 0.5rem
+
   .row
     display: flex
     flex-direction: row
     justify-content: center
     gap: 1rem
 
+    @include mobile
+      gap: 0.5rem
+
     .letter
       width: 3rem
       height: 4rem
@@ -115,6 +125,11 @@ header
       transition: all 0.3s
       transform: scale(-1, 1)
 
+      @include mobile
+        width: 1.75rem
+        height: 3rem
+        font-size: .8rem
+
       &.correct
         background-color: $key-color-correct !important
         color: #fff
@@ -132,6 +147,9 @@ header
 
     #backspace
       width: 5rem
+
+      @include mobile
+        width: 3rem
       
       svg
         transform: scale(-1, 1)
@@ -141,6 +159,9 @@ header
     #enter
       width: 5rem
 
+      @include mobile
+        width: 3.5rem
+
 .toast
   background: black !important
   color: white