Minor CSS cleanup (#5)

Author: DoctorLai

src/App.css

@@ -1,65 +1,26 @@
+/* Root App Container */
 .app {
   background-color: #ffffff;
   color: #000000;
   transition: background-color 0.3s ease, color 0.3s ease;
   min-height: 100vh;
   padding: 1rem;
+  font-family: Arial, sans-serif;
 }
 
 .app.dark {
   background-color: #121212;
   color: #ffffff;
 }
 
-textarea {
-  background-color: #f0f0f0;
-  color: #000;
-  border: 1px solid #ccc;
-  font-family: monospace;
-  font-size: 14px;
-  padding: 0.5rem;
-}
-
-.app.dark textarea {
-  background-color: #1e1e1e;
-  color: #eee;
-  border: 1px solid #444;
-}
-
-button {
-  padding: 0.5rem 1rem;
-  font-size: 1rem;
-  margin: 0.5rem;
-  cursor: pointer;
-  border-radius: 7px;
-}
-
-footer p {
-  margin: 0;
-  font-size: 1rem;
-  color: #555;
-}
-
-footer a {
-  color: #007bff;
-  text-decoration: underline;
-}
-
-footer a:hover {
-  color: #0056b3;
-}
-
-/* App.css */
-
-/* Basic page layout */
+/* Main content container */
 .app-container {
   max-width: 800px;
   margin: 0 auto;
   padding: 2rem;
-  font-family: Arial, sans-serif;
 }
 
-/* Header styling */
+/* Header */
 h1 {
   text-align: center;
   font-size: 2rem;
@@ -78,19 +39,46 @@ textarea {
   resize: vertical;
   box-sizing: border-box;
   margin-bottom: 1rem;
+  background-color: #f0f0f0;
+  color: #000;
+  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+}
+
+.app.dark textarea {
+  background-color: #1e1e1e;
+  color: #eee;
+  border-color: #444;
+}
+
+/* For textarea containers holding two textareas side-by-side */
+.textarea-container {
+  display: flex;
+  gap: 1rem; /* space between textareas */
+  margin-bottom: 1rem;
+}
+
+.textarea-container textarea {
+  flex: 1; /* equal width */
+  min-height: 300px;
 }
 
 /* Buttons */
 button {
-  padding: 0.6rem 1.2rem;
-  font-size: 1rem;
+  padding: 0.6rem 1.2rem;       /* same vertical and horizontal padding */
+  font-size: 1rem;              /* same font size */
+  line-height: 1.2;             /* consistent line height */
   cursor: pointer;
   background-color: #007bff;
   color: white;
   border: none;
   border-radius: 4px;
   transition: background-color 0.2s ease;
-  margin-bottom: 1rem;
+  margin: 0.5rem 0.5rem 1rem 0.5rem; /* uniform margin */
+  box-sizing: border-box;       /* include padding/border in size */
+  display: inline-flex;         /* better alignment */
+  align-items: center;          /* vertical center content */
+  height: 40px;                 /* fixed height for all buttons */
+  min-width: 100px;             /* optional: consistent min width */
 }
 
 button:hover {
@@ -105,28 +93,26 @@ button:hover {
   background-color: #f9f9f9;
 }
 
-/* Optional: Error message */
+/* Error messages */
 .error-message {
   color: red;
   margin-top: 0.5rem;
   font-size: 0.9rem;
 }
 
-.textarea-container {
-  display: flex;
-  gap: 1rem; /* Space between the two textareas */
-  margin-bottom: 1rem;
+/* Footer styles */
+footer p {
+  margin: 0;
+  font-size: 1rem;
+  color: #555;
 }
 
-/* Style both textareas */
-.textarea-container textarea {
-  flex: 1; /* Each takes up 50% of the container */
-  min-height: 300px;
-  padding: 1rem;
-  font-size: 1rem;
-  font-family: monospace;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  resize: vertical;
-  box-sizing: border-box;
+footer a {
+  color: #007bff;
+  text-decoration: underline;
+  transition: color 0.2s ease;
+}
+
+footer a:hover {
+  color: #0056b3;
 }