css restore

templates/main.css

@@ -1,8 +1,8 @@
 /* 
- * A modern CSS reset and some basic site-wide styles.
- * This ensures more consistent styling across different browsers.
+ * Dark and Purple Theme
+ * Includes a modern CSS reset for cross-browser consistency.
  */
-
+ 
 /* Box-sizing reset */
 *,
 *::before,
@@ -25,7 +25,7 @@ dl,
 dd {
   margin: 0;
 }
-
+ 
 /* Basic body styling */
 body {
   min-height: 100vh;
@@ -33,8 +33,10 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
     "Segoe UI Symbol";
-  background-color: #f0f2f5;
-  color: #333;
+  background-color: #1a1a2e; /* Dark blue/purple background */
+  color: #e0e0e0; /* Light text color for contrast */
+  display: grid;
+  place-items: center;
 }
 
 /* Make images responsive */
@@ -44,13 +46,82 @@ picture {
   display: block;
 }
 
-/* Basic styling for a container */
-.container {
-  width: 90%;
-  max-width: 1200px;
-  margin: 2rem auto;
-  padding: 2rem;
-  background-color: #fff;
-  border-radius: 8px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+/* Login Page Styles */
+.login-container {
+  width: 100%;
+  padding: 1rem;
+}
+
+.login-box {
+  width: 100%;
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 2.5rem;
+  background-color: #16213e; /* Slightly lighter dark blue */
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+  text-align: center;
+}
+
+.login-box h1 {
+  color: #ffffff;
+  margin-bottom: 0.5rem;
+}
+
+.login-box p {
+  margin-bottom: 2rem;
+  color: #a0a0a0;
+}
+
+.input-group {
+  margin-bottom: 1.5rem;
+  text-align: left;
+}
+
+.input-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-size: 0.9rem;
+  color: #c0c0c0;
+}
+
+.input-group input {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  background-color: #1a1a2e;
+  border: 1px solid #4f4f7a;
+  border-radius: 6px;
+  color: #e0e0e0;
+  font-size: 1rem;
+}
+
+.btn-primary {
+  width: 100%;
+  padding: 0.75rem;
+  border: none;
+  border-radius: 6px;
+  background-color: #7f5af0; /* Bright purple accent */
+  color: #ffffff;
+  font-size: 1.1rem;
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.btn-primary:hover {
+  background-color: #6a48d7; /* Darker purple on hover */
+}
+
+.login-footer {
+  margin-top: 1.5rem;
+}
+
+.login-footer a {
+  color: #7f5af0;
+  text-decoration: none;
+  font-size: 0.9rem;
+}
+
+.login-footer a:hover {
+  text-decoration: underline;
 }