adding more stuffs

static/css/main.css

@@ -7,10 +7,14 @@
     'Noto Color Emoji';
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
     monospace;
+    --color-blue-400: oklch(70.7% 0.165 254.624);
     --color-blue-500: oklch(62.3% 0.214 259.815);
+    --color-blue-600: oklch(54.6% 0.245 262.881);
     --color-blue-700: oklch(48.8% 0.243 264.376);
+    --color-blue-800: oklch(42.4% 0.199 265.638);
     --color-indigo-400: oklch(67.3% 0.182 276.935);
     --color-indigo-500: oklch(58.5% 0.233 277.117);
+    --color-gray-50: oklch(98.5% 0.002 247.839);
     --color-gray-100: oklch(96.7% 0.003 264.542);
     --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-gray-300: oklch(87.2% 0.01 258.338);
@@ -243,6 +247,12 @@
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
+  .right-8 {
+    right: calc(var(--spacing) * 8);
+  }
+  .bottom-4 {
+    bottom: calc(var(--spacing) * 4);
+  }
   .-left-1\/2 {
     left: calc(calc(1/2 * 100%) * -1);
   }
@@ -288,6 +298,9 @@
   .m-4 {
     margin: calc(var(--spacing) * 4);
   }
+  .m-300 {
+    margin: calc(var(--spacing) * 300);
+  }
   .mx-auto {
     margin-inline: auto;
   }
@@ -393,6 +406,10 @@
   .aspect-video {
     aspect-ratio: var(--aspect-video);
   }
+  .size-5 {
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+  }
   .h-0 {
     height: calc(var(--spacing) * 0);
   }
@@ -630,6 +647,9 @@
   .overscroll-none {
     overscroll-behavior: none;
   }
+  .\!rounded-lg {
+    border-radius: var(--radius-lg) !important;
+  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -676,6 +696,9 @@
   .bg-blue-500 {
     background-color: var(--color-blue-500);
   }
+  .bg-blue-600 {
+    background-color: var(--color-blue-600);
+  }
   .bg-blue-700 {
     background-color: var(--color-blue-700);
   }
@@ -691,6 +714,9 @@
   .bg-gray-400 {
     background-color: var(--color-gray-400);
   }
+  .bg-gray-500 {
+    background-color: var(--color-gray-500);
+  }
   .bg-gray-700 {
     background-color: var(--color-gray-700);
   }
@@ -837,6 +863,9 @@
   .text-blue-700 {
     color: var(--color-blue-700);
   }
+  .text-gray-50 {
+    color: var(--color-gray-50);
+  }
   .text-gray-200 {
     color: var(--color-gray-200);
   }
@@ -867,9 +896,17 @@
   .uppercase {
     text-transform: uppercase;
   }
+  .\!no-underline {
+    text-decoration-line: none !important;
+  }
   .no-underline {
     text-decoration-line: none;
   }
+  .placeholder-gray-300 {
+    &::placeholder {
+      color: var(--color-gray-300);
+    }
+  }
   .placeholder-neutral-300 {
     &::placeholder {
       color: var(--color-neutral-300);
@@ -977,6 +1014,11 @@
       height: calc(var(--spacing) * 0);
     }
   }
+  .checked\:text-gray-500 {
+    &:checked {
+      color: var(--color-gray-500);
+    }
+  }
   .checked\:text-neutral-500 {
     &:checked {
       color: var(--color-neutral-500);
@@ -1007,6 +1049,13 @@
       }
     }
   }
+  .hover\:\!bg-blue-500 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-blue-500) !important;
+      }
+    }
+  }
   .hover\:bg-gray-100 {
     &:hover {
       @media (hover: hover) {
@@ -1028,6 +1077,20 @@
       }
     }
   }
+  .hover\:bg-gray-500 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-500);
+      }
+    }
+  }
+  .hover\:bg-gray-600 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-600);
+      }
+    }
+  }
   .hover\:bg-gray-700 {
     &:hover {
       @media (hover: hover) {
@@ -1035,6 +1098,13 @@
       }
     }
   }
+  .hover\:bg-gray-900 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-900);
+      }
+    }
+  }
   .hover\:bg-indigo-400 {
     &:hover {
       @media (hover: hover) {
@@ -1092,6 +1162,11 @@
       }
     }
   }
+  .focus\:bg-gray-900 {
+    &:focus {
+      background-color: var(--color-gray-900);
+    }
+  }
   .focus\:ring {
     &:focus {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -1104,6 +1179,11 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .focus\:ring-blue-500 {
+    &:focus {
+      --tw-ring-color: var(--color-blue-500);
+    }
+  }
   .focus\:ring-white {
     &:focus {
       --tw-ring-color: var(--color-white);
@@ -1349,6 +1429,11 @@
       border-color: var(--color-gray-400);
     }
   }
+  .dark\:bg-blue-800 {
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-blue-800);
+    }
+  }
   .dark\:bg-gray-500 {
     @media (prefers-color-scheme: dark) {
       background-color: var(--color-gray-500);
@@ -1389,6 +1474,15 @@
       color: var(--color-white);
     }
   }
+  .dark\:hover\:\!bg-blue-700 {
+    @media (prefers-color-scheme: dark) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-blue-700) !important;
+        }
+      }
+    }
+  }
   .dark\:hover\:bg-gray-600 {
     @media (prefers-color-scheme: dark) {
       &:hover {
@@ -1424,6 +1518,16 @@
     font-size: var(--text-lg);
     padding: 1em 0em;
   }
+  a {
+    color: var(--color-blue-400);
+  }
+  li {
+    list-style-type: disc;
+    margin-left: 1em;
+  }
+  li::marker {
+    color: var(--color-gray-600);
+  }
 }
 @property --tw-translate-x {
   syntax: "*";