add parsing and displaying of transactions

styles/Home.module.css

@@ -70,7 +70,8 @@
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
-  max-width: 800px;
+  width: 80vw;
+  max-width: 1000px;
 }
 
 .card {

styles/globals.css

@@ -1,16 +0,0 @@
-html,
-body {
-  padding: 0;
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-* {
-  box-sizing: border-box;
-}

styles/globals.scss

@@ -0,0 +1,26 @@
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: "Font Awesome 6", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  background-color: var(--color-gray)
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+* {
+  box-sizing: border-box;
+  --color-white: #ffffff;
+  --color-gray: #f0f0f0;
+  --color-blue: #b4dadb;
+  --color-accent: #457b9d;
+  --color-warn: #a31420;
+  --color-dark: #1d3557;
+
+  --card-radius: 10px;
+}