Folders, icons and dark theme

static/styles/main.css

@@ -13,10 +13,25 @@
   --col-acc-2: #f36d6d;
   --col-acc-0: #993d3d;
 
+  --col-fg-1: var(--col-gr-100);
+  --col-fg-2: var(--col-gr-200);
+  --col-fg-3: var(--col-gr-300);
   --col-bg-1: var(--col-gr-600);
   --col-bg-2: var(--col-gr-700);
   --col-bg-3: var(--col-gr-800);
 }
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --col-fg-1: var(--col-gr-800);
+    --col-fg-2: var(--col-gr-700);
+    --col-fg-3: var(--col-gr-600);
+    --col-bg-1: var(--col-gr-300);
+    --col-bg-2: var(--col-gr-200);
+    --col-bg-3: var(--col-gr-100);
+  }
+}
+
 h1,
 h2,
 h3,
@@ -29,7 +44,7 @@ h6 {
 
 body {
   min-height: 100vh;
-  color: var(--col-main);
+  color: var(--col-fg-2);
   background-color: var(--col-bg-1);
   font-family: "Iosevka Aile Web";
   box-sizing: border-box;
@@ -50,11 +65,18 @@ body {
   display: flex;
   flex-direction: column;
   border-radius: 1em;
+  color: var(--col-fg-1);
   background-color: var(--col-bg-2);
   box-shadow: 2px 2px 100px #1115;
+  padding: 1em;
   text-align: center;
 }
 
+a {
+  text-decoration: none;
+  color: var(--col-acc-1);
+}
+
 #bookmarks {
   display: flex;
   flex-wrap: wrap;
@@ -68,8 +90,29 @@ body {
   background-color: var(--col-bg-2);
   box-shadow: 2px 2px 100px #1115;
   text-align: left;
-  padding: 1em;
+  padding: 1em 2.5em 1em 1em;
   margin: 1em;
+  transition: all 200ms ease;
+  position: relative;
+  z-index: 0;
+}
+.card .xmark {
+  position: absolute;
+  display: block;
+  width: 0.8em;
+  height: 0.8em;
+  /* border: 1px solid red; */
+  right: 1em;
+  top: 1em;
+}
+.card:hover {
+  box-shadow: 2px 2px 50px var(--col-acc-2);
+  transform: scale(1.1);
+  z-index: 1;
+}
+.tags {
+  font-size: 0.8em;
+  color: var(--col-fg-3);
 }
 
 form {
@@ -80,13 +123,21 @@ form {
 
 input {
   background-color: var(--col-bg-3);
+  color: var(--col-fg-1);
   border: none;
   border-radius: 5px;
   padding: 1em 1em;
   font-size: 1em;
+  box-shadow: 2px 2px 50px #1115;
+  transition: all 200ms ease;
   margin: 1em 0;
 }
 
+input:hover,
+input:focus {
+  box-shadow: 2px 2px 50px var(--col-acc-2);
+}
+
 input[type="submit"],
 button,
 .btn {