Update style.css

style.css

@@ -1,11 +1,82 @@
-.gradio-container {
-    background-color: #c48fc4;  /* Pink background */
-    font-family: "Comic Sans MS";  /* Fun font */
+/* Global Reset */
+* {
+  box-sizing: border-box;
+  background-color: #ffe4ec !important; /* Soft pastel pink */
+  font-family: "Comic Sans MS", cursive, sans-serif; /* Playful font */
 }
-.gradio-button {
-    background-color: #ff66b2;  /* Pink button */
-    color: white;  /* White text */
+
+/* Full Page Styling */
+html, body {
+  height: 100vh !important;
+  width: 100%;
+  overflow-x: hidden;
+  padding: 0 !important;
 }
-.gradio-input {
-    background-color: #ffccff;  /* Pink input box */
+
+/* Title Styling */
+.title {
+  font-size: 36px;
+  font-weight: bold;
+  text-align: center;
+  background: linear-gradient(to right, #ff85a2 0%, #ff4da6 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  padding: 10px 0;
+}
+
+/* Cute Input Box */
+.stTextInput > div {
+  border-radius: 20px;
+  border: 2px solid #ff69b4 !important; /* Barbie pink border */
+  background-color: white !important;
+  padding: 8px;
+  color: #ff1493 !important;
+}
+
+/* Cute Buttons */
+button {
+  border-radius: 20px !important;
+  background-color: #ff85a2 !important;
+  color: white !important;
+  font-size: 18px !important;
+  padding: 10px 20px !important;
+  transition: all 0.3s ease-in-out;
+}
+
+button:hover {
+  background-color: #ff4da6 !important;
+  transform: scale(1.05);
+}
+
+/* Cute Output Styling */
+.result {
+  color: #ff1493;
+  font-size: 24px;
+  text-align: center;
+  font-weight: bold;
+  padding-top: 10px;
+  text-shadow: 2px 2px 5px rgba(255, 20, 147, 0.5);
+}
+
+/* Cute Animation */
+@keyframes sparkle {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+  100% { transform: scale(1); }
+}
+
+.sparkle {
+  display: inline-block;
+  animation: sparkle 1s infinite;
+}
+
+/* Responsive Tweaks */
+@media (max-width: 768px) {
+  .title {
+    font-size: 28px;
+  }
+  
+  .result {
+    font-size: 20px;
+  }
 }