#23

frontend/src/index.css

@@ -2,13 +2,25 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer base {
-  body {
+@layer base
+{
+  body
+  {
     @apply overflow-x-clip;
   }
+
+  a
+  {
+    @apply text-blue-600 dark:text-blue-300;
+  }
+  a:hover
+  {
+    @apply text-blue-400 dark:text-blue-100;
+  }
 }
 
-:root {
+:root
+{
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
@@ -23,16 +35,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-a {
+a
+{
   font-weight: 500;
-  color: #646cff;
   text-decoration: inherit;
 }
-a:hover {
-  color: #535bf2;
-}
 
-body {
+body
+{
   margin: 0;
   display: flex;
   place-items: center;
@@ -40,12 +50,14 @@ body {
   min-height: 100vh;
 }
 
-h1 {
+h1
+{
   font-size: 3.2em;
   line-height: 1.1;
 }
 
-button {
+button
+{
   border-radius: 8px;
   border: 1px solid transparent;
   padding: 0.6em 1.2em;
@@ -56,23 +68,29 @@ button {
   cursor: pointer;
   transition: border-color 0.25s;
 }
-button:hover {
+button:hover
+{
   border-color: #646cff;
 }
 button:focus,
-button:focus-visible {
+button:focus-visible
+{
   outline: 4px auto -webkit-focus-ring-color;
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
+@media (prefers-color-scheme: light)
+{
+  :root
+  {
     color: #213547;
     background-color: #ffffff;
   }
-  a:hover {
+  a:hover
+  {
     color: #747bff;
   }
-  button {
+  button
+  {
     background-color: #f9f9f9;
   }
 }