From f19a7e627a788f3299434126d279037d77d36f5a Mon Sep 17 00:00:00 2001
From: andrzej <andrzejjamesstepien@gmail.com>
Date: Sun, 26 May 2024 13:04:03 +0200
Subject: [PATCH] make responsive

---
 src/App.css | 29 +++++++++++++++++++++++------
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/App.css b/src/App.css
index 608d682..bae0b18 100644
--- a/src/App.css
+++ b/src/App.css
@@ -9,13 +9,29 @@
     src: url("DS-DIGIB.TTF");
 }
 
-html {
-    font-size: 16px;
+@media screen and (min-width:601px) {
+    html {
+        font-size: 16px;
+    }
+}
+
+@media screen and (max-width:600px) {
+    html {
+        font-size: 12px;
+    }
+}
+
+body {
+    padding: 0px;
+    margin: 0px;
 }
 
 #calculator {
-    height: 800px;
-    width: 550px;
+    background-color: white;
+    height: 50rem;
+    max-height: 100vh;
+    width: 35rem;
+    max-width: 100vw;
     margin: auto;
     background: rgb(68, 64, 64);
     background: linear-gradient(351deg, rgba(68, 64, 64, 1) 0%, rgba(156, 150, 150, 1) 100%);
@@ -25,6 +41,7 @@ html {
 
 #calculator-content {
     height: 100%;
+    max-width: 100%;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-template-rows: 1fr 1.6fr repeat(5, 1fr);
@@ -37,7 +54,7 @@ html {
         "numbers numbers numbers operators"
         "numbers numbers numbers operators"
     ;
-    gap: 1rem;
+    gap: 1em;
 }
 
 
@@ -60,7 +77,7 @@ html {
     grid-area: display;
     justify-self: end;
     align-self: end;
-    height: 9rem;
+    height: 9em;
     width: 100%;
     display: grid;
     grid-template-rows: 1fr 6fr 1fr;