cards

src/App.css

@@ -1,7 +1,8 @@
 body {
-  /* background-color: #282c34;
-  color: aliceblue; */
+  background-color: rgb(247,245,249);
+  color: aliceblue;
 }
+
 .App {
   text-align: center;
 }
@@ -28,20 +29,6 @@ body {
   color: white;
 }
 
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 /* remove scroll bar */
 ::-webkit-scrollbar {
   display: none;
@@ -51,20 +38,58 @@ body {
   font-weight: 900;
 }
 
-.card {
-  /* height: 300px;
-  width: 400px; */
-  border: 1px solid;
-  padding: 10px;
-  /* box-shadow: 5px 10px 8px 10px #888888; */
-  /* justify-content: center;
+.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;
-  align-items: center; */
+  flex-direction: column;
+  align-items: center;
 }
 
-div.chart{ font-family:sans-serif; font-size:0.7em;
+.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;
+}
+
+div.chart {
+  font-family: sans-serif;
+  font-size: 0.7em;
+}
+
+.cards-row {
+  margin: 50px;
+  display: flex;
+  flex-direction: row;
+}
+
 div.bar {
-background-color:DarkRed; color:white;
-height:3em; line-height:3em; padding-right:1em; margin-bottom:2px; text-align:right;
+  background-color: DarkRed;
+  color: white;
+  height: 3em;
+  line-height: 3em;
+  padding-right: 1em;
+  margin-bottom: 2px;
+  text-align: right;
 }
+