css fix

style/_sidebar.scss

@@ -1,4 +1,5 @@
 @use 'mixins';
+@use 'vars';
 
 aside {
     grid-row: 2/3;
@@ -59,15 +60,6 @@ aside {
             font-weight: 300;
         }
 
-        .class {
-            input {
-
-            }
-        }
-
-        .level {
-        }
-
         button {
             color: white;
         }
@@ -89,8 +81,8 @@ aside {
     > h6 {
         font-size: 0.7em;
         text-align: right;
-        margin-top: 10px;
-        margin-bottom: 6px;
+        margin-top: 8px;
+        margin-bottom: 4px;
         padding: 5px;
         color: #666;
         font-family: "Galderglynn Titling";

style/_vars.scss

@@ -0,0 +1 @@
+$t: "Galderglynn Titling", sans-serif;

style/main.scss

@@ -1,7 +1,10 @@
+@use 'sass:list';
+
 @use 'mixins';
 @use 'reset';
 @use 'header';
 @use 'sidebar';
+@use 'vars';
 
 html {
     background: black;
@@ -29,16 +32,25 @@ h1, h2, h3, h4, h5, h6 {
     display: grid;
     grid-template-rows: 100px 1fr;
     grid-template-columns: 2fr 6fr;
-    grid-gap: 15px;
+    grid-gap: 20px;
 }
 
 header, aside, main {
     background: rgba(12, 12, 12, 1);
     position: relative;
+    $shadow: ();
+    @for $i from 1 through 6 {
+        $shadow: list.append($shadow, drop-shadow(-#{$i}px #{$i}px 0 hsl(0deg, 0%, 10%)));
+    }
+    filter: list.join($shadow, drop-shadow(-0px 6px 20px hsl(0deg, 0%, 3%)));
 }
 
+aside {
+    z-index: 10;
+}
 
 main {
+    z-index: 8;
     grid-row: 2/3;
     grid-column: 2/3;
 }