refactor

public/css/flash-messages.css

@@ -1,23 +1,17 @@
 .flash-success {
-  background-color: rgba(152, 255, 176, 0.7);
-  border-color: #c3e6cb;
-  color: #00811e;
-  padding: 1rem;
-  margin-bottom: 1rem;
-  border: 1px solid transparent;
-  border-radius: 7px;
-  font-size: 1.5rem;
+  background-color: #dff0d8;
+  color: #3c763d;
+  padding: 1em;
+  border-radius: 4px;
+  width: 80%;
   text-align: center;
 }
 
 .flash-error {
-  background-color: rgba(255, 126, 137, 0.7);
-  border-color: #f5c6cb;
-  color: #a00a19;
-  padding: 1rem;
-  margin-bottom: 1rem;
-  border: 1px solid transparent;
-  border-radius: 7px;
-  font-size: 1.5rem;
+  background-color: #f2dede;
+  color: #a94442;
+  padding: 1em;
+  border-radius: 4px;
+  width: 80%;
   text-align: center;
 }

public/css/form.css

@@ -8,3 +8,43 @@
   border-radius: 5px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
+
+.form-heading {
+  font-size: 2em;
+  margin-bottom: 0.5em;
+}
+
+.form-subheading {
+  font-size: 1.2em;
+  margin-bottom: 1em;
+}
+
+.signup-form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.form-label {
+  font-size: 1em;
+  margin-bottom: 0.2em;
+}
+
+.form-input {
+  font-size: 1em;
+  padding: 0.5em;
+  width: 100%;
+  max-width: 300px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.submit-button {
+  background-color: #007bff;
+  color: white;
+  padding: 0.5em 1em;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-top: 1em;
+}

public/css/main-container.css

@@ -26,3 +26,13 @@
 hr {
   background-color: var(--green);
 }
+
+.center-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  margin: auto;
+  background-color: #f7f7f7;
+}