Update styles.css

styles.css

@@ -12,6 +12,7 @@ body {
     padding: 20px;
     border-radius: 5px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    color: black;
 }
 
 h1 {
@@ -35,7 +36,7 @@ nav ul li {
 
 nav ul li a {
     text-decoration: none;
-    color: #28a745;
+    color: red;
     font-weight: bold;
 }
 
@@ -57,7 +58,7 @@ button {
     cursor: pointer;
 }
 
-button:hover {
+button:not(.back-button):hover {
     background-color: #c82333; /* Darker red on hover */
 }
 
@@ -82,3 +83,48 @@ button:hover {
     text-decoration: underline; /* Underline on hover */
 }
 
+/* Add styles for input fields to center and organize them */
+input[type="text"],
+input[type="email"],
+input[type="password"],
+textarea {
+    width: 100%; /* Full width */
+    padding: 10px; /* Padding for better spacing */
+    margin: 10px 0; /* Margin for spacing between fields */
+    border: 1px solid #ccc; /* Light border */
+    border-radius: 4px; /* Rounded corners */
+    box-sizing: border-box; /* Include padding and border in element's total width and height */
+}
+
+.form-container {
+    display: flex; /* Use flexbox for alignment */
+    flex-direction: column; /* Stack items vertically */
+    align-items: center; /* Center items horizontally */
+    margin: auto; /* Center the container */
+    max-width: 600px; /* Limit the width */
+}
+
+/* Add media queries for better responsiveness on smaller screens */
+@media (max-width: 600px) {
+    .container {
+        padding: 10px; /* Reduce padding on smaller screens */
+    }
+
+    nav ul li {
+        display: block; /* Stack navigation items vertically */
+        margin: 10px 0; /* Add margin for spacing */
+    }
+
+    h1 {
+        font-size: 1.5em; /* Adjust heading size */
+    }
+
+    p {
+        font-size: 1em; /* Adjust paragraph size */
+    }
+
+    button {
+        padding: 15px; /* Increase button padding for easier tapping */
+    }
+}
+