style: Update base and main css with new style

src/assets/base.css

@@ -22,7 +22,10 @@
     --color-button: var(--green);
     --color-button-disabled: var(--grey);
     --color-nav-hover: var(--light-grey);
+    --color-button-edit: var(--grey);
     --color-button-hover: var(--light-green);
+    --color-button-danger: var(--accent3);
+    --color-button-danger-hover: var(--accent1);
 
     --color-link: var(--accent3);
     --color-border: var(--black);
@@ -30,10 +33,14 @@
     --section-gap: 160px;
 }
 
-@media (prefers-color-scheme: dark) {
-    :root {
-        /* TODO: add dark mode colors */
-    }
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield; /* Firefox */
 }
 
 *,

src/assets/main.css

@@ -34,25 +34,52 @@ h3 {
     margin-bottom: 1rem;
 }
 
-button {
-    background-color: var(--color-button);
+button.primary {
+    background-color: transparent;
+    border-color: var(--color-button);
     color: var(--color-text);
-    border-color: transparent;
     padding: 0.2rem 1rem;
+    font-weight: bold;
     border-radius: 1rem;
+    border-width: 2px;
     cursor: pointer;
     transition: 0.4s;
 }
 
-button:disabled {
+button.primary:disabled {
     background-color: var(--color-button-disabled);
+    border-color: var(--color-button-disabled);
     cursor: not-allowed;
 }
-button:hover {
-    background-color: var(--color-button-hover);
+button.primary:hover {
+    border-color: var(--color-button-hover);
     transition: 0.7s;
 }
 
+button.secondary {
+    border-color: var(--color-button-edit);
+}
+
+button.secondary:hover {
+    border-color: black;
+    transition: 0.7s;
+}
+
+button.danger {
+    background-color: var(--color-button-danger);
+    border-color: transparent;
+}
+
+button.danger:hover {
+    background-color: var(--color-button-danger-hover);
+    border-color: var(--color-button-danger);
+    transition: 0.7s;
+}
+
+button.logout {
+    background-color: var(--color-button);
+}
+
 a {
     text-decoration: none;
     color: var(--color-text);