edit css

components/ContentBox.module.css

@@ -2,12 +2,5 @@
   background-color: rgb(247, 247, 247);
   padding: 30px;
   text-align: right;
-  border-top-right-radius: 30px;
+  border-radius: 30px;
-  border-bottom-right-radius: 30px;
-}
-
-@media only screen and (max-width: 950px) {
-  .wrapper {
-    border-radius: 0;
-  }
 }

components/ErrorScreen.module.css

@@ -1,8 +1,8 @@
 .wrapper {
-  max-width: 260px;
-  text-align: center;
   display: grid;
   place-items: center;
+  max-width: 260px;
+  text-align: center;
 }
 
 .message {

components/LoadingScreen.module.css

@@ -1,5 +1,5 @@
 .wrapper {
-  max-width: 260px;
   display: grid;
   place-items: center;
+  max-width: 260px;
 }

components/MainCard.module.css

@@ -1,4 +1,5 @@
 .wrapper {
+  text-align: center;
   padding: 30px;
 }
 

components/MetricsCard.module.css

@@ -1,7 +1,7 @@
 .wrapper {
   background: rgba(255, 255, 255, 0.95);
-  border-radius: 20px;
   padding: 20px;
+  border-radius: 20px;
 }
 
 .content {

components/Search.module.css

@@ -1,6 +1,6 @@
 .search {
-  margin-bottom: 20px;
   height: 40px;
+  margin-bottom: 20px;
   border: none;
   padding: 0 10px;
   color: #303030;

components/UnitSwitch.module.css

@@ -3,9 +3,9 @@
 }
 
 .switch {
+  display: inline;
   margin: 0 10px;
   cursor: pointer;
-  display: inline;
 }
 
 @media only screen and (max-width: 475px) {

pages/index.js

@@ -83,4 +83,3 @@ const App = () => {
 
 export default App;
 // execute
-// body display

styles/Home.module.css

@@ -1,18 +1,16 @@
 .wrapper {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
   max-width: 1200px;
-  text-align: center;
   background: rgba(255, 255, 255, 0.95);
   box-shadow: 0 8px 32px 0 rgba(83, 89, 179, 0.37);
   backdrop-filter: blur(3px);
   -webkit-backdrop-filter: blur(3px);
   border-radius: 30px;
-  display: grid;
-  grid-template-columns: 1fr 2fr;
 }
 
 @media only screen and (max-width: 950px) {
   .wrapper {
-    display: grid;
     grid-template-columns: 1fr;
     max-width: 600px;
     margin: 20px auto;

styles/globals.css

@@ -6,11 +6,11 @@
 }
 
 body {
-  width: 100vw;
-  height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
+  width: 100vw;
+  min-height: 100vh;
   background-image: radial-gradient(
     circle 993px at 0.5% 50.5%,
     rgba(137, 171, 245, 0.37) 0%,
@@ -18,9 +18,3 @@ body {
   );
   font-family: "Varela Round", sans-serif;
 }
-
-@media only screen and (max-width: 950px) {
-  body {
-    display: block;
-  }
-}