From ac81a72bb6d9671cdf59d3909a1b3a5e1d20fb57 Mon Sep 17 00:00:00 2001
From: prisar <prisar230@gmail.com>
Date: Fri, 7 Jul 2023 05:17:03 +0530
Subject: [PATCH] add screen sizes

---
 src/App.css | 197 ++++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 162 insertions(+), 35 deletions(-)

diff --git a/src/App.css b/src/App.css
index 25ea6f7..c310710 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,5 +1,5 @@
 body {
-  background-color: rgb(247,245,249);
+  background-color: rgb(247, 245, 249);
   color: aliceblue;
 }
 
@@ -38,38 +38,172 @@ body {
   font-weight: 900;
 }
 
-.numeric-card {
-  height: 200px;
-  width: 300px;
-  /* border: 1px solid; */
-  padding: 20px;
-  /* background-color: #fb9261; */
-  box-shadow: 5px 10px 8px 10px #888888;
-  border-radius: 15px;
-  margin: 20px;
-  justify-content: center;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+@media screen and (min-width: 320px) {
+  .numeric-card {
+    height: 200px;
+    width: 300px;
+    /* border: 1px solid; */
+    padding: 20px;
+    /* background-color: #fb9261; */
+    box-shadow: 5px 10px 8px 10px #888888;
+    border-radius: 15px;
+    margin: 20px;
+    justify-content: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .card-title {
+    color: black;
+    font-size: 1em;
+    font-weight: 600;
+    font-family: sans-serif;
+  }
+
+  .card-data {
+    color: black;
+    font-size: 4em;
+    font-family: sans-serif;
+  }
+
+  .cards-container {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .cards-row {
+    margin: 50px;
+    display: flex;
+    flex-direction: column;
+  }
 }
 
-.card-title {
-  color: black;
-  font-size: 1em;
-  font-weight: 600;
-  font-family: sans-serif;
+@media screen and (min-width: 500px) {
+  .numeric-card {
+    height: 200px;
+    width: 300px;
+    /* border: 1px solid; */
+    padding: 20px;
+    /* background-color: #fb9261; */
+    box-shadow: 5px 10px 8px 10px #888888;
+    border-radius: 15px;
+    margin: 20px;
+    justify-content: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .card-title {
+    color: black;
+    font-size: 1em;
+    font-weight: 600;
+    font-family: sans-serif;
+  }
+
+  .card-data {
+    color: black;
+    font-size: 4em;
+    font-family: sans-serif;
+  }
+
+  .cards-container {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .cards-row {
+    margin: 50px;
+    display: flex;
+    flex-direction: column;
+  }
 }
 
-.card-data {
-  color: black;
-  font-size: 4em;
-  font-family: sans-serif;
+@media (min-width: 900px) {
+  .numeric-card {
+    height: 150px;
+    width: 200px;
+    /* border: 1px solid; */
+    padding: 20px;
+    /* background-color: #fb9261; */
+    box-shadow: 5px 10px 8px 10px #888888;
+    border-radius: 15px;
+    margin: 20px;
+    justify-content: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .card-title {
+    color: black;
+    font-size: 1em;
+    font-weight: 600;
+    font-family: sans-serif;
+  }
+
+  .card-data {
+    color: black;
+    font-size: 4em;
+    font-family: sans-serif;
+  }
+
+  .cards-container {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .cards-row {
+    margin: 50px;
+    display: flex;
+    flex-direction: row;
+  }
 }
 
-.cards-container {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
+@media screen and (min-width: 1200px) {
+  .numeric-card {
+    height: 200px;
+    width: 300px;
+    /* border: 1px solid; */
+    padding: 20px;
+    /* background-color: #fb9261; */
+    box-shadow: 5px 10px 8px 10px #888888;
+    border-radius: 15px;
+    margin: 20px;
+    justify-content: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .card-title {
+    color: black;
+    font-size: 1em;
+    font-weight: 600;
+    font-family: sans-serif;
+  }
+
+  .card-data {
+    color: black;
+    font-size: 4em;
+    font-family: sans-serif;
+  }
+
+  .cards-container {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .cards-row {
+    margin: 50px;
+    display: flex;
+    flex-direction: row;
+  }
 }
 
 div.chart {
@@ -77,12 +211,6 @@ div.chart {
   font-size: 0.7em;
 }
 
-.cards-row {
-  margin: 50px;
-  display: flex;
-  flex-direction: row;
-}
-
 div.bar {
   background-color: DarkRed;
   color: white;
@@ -91,5 +219,4 @@ div.bar {
   padding-right: 1em;
   margin-bottom: 2px;
   text-align: right;
-}
-
+}
\ No newline at end of file