Update index.css

src/index.css

@@ -58,39 +58,35 @@ h1 {
 p {
   margin: 0;
 }
-
+/* Styles for the navigation */
 nav {
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
+  padding: 10px;
+  background: #fff; /* Add a background for visibility */
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Box shadow for subtle depth */
+  border-radius: 10px; /* Optional: for rounded corners */
 }
 
 .nav-links {
   display: flex;
   gap: 20px;
+  padding: 10px;
 }
 
 .nav-links a {
   text-decoration: none;
   color: #03C03C;
-  font-weight: bold; 
+  font-weight: bold; /* Make text bold */
+  padding: 8px 12px;
 }
 
-/* Responsive styles */
-
-
-/* Responsive styles */
-@media (max-width: 768px) {
-  .nav-links {
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 10px;
-  }
+.nav-links a:hover {
+  color: #028a2f; /* Slightly darker green on hover */
 }
 
-/* Main Styles */
 
 main {
   display: flex;