add resp layout

pages/index.js

@@ -11,7 +11,7 @@ export default function Home() {
     const res = await fetch("/api/data", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ input, systemUsed }),
+      body: JSON.stringify({ input }),
     });
     const data = await res.json();
 

styles/Home.module.css

@@ -1,6 +1,5 @@
 .wrapper {
   max-width: 1200px;
-  /* margin: 0px auto; */
   text-align: center;
   background: rgba(255, 255, 255, 0.95);
   box-shadow: 0 8px 32px 0 rgba(83, 89, 179, 0.37);
@@ -9,6 +8,7 @@
   border-radius: 30px;
   display: grid;
   grid-template-columns: 1fr 2fr;
+  margin: 0 20px;
 }
 
 .weatherWrapper {
@@ -63,7 +63,6 @@
 .searchInput {
   margin-bottom: 20px;
   height: 40px;
-  /* border: 2px solid rgb(34, 34, 34); */
   border: none;
   padding: 0 10px;
   color: #303030;
@@ -73,3 +72,10 @@
   font-family: "Varela Round", sans-serif;
   font-size: 18px;
 }
+
+@media only screen and (max-width: 950px) {
+  .wrapper {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+}

styles/globals.css

@@ -8,8 +8,6 @@
 
 html,
 body {
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   background-image: radial-gradient(
     circle 993px at 0.5% 50.5%,
     rgba(137, 171, 245, 0.37) 0%,
@@ -23,7 +21,10 @@ body {
   align-items: center;
 }
 
-a {
-  color: inherit;
-  text-decoration: none;
+@media only screen and (max-width: 950px) {
+  html,
+  body {
+    min-height: 100vh;
+    display: block;
+  }
 }