Update style.css

style.css

@@ -1,113 +1,16 @@
-/* Force Full Page Background - Dark Pink */
-html, body, .gradio-container {
-  background-color: #d63384 !important; /* Dark Pink */
-  font-family: "Comic Sans MS", cursive, sans-serif; /* Cute Font */
-  color: white !important;
-  height: 100vh;
-  width: 100vw;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+body {
+    background-color: #32CD32;  /* Green background */
+    color: white;               /* White text */
+    font-family: 'Comic Sans MS', cursive, sans-serif;
 }
 
-/* Centered Box - Lighter Pink with White Border */
-.container-box {
-  background-color: #f78fb3 !important; /* Lighter Pink */
-  border: 4px solid white !important; /* White Border */
-  border-radius: 20px;
-  padding: 40px;
-  width: 90%;
-  max-width: 450px;
-  text-align: center;
-  box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
+.stTextInput input {
+    background-color: white;
+    color: black;
 }
 
-/* Title Styling */
-.title {
-  font-size: 36px;
-  font-weight: bold;
-  text-align: center;
-  margin-bottom: 10px;
+.stButton button {
+    background-color: white;
+    color: green;
 }
 
-/* Description */
-.description {
-  font-size: 16px;
-  text-align: center;
-  margin-bottom: 20px;
-}
-
-/* Input Box - White with Dark Pink Border */
-input[type="text"], .gradio-input {
-  background-color: white !important; /* White Input */
-  border: 3px solid #d63384 !important; /* Dark Pink Border */
-  border-radius: 10px;
-  padding: 10px;
-  color: black !important; /* Input text color */
-  text-align: center; /* Center text */
-  width: 80%;
-  max-width: 300px;
-  margin: 10px auto;
-  display: block;
-}
-
-/* Cute Buttons */
-button {
-  border-radius: 20px !important;
-  background-color: #d63384 !important; /* Dark Pink */
-  color: white !important;
-  font-size: 18px !important;
-  padding: 10px 20px !important;
-  transition: all 0.3s ease-in-out;
-  display: block;
-  margin: 10px auto;
-  border: 3px solid white;
-}
-
-button:hover {
-  background-color: #b82e72 !important; /* Slightly Darker Pink */
-  transform: scale(1.05);
-}
-
-/* Cute Output Styling */
-.result {
-  color: white;
-  font-size: 20px;
-  font-weight: bold;
-  padding-top: 10px;
-  text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.3);
-  text-align: center;
-}
-
-/* Fix Hugging Face's default black background */
-.gradio-container, .gradio-app {
-  background-color: transparent !important; /* Ensure it uses body’s color */
-}
-
-/* Make Sure Everything is Centered */
-.centered {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-}
-
-/* Responsive Tweaks */
-@media (max-width: 768px) {
-  .container-box {
-    width: 90%;
-  }
-  
-  .title {
-    font-size: 28px;
-  }
-
-  .description {
-    font-size: 14px;
-  }
-  
-  .result {
-    font-size: 18px;
-  }
-}