Add rules for smaller screens

style.css

@@ -183,4 +183,40 @@ footer a:hover, footer a:focus {
     color: rgb(170, 255, 0);
     text-decoration: none;
     margin: 0;
+}
+
+@media screen and (max-width: 600px) {
+    header h1 {
+        font-size: (calc(70px *.75));
+    }
+
+    .calculator {
+        max-width: calc(415px * .75);
+        grid-gap: calc(5px * .75);
+    }
+
+    .display {
+        max-width: calc(415px * .75);
+        height: calc(150px * .75);
+    }
+
+    .top-screen {
+        max-width: calc(415px * .75);
+        font-size: calc(30px *.75);
+    }
+
+    .main-screen {
+        max-width: calc(415px * .75);
+        font-size: calc(70px * .75);
+    }
+
+    button {
+        width: calc(100px * .75);
+        height: calc(100px * .75);
+        font-size: calc(50px *.75);
+    }
+
+    .equal {
+        width: calc(205px * .75)
+    }
 }