Update style.css

assets/css/style.css

@@ -5,44 +5,39 @@ body {
     padding: 0;
 }
 
-.container {
-    display: flex;
-    min-height: 100vh;
-}
-
 /* Sidebar Styling */
 .sidebar {
     width: 250px;
-    background: #2c3e50; /* Dark blue */
+    background: #2c3e50;
     color: white;
     padding: 20px;
     position: fixed;
     height: 100%;
     left: 0;
     top: 0;
     overflow-y: auto;
-    transition: transform 0.3s ease-in-out; /* Smooth hide effect */
+    transition: transform 0.3s ease-in-out; /* Sidebar hides smoothly */
     display: flex;
     flex-direction: column;
     justify-content: space-between;
 }
 
 /* Sidebar Hidden */
-.sidebar.closed {
-    transform: translateX(-100%); /* Completely hides the sidebar */
+.sidebar.hidden {
+    transform: translateX(-100%); /* Moves sidebar off-screen */
 }
 
 /* Sidebar Toggle Button */
 #toggle-sidebar {
     position: fixed;
-    top: 15px;
+    top: 10px;
     left: 15px;
     background: #2c3e50;
     color: white;
     border: none;
     padding: 10px 15px;
     cursor: pointer;
-    z-index: 1100; /* Ensure button is always visible */
+    z-index: 1001; /* Ensures it's above everything */
     border-radius: 5px;
     font-size: 18px;
 }
@@ -105,21 +100,20 @@ body {
 /* Main Content Styling */
 .content {
     padding: 40px;
-    flex-grow: 1;
     max-width: 900px;
     line-height: 1.6;
-    margin-left: 270px; /* Adds spacing between sidebar and text */
+    margin-left: 270px; /* Adds spacing */
     transition: margin-left 0.3s ease-in-out;
 }
 
 /* Adjust content when sidebar is hidden */
-.sidebar.closed + .content {
-    margin-left: 40px; /* Adds extra padding when sidebar is collapsed */
+.sidebar.hidden + .content {
+    margin-left: 40px; /* Keeps text readable when sidebar is collapsed */
 }
 
 /* Responsive Styles */
 @media (max-width: 768px) {
     .content {
-        margin-left: 40px; /* Adjust margin when sidebar is collapsed */
+        margin-left: 40px;
     }
 }