Button styles, Cards

src/components/BudgetItem/BudgetItem.module.scss

@@ -2,6 +2,7 @@
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
-    height: 250px;
-    background: skyblue;
+    padding: 32px;
+    border-radius: 4px;
+    box-shadow: var(--box-shadow-lev-1);
 }

src/components/BudgetList/BudgetList.module.scss

@@ -7,6 +7,5 @@
 .ListItems {
     display: grid;
     gap: 1rem;
-    border: 1px solid green;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 }

src/components/Navigation/Navigation.module.scss

@@ -3,6 +3,6 @@
   display: flex;
   align-items: center;
   padding: 16px;
-  box-shadow: 0px -8px 24px 0px #555;
+  box-shadow: var(--box-shadow-lev-2);
   justify-content: space-between;
 }

src/styles/app.module.scss

@@ -7,4 +7,5 @@
 
   margin-inline: auto;
   width: var(--content-width);
+  padding: 32px 0px;
 }

src/styles/globals.css

@@ -9,6 +9,10 @@
   --background-start-rgb: 214, 219, 220;
   --background-end-rgb: 255, 255, 255;
 
+  --box-shadow-color: #ddd;
+  --box-shadow-lev-1: 0px 2px 8px 0px var(--box-shadow-color);
+  --box-shadow-lev-2: 0px 2px 16px 0px var(--box-shadow-color);
+
   --primary-glow: conic-gradient(
     from 180deg at 50% 50%,
     #16abff33 0deg,
@@ -98,9 +102,3 @@ a {
     /* color-scheme: dark; */
   }
 }
-
-main {
-  display: flex;
-  flex-direction: column;
-  gap: 32px;
-}