Upload style.css

style.css

@@ -0,0 +1,78 @@
+/* Kid-friendly styling for StoryTime app */
+
+@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap');
+
+/* Main container styling */
+.main {
+    background-color: #f9f7f0;
+    border-radius: 20px;
+    padding: 20px;
+    font-family: 'Comic Neue', cursive;
+}
+
+/* Headers */
+h1, h2, h3 {
+    color: #3d85c6;
+    font-family: 'Comic Neue', cursive;
+    font-weight: 700;
+}
+
+h1 {
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* Buttons and interactive elements */
+.stButton>button {
+    background-color: #76b5c5;
+    border-radius: 15px;
+    border: 2px solid #3d85c6;
+    color: white;
+    font-family: 'Comic Neue', cursive;
+    font-weight: 700;
+    transition: all 0.3s;
+}
+
+.stButton>button:hover {
+    background-color: #3d85c6;
+    transform: scale(1.05);
+}
+
+/* File uploader */
+.uploadedFileData {
+    border: 2px dashed #76b5c5;
+    border-radius: 15px;
+    padding: 10px;
+}
+
+/* Story text */
+.stTextArea>div>div>textarea {
+    font-family: 'Comic Neue', cursive;
+    font-size: 18px;
+    color: #333;
+    line-height: 1.6;
+}
+
+/* Audio player */
+.stAudio>div {
+    background-color: #e4f5fb;
+    border-radius: 15px;
+    padding: 10px;
+}
+
+/* Success message */
+.stSuccess {
+    background-color: #d1f0c2;
+    border-radius: 15px;
+    border: 2px solid #76c56d;
+}
+
+/* Images */
+img {
+    border-radius: 15px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Spinner */
+.stSpinner {
+    color: #76b5c5;
+}