Work on the admin section styling

public/assets/admin.css

@@ -1,19 +1,164 @@
+:root {
+  --background-body: #3c856bff;
+  --background: #161f27;
+  --background-alt: #1a242f;
+  --selection: #1c76c5;
+  --text-main: #dbdbdb;
+  --text-bright: #fff;
+  --text-muted: #a9b1ba;
+  --links: #41adff;
+  --focus: #0096bfab;
+  --border: ;
+  --code: #ffbe85;
+  --animation-duration: 0.1s;
+  --button-base: #0c151c;
+  --button-hover: #040a0f;
+  --scrollbar-thumb: var(--button-hover);
+  --scrollbar-thumb-hover: color-mod(var(--scrollbar-thumb) lightness(-30%));
+  --form-placeholder: #a9a9a9;
+  --form-text: #fff;
+  --variable: #d941e2;
+  --highlight: #efdb43;
+  --select-arrow: svg-load("./assets/select-arrow.svg", fill: #efefef);
+}
+
+/* @media (prefers-color-scheme: dark) { */
+/* --background-body: #202b38; */
+/* --background: #161f27; */
+/* --background-alt: #1a242f; */
+/* --selection: #1c76c5; */
+/* --text-main: #dbdbdb; */
+/* --text-bright: #fff; */
+/* --text-muted: #a9b1ba; */
+/* --links: #41adff; */
+/* --focus: #0096bfab; */
+/* --border: #526980; */
+/* --code: #ffbe85; */
+/* --animation-duration: 0.1s; */
+/* --button-base: #0c151c; */
+/* --button-hover: #040a0f; */
+/* --scrollbar-thumb: var(--button-hover); */
+/* --scrollbar-thumb-hover: color-mod(var(--scrollbar-thumb) lightness(-30%)); */
+/* --form-placeholder: #a9a9a9; */
+/* --form-text: #fff; */
+/* --variable: #d941e2; */
+/* --highlight: #efdb43; */
+/* --select-arrow: svg-load("./assets/select-arrow.svg", fill: #efefef); */
+/* } */
+
 /* Base Styles */
 body {
-  max-width: 95vw;
   margin: auto;
-  /* background-color: yellow; */
+  padding: 0;
+  background-color: var(--background-body);
+  color: var(--text-main);
+  font-size: 1.2em;
 }
+
+header, main, footer {
+  margin: auto 2ch;
+}
+
+header, footer {
+  text-align: center;
+}
+
 main {
+  padding: 2ch;
   max-width: 80vw;
   margin: auto 1.2rem;
-  /* background-color: yellow; */
+  max-width: 800px;
+  margin: 20px auto;
+  padding: 0 10px;
+  position: relative;
+}
+table {
+  table-layout: auto;
+  margin: auto;
+  width: 95vw;
+  margin-left: calc(50% - 45vw);
+  /* margin: auto; */
+}
+table {
+  width: max-content;
+  min-width: 95vw; /* optional fallback */
+  table-layout: auto;
+}
+
+/* https://stackoverflow.com/questions/3084261/alternate-table-row-color-using-css */
+
+tr:nth-child(even) {
+  background-color: #204639;
+}
+
+tr:nth-child(odd) {
+  background-color: #2f6a55;
 }
 
 nav {
   margin-top: 1rem;
 }
 
+fieldset {
+  border: 1px solid;
+  border-radius: 6px;
+  margin: 0;
+  margin-bottom: 12px;
+  padding: 1em;
+}
+
+legend {
+  font-size: 0.9em;
+  font-weight: 600;
+}
+
+label {
+  vertical-align: middle;
+  margin-bottom: 1em;
+  display: inline-block;
+}
+
+button,
+select,
+input[type="submit"],
+input[type="reset"],
+input[type="button"],
+input[type="checkbox"],
+input[type="range"],
+input[type="radio"] {
+  cursor: pointer;
+}
+
+input,
+select {
+  display: block;
+}
+
+input,
+button,
+textarea,
+select {
+  color: var(--form-text);
+  background-color: var(--background);
+  font-family: inherit;
+  font-size: inherit;
+  margin-right: 6px;
+  margin-bottom: 6px;
+  padding: 10px;
+  border: none;
+  border-radius: 6px;
+  outline: none;
+}
+
+button,
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+  background-color: var(--button-base);
+  padding-right: 30px;
+  padding-left: 30px;
+}
+
 /* Alert Messages */
 .error-message,
 .alert-error {
@@ -49,9 +194,9 @@ nav {
 }
 
 /* Lists */
-ul.no-style {
-  list-style: none;
-}
+/* ul.no-style { */
+/* list-style: none; */
+/* } */
 
 /* Filters */
 .filters {