Improve colors

src/App.css

@@ -1,12 +1,22 @@
 @import "tailwindcss";
 
 body {
-  @apply bg-[rgb(24,24,48)] text-[rgb(200,200,250)] select-none flex items-center justify-center h-screen;
+  @apply bg-(--col0) text-[rgb(200,200,250)] select-none flex items-center justify-center h-screen;
   font-family: "Lexend", sans-serif;
+
+  --col0: rgb(8, 8, 32);
+  --col1: rgb(16, 16, 40);
+  --col2: rgb(32, 32, 56);
+  --col3: rgb(48, 48, 72);
+  --col4: rgb(64, 64, 88);
+  --col5: rgb(80, 80, 104);
+  --col6: rgb(96, 96, 120);
+  --col7: rgb(112, 112, 136);
+  --col8: rgb(128, 128, 152);
 }
 
 .box {
-  @apply bg-[rgb(48,48,72)] border border-[rgb(72,72,96)] rounded-lg shadow-[rgba(0,0,0,0.5)];
+  @apply bg-(--col1) border border-(--col3) rounded-lg;
   @apply w-min h-max p-6;
 }
 
@@ -16,8 +26,8 @@ body {
 
 a {
   @apply flex flex-col items-center justify-center;
-  @apply px-5 py-2.5 m-1 bg-[rgb(64,64,88)] border border-[rgb(88,88,112)] rounded-lg transition-all duration-200;
+  @apply px-5 py-2.5 m-1 bg-(--col2) border border-(--col4) rounded-lg transition-all duration-200;
-  @apply hover:bg-[rgb(88,88,112)] hover:border-[rgb(112,112,136)] hover:-translate-y-0.5 w-48 h-32 shadow shadow-[rgba(0,0,0,0.5)];
+  @apply hover:bg-(--col3) hover:border-(--col5) hover:-translate-y-0.5 w-48 h-32;
 }
 
 a svg {