Make the form look slightly better without the blue outline

1 files changed, 15 insertions, 10 deletions

diff --git a/alphabetlearning/static/css/project.css b/alphabetlearning/static/css/project.css
index 08d743c..e0b1a1d 100644
--- a/alphabetlearning/static/css/project.css
+++ b/alphabetlearning/static/css/project.css
@@ -96,26 +96,31 @@ button {
 }
 
 input {
-    border: 6px solid rgb(253, 119, 119);
-    border-radius: 4px;
-    font-size: 2.0rem;
+    border: 6px solid rgb(253, 119, 119); /* Outer border */
+    border-radius: 8px; /* Slightly rounded corners */
+    font-size: 1.8rem; /* Adjusted font size for better proportions */
     display: block;
-    padding: 10px;
-    width: 100%;
-    height: 100px;
+    padding: 12px; /* Slightly larger padding for a clean look */
+    width: 100%; /* Full width */
+    height: auto; /* Dynamic height based on content */
+    outline: none; /* Remove default outline */
+    transition: border-color 0.3s, box-shadow 0.3s; /* Smooth transition */
 }
 
+
+/* Focus state */
 input:focus {
-    border-color: darkgray;
+    border-color: rgb(253, 80, 80); /* Slightly darker red border */
+    box-shadow: 0 0 5px rgba(253, 80, 80, 0.8); /* Add a subtle red glow */
 }
 
+/* Optional placeholder styling for modern look */
 input::placeholder {
-    color: darkgray;
-    font-size: 2.0rem;
+    color: #bbb; /* Light gray */
+    font-style: italic; /* Subtle italics for differentiation */
 }
 
 
-
 .custom-text {
     font-family: "Roboto", sans-serif;
     font-size: 1.1rem;