Update styles.css

styles.css

@@ -35,24 +35,50 @@ nav ul {
     z-index: 100; /* Ensure the navigation is clickable */
 }
 
-
 nav ul li {
     margin: 0 15px;
+    flex-grow: 1; /* Make each list item take up equal space */
+    text-align: center;
 }
 
 nav ul li a {
     color: white;
     text-decoration: none;
     font-size: 18px;
-    padding: 10px;
-    display: block;
+    padding: 15px 20px; /* Increase padding for larger clickable area */
+    display: block; /* Ensures the entire link area is clickable */
+    width: 100%; /* Make the link take up full width of its parent */
+    text-align: center;
+    box-sizing: border-box; /* Include padding in width calculation */
 }
 
 nav ul li a:hover {
     background-color: rgba(255, 255, 255, 0.2);
     border-radius: 5px;
 }
 
+/* Responsive styles for mobile devices */
+@media (max-width: 768px) {
+    nav ul {
+        flex-direction: column; /* Stack items vertically on mobile */
+        background-color: rgba(0, 0, 0, 0.9); /* Darken background for mobile */
+        position: static; /* Remove absolute positioning for mobile */
+        padding: 10px 0; /* Add padding for better tapping on mobile */
+        z-index: 100; /* Ensure the nav is clickable */
+    }
+
+    nav ul li {
+        margin: 5px 0; /* Reduce vertical margin */
+        flex-grow: 1; /* Make each list item take up full width */
+    }
+
+    nav ul li a {
+        font-size: 16px; /* Adjust font size for readability on small screens */
+        padding: 12px 15px; /* Increase padding for easier tapping */
+        width: 100%; /* Make the buttons take up the full width */
+    }
+}
+
 /* Header content styles */
 .header-content {
     position: absolute;