Made element sizes dynamic, improved mobile design

src/app.css

@@ -1,23 +1,25 @@
 #root {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
+  padding: 1vh;
   text-align: center;
+  display: block;
+  /*position: relative;*/
 }
 
 h1 {
-  margin: 0;
-  font-size: 8em;
-  line-height: 1.1;
+  font-size: 10vh;
+  margin-top: 5vh;
+  margin-bottom: 3vh;
 }
 
 h2 {
-  font-size: 3em;
-  line-height: 1;
-  margin-bottom: 3em;
+  font-size: 4vh;
+  margin-top: 0;
+  margin-bottom: 5vh;
 }
 
 h3 {
-  font-size: 2em;
+  font-size: 3vh;
 }
 

src/button.css

@@ -1,7 +1,7 @@
 button {
     border-radius: 8px;
     border: 1px solid transparent;
-    margin: 1em;
+    margin: 1vw;
     padding: 0.6em 1.2em;
     font-size: 1.2em;
     font-weight: 500;

src/main.css

@@ -1,7 +1,5 @@
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
 
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
@@ -12,11 +10,3 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}