From 098954fb6ca9759d69a8ff7a2b7753bef7addf8a Mon Sep 17 00:00:00 2001
From: lolabird <octavia@octavianichols.com>
Date: Mon, 1 Jan 2024 09:39:31 -0700
Subject: [PATCH] Add rules for smaller screens

---
 style.css | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/style.css b/style.css
index 2b01197..fa76ffd 100644
--- a/style.css
+++ b/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)
+    }
 }
\ No newline at end of file