Minor CSS update; add MQ to reduce font-size on narrow screens

Author: necolas

style.css

@@ -1,6 +1,6 @@
 html {
     overflow-y: scroll;
-    -webkit-tap-highlight-color: transparent;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
     -webkit-text-size-adjust: 100%;
     -ms-text-size-adjust: 100%;
 }
@@ -9,7 +9,7 @@ body {
     max-width: 480px;
     padding: 0 0 40px;
     margin: 0 auto;
-    font: 16px/1.4 Calibri, sans-serif;
+    font: 1em/1.4 Calibri, sans-serif;
     color: #222;
     background: #fff;
     _width: 480px;
@@ -104,8 +104,8 @@ p {
     padding: 6px 15px; 
     border: 1px solid #487310;
     margin: 20px 0 0; 
-    font-size: 22px;
-    line-height: 28px;
+    font-size: 1.375em;
+    line-height: 1.273;
     color: #fff; 
     background: #6EAD1A; 
     text-shadow:0 1px 1px rgba(0,0,0,0.4); 
@@ -148,5 +148,19 @@ p {
     padding: 10px 0 0;
     border-top: 1px solid #ccc;
     margin: 3em 0 0;
-    font-size: 13px;
+    font-size: 0.8125em;
+}
+
+@media screen and (max-width:480px) {
+    body {
+        font-size: 0.875em;
+    }
+    
+    h1 {
+        font-size: 3em;
+    }
+    
+    .fork {
+        display: none;
+    }
 }