mini-player: wip implementation

static/style.css

@@ -7,6 +7,7 @@
   --darker-pink: #ff75a7;
   --darkerer-pink: #ff4287;
   --win-bg-grey: #c0c0c0;
+  --grey-500: oklch(55.1% 0.027 264.364);
 }
 
 body {
@@ -44,11 +45,9 @@ crt {
   }
 
   &::before {
-    background: linear-gradient(
-      to bottom,
-      transparent 50%,
-      rgba(0, 0, 0, 0.2) 51%
-    );
+    background: linear-gradient(to bottom,
+        transparent 50%,
+        rgba(0, 0, 0, 0.2) 51%);
     background-size: 100% 4px;
     animation: scanlines 1s steps(60) infinite;
   }
@@ -157,9 +156,38 @@ miniplayer {
   left: 0;
   z-index: 100;
   background-color: var(--win-bg-grey);
-  border: 2px solid oklch(55.1% 0.027 264.364);
+  border: 2px solid var(--grey-500);
 
   ominous-message {
     font-style: italic;
   }
+
+  controls {
+
+    display: flex;
+    flex-direction: row;
+    gap: 5rem;
+
+    state {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+    }
+
+    volume {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+
+
+      input {
+        height: 4px;
+        width: 5rem;
+        appearance: none;
+        background-color: white;
+        border: 1px solid var(--grey-500);
+      }
+    }
+  }
+
 }