sider rework css

src/app/app.component.scss

@@ -135,37 +135,36 @@
 
     &-sider {
         height: 100%;
-        width: 320px;
+        width: 340px;
         background-color: #e3e3e3;
         position: fixed;
         right: 0;
         top: 0;
         z-index: 2;
-        border-left: solid black 3px;
-        align-items: center;
-        overflow: scroll;
-        box-shadow: -20px 0px 25px rgba(0, 0, 0, 0.3);
+        box-shadow: -6px 0px 16px rgba(0, 0, 0, 0.3);
 
         &-title {
-            height: 30px;
-            border-bottom: solid black 2px;
+            height: 5%;
+            border-bottom: solid #8f8f8f 0.5px;
             font-size: 20px;
-            position: fixed;
-            width: 320px;
+            width: 340px;
             background-color: #e3e3e3;
+            position: relative;
             z-index: 2;
-            box-shadow: 0px 20px 25px rgba(0, 0, 0, 0.3);
+            box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
             font-family: 'Glacial Indifference Bold', sans-serif;
             display: flex;
             align-items: center;
             justify-content: center;
-            
         }
+
         &-elements {
-            margin-top: 40px;
             flex-direction: column;
             align-items: center;
             display: flex;
+            overflow-y: auto;
+            overflow-x: hidden;
+            height: 95%;
 
             &-element {
                 margin-top: 10px;
@@ -177,7 +176,7 @@
     &-settings {
         position: fixed;
         width: 400px;
-        right: 350px;
+        right: 360px;
         display: flex;
         flex-direction: row;
         justify-content: space-between;
@@ -201,7 +200,7 @@
     &-zoom {
         position: fixed;
         height: 110px;
-        right: 350px;
+        right: 360px;
         bottom: 25px;
         display: flex;
         flex-direction: column;