fixed sidebar; reflow z css and main container

index.html

@@ -22,7 +22,13 @@
         </div>
 
         <div id="master">
-            <div id="sidebar"></div>
+            <div id="sidebar">
+                <div id="favorites">
+                    <div>
+                        <h2 class="nosel">Quick Access</h2>
+                    </div>
+                </div>
+            </div>
             <div id='container'>
                 <div id='controls' class='controls'>
                     <div id='header-buttons'></div>

styles/context.css

@@ -7,6 +7,7 @@
     position: absolute;
     background-color: #101010df;
     padding: 7px 5px;
+    z-index: 2;
 }
 
 #ctx hr {

styles/modal.css

@@ -9,7 +9,7 @@
     border: 1px solid #af2188a4;
     background-color: #171717da;
     padding: 6px 8px;
-    z-index: 3;
+    z-index: 4;
     max-width: 50%;
 }
 
@@ -65,7 +65,7 @@
     top: 0;
     left: 0;
     background-color: #1717176d;
-    z-index: 2;
+    z-index: 3;
 }
 
 .error-modal {max-width: 45%;}

styles/sidebar.css

@@ -1,17 +1,15 @@
 #sidebar {
-    width: 10%;
+    width: 180px;
     border-right: 1px solid #5d60caaf;
-    margin: 0 0;
+    margin: 26px 0 0 0;
-    padding: 12px 14px;
+    padding: 0 14px 12px 14px;
+    position: fixed;
+    z-index: 1;
+    overflow-x: hidden;
+    top: 0;
+    left: 0;
+    background-color: #0000006d;
+    height: 100%;
 }
 
-#container {
+#container {margin-left: 200px;}
-    flex-basis: 90%;
-}
-
-#master {
-    display: flex;
-    align-items: stretch;
-    align-content: flex-start;
-    justify-content: stretch;
-}

styles/styles.css

@@ -11,7 +11,6 @@ body {
     color: #d3d3d3;
     font-family: 'Montserrat', sans-serif;
     overflow-y: overlay;
-    width: calc(100vw) - 10px;
 }
 
 .rise {
@@ -32,7 +31,7 @@ body {
 #title {
     font-family: 'Nunito', sans-serif;
     margin: 0 0;
-    z-index: 1;
+    z-index: 2;
     animation: shine 5s linear infinite;
     background: linear-gradient(to right, #5d60ca 20%, #171717 35%, #171717 35%, #5d60ca 50%, #5d60ca 50%, #af2188 75%, #5d60ca 90%);
     background-size: 200% auto;
@@ -55,7 +54,7 @@ body {
     width: 100vw;
     overflow: hidden;
     background-color: #0000006d;
-    z-index: 1;
+    z-index: 2;
     -webkit-app-region: drag;
 }