Update app.py

app.py

@@ -94,7 +94,7 @@ st.set_page_config(
     layout="centered"
 )
 
-# Custom CSS for kid-friendly styling with improved readability
+# Custom CSS for kid-friendly styling with black text
 st.markdown("""
     <style>
     .main {
@@ -103,8 +103,8 @@ st.markdown("""
         border-radius: 15px;
     }
     .stButton>button {
-        background-color: #e6f3ff;
-        color: #333;
+        background-color: #ffcccb;
+        color: #000000;  /* Black text */
         border-radius: 10px;
         border: 2px solid #ff9999;
         font-size: 18px;
@@ -113,38 +113,38 @@ st.markdown("""
         transition: all 0.3s;
     }
     .stButton>button:hover {
-        background-color: #e6f3ff;
-        color: white;
+        background-color: #ff9999;
+        color: #ffffff;  /* White text on hover for contrast */
         transform: scale(1.05);
     }
     .stFileUploader {
-        background-color: #e6f3ff;
+        background-color: #fff3cd;
         border: 2px dashed #ffca28;
         border-radius: 10px;
         padding: 10px;
     }
     /* Style for the file uploader's inner text */
     .stFileUploader div[role="button"] {
-        background-color: #333333;  /* Darker background for contrast */
+        background-color: #cccccc;  /* Light gray background for contrast with black text */
         border-radius: 10px;
         padding: 10px;
     }
     .stFileUploader div[role="button"] > div {
-        color: #1e3a8a !important;  /* Dark Blue */
+        color: #000000 !important;  /* Black text */
         font-size: 16px;
     }
     /* Style for the "Browse files" button inside the file uploader */
     .stFileUploader button {
-        background-color: #1e3a8a !important;  /* Dark Blue */
-        color: #ffffff !important;  /* White text for readability */
+        background-color: #ffca28 !important;  /* Yellow button background */
+        color: #000000 !important;  /* Black text */
         border-radius: 8px !important;
         border: 1px solid #ffb300 !important;
         padding: 5px 15px !important;
         font-weight: bold !important;
     }
     .stFileUploader button:hover {
-        background-color: #1e3a8a !important;  /* Dark Blue */
-        color: #ffffff !important;
+        background-color: #ffb300 !important;  /* Slightly darker yellow on hover */
+        color: #000000 !important;  /* Keep black text */
     }
     .stImage {
         border: 3px solid #81c784;
@@ -158,19 +158,19 @@ st.markdown("""
         text-align: center;
         font-size: 24px;
         font-weight: bold;
-        color: #333;
+        color: #000000;  /* Black text */
         margin-bottom: 10px;
     }
     .caption-box, .story-box {
-        background-color: #1e3a8a;
+        background-color: #f0f4c3;
         padding: 15px;
         border-radius: 10px;
         border: 2px solid #d4e157;
         margin-bottom: 20px;
-        color: #1e3a8a;  /* Dark blue text for better readability */
+        color: #000000;  /* Black text */
     }
     .caption-box b, .story-box b {
-        color: #1e3a8a;  /* Ensure the bold text (header) is also dark blue */
+        color: #000000;  /* Black text for bold headers */
     }
     </style>
 """, unsafe_allow_html=True)