mobile adjustments

src/styles/styles.css

@@ -370,19 +370,78 @@ main {
     border-left: 4px solid var(--gruvbox-red);
 }
 
-/* Responsive design */
-@media (max-width: 768px) {
+.mobile-menu-toggle {
+  display: none;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 30px;
+  height: 21px;
+  cursor: pointer;
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  z-index: 200;
+}
+
+.mobile-menu-toggle span {
+  display: block;
+  width: 100%;
+  height: 3px;
+  background-color: var(--gruvbox-fg);
+  border-radius: 2px;
+  transition: all 0.3s ease;
+}
+
+@media (max-width: 1100px) {
+    /* Container layout for mobile */
     .container {
         grid-template-columns: 1fr;
         grid-template-areas:
             "header"
-            "main"
-            "sidebar";
+            "main";
     }
 
+    /* Hide sidebar on mobile */
     .sidebar {
-        border-right: none;
-        border-top: 1px solid var(--gruvbox-bg-alt);
+        display: none;
+    }
+    
+    /* Hamburger menu styles */
+    .mobile-menu-toggle {
+        display: flex;
+    }
+    
+    header nav {
+        position: relative;
+    }
+    
+    .main-menu {
+        display: none;
+        flex-direction: column;
+        position: absolute;
+        top: 60px;
+        left: 0;
+        width: 100%;
+        background-color: var(--gruvbox-bg-alt);
+        padding: 20px;
+        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+        z-index: 100;
+    }
+    
+    .main-menu.active {
+        display: flex;
+    }
+    
+    .mobile-menu-toggle.active span:nth-child(1) {
+        transform: translateY(9px) rotate(45deg);
+    }
+    
+    .mobile-menu-toggle.active span:nth-child(2) {
+        opacity: 0;
+    }
+    
+    .mobile-menu-toggle.active span:nth-child(3) {
+        transform: translateY(-9px) rotate(-45deg);
     }
     
     /* Mobile menu adjustments */