Update style.css

style.css

@@ -1,7 +1,7 @@
 /* Global Reset */
 * {
   box-sizing: border-box;
-  background-color: #af7db3 !important; /* Soft pastel pink */
+  background-color:#af7db3  !important; /* Soft pastel pink */
   font-family: "Comic Sans MS", cursive, sans-serif; /* Playful font */
 }
 
@@ -11,7 +11,7 @@ html, body {
   width: 100%;
   overflow-x: hidden;
   padding: 0 !important;
-  text-align: center; /* Center all text elements */
+  text-align: center;
 }
 
 /* Title Styling */
@@ -22,7 +22,7 @@ html, body {
   background: linear-gradient(to right, #ff85a2 0%, #ff4da6 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
-  padding: 10px 0;
+  padding: 20px 0;
 }
 
 /* FULLY WHITE Input Box */
@@ -36,17 +36,14 @@ input[type="text"], textarea, .gradio-input, .stTextInput > div {
   width: 100% !important;
   max-width: 300px;
   margin: 0 auto; /* Center it */
-  max-width: 300px;
 }
+
 /* Remove Gradio's Background Inside Input */
 .gradio-container input {
   background-color: white !important; /* Make sure it's white */
 }
 
-
-
-
-/* Cute Buttons
+/* Cute Buttons */
 button {
   border-radius: 20px !important;
   background-color: #ff85a2 !important;
@@ -54,13 +51,15 @@ button {
   font-size: 18px !important;
   padding: 10px 20px !important;
   transition: all 0.3s ease-in-out;
+  display: block;
+  margin: 10px auto;
 }
 
 button:hover {
   background-color: #ff4da6 !important;
   transform: scale(1.05);
 }
-*/
+
 /* Cute Output Styling */
 .result {
   color: #ff1493;
@@ -71,8 +70,7 @@ button:hover {
   text-shadow: 2px 2px 5px rgba(255, 20, 147, 0.5);
 }
 
-/**
-
+/* Cute Animation */
 @keyframes sparkle {
   0% { transform: scale(1); }
   50% { transform: scale(1.1); }
@@ -84,7 +82,7 @@ button:hover {
   animation: sparkle 1s infinite;
 }
 
-
+/* Responsive Tweaks */
 @media (max-width: 768px) {
   .title {
     font-size: 28px;
@@ -94,4 +92,3 @@ button:hover {
     font-size: 20px;
   }
 }
-**/