refactor: Update styles for use in the navbar

src/assets/base.css

@@ -4,7 +4,10 @@
     --black: #363739;
     --white: #ffffff;
     --grey: #cbcbcb;
+    --light-grey: #f2f2f2;
     --green: #95e35d;
+    --light-green: #b3f385;
+
 
     --bright: #f7da7c;
 
@@ -16,8 +19,10 @@
 :root {
     --color-background: var(--white);
     --color-text: var(--black);
-    --color-button: var(--bright);
+    --color-button: var(--green);
     --color-button-disabled: var(--grey);
+    --color-nav-hover: var(--light-grey);
+    --color-button-hover: var(--light-green);
 
     --color-link: var(--accent3);
     --color-border: var(--black);

src/assets/main.css

@@ -50,10 +50,15 @@ button:disabled {
     background-color: var(--color-button-disabled);
     cursor: not-allowed;
 }
+button:hover {
+    background-color: var(--color-button-hover);
+    transition: 0.7s;
+}
 
 a {
     text-decoration: none;
-    color: var(--color-link);
+    color: var(--color-text);
+    font-weight: bold;
     transition: 0.4s;
 }
 
@@ -71,6 +76,10 @@ textarea {
 
 @media (hover: hover) {
     a:hover {
-        background-color: hsla(160, 100%, 37%, 0.2);
+        background-color: var(--color-nav-hover);
+        transition: 0.5s;
+        text-decoration: none;
+        padding: 6px 6px;
+        border-radius: 8px;
     }
 }