Update app.py

app.py

@@ -40,17 +40,30 @@ body {
     background: #1e1e1e;
     border-radius: 10px;
     padding: 15px;
+    margin-bottom: 20px;
     text-align: center;
+    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.4);
+}
+.gr-column {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin: 10px;
 }
 .play-btn {
-    background-color: transparent;
-    border: none;
-    font-size: 24px;
-    color: #FF5722;
+    background-color: #FF5722 !important;
+    color: white;
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    font-size: 30px;
+    margin-right: 15px;
     cursor: pointer;
+    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
 }
 .play-btn:hover {
-    color: #ff8a50;
+    background-color: #ff8a50;
+    box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.3);
 }
 .playing {
     animation: pulse 1s infinite alternate;
@@ -59,6 +72,13 @@ body {
     0% { transform: scale(1); }
     100% { transform: scale(1.1); }
 }
+.voice-info {
+    color: #ffffff;
+    text-align: left;
+}
+.voice-info b {
+    font-weight: bold;
+}
 """
 
 # Create layout
@@ -76,8 +96,8 @@ with gr.Blocks(css=custom_css) as demo:
                         audio = gr.Audio(play_audio(voice["file"]), autoplay=False, elem_id=voice["name"], visible=False)
                         # Play Button with FontAwesome Icon
                         btn = gr.Button("▶", elem_classes="play-btn")
-                        # Voice Info
-                        info = gr.Markdown(f"**{voice['name']}**<br>{voice['gender']} | {voice['country']}")
+                        # Voice Info (Name in Bold, Other Info Normal)
+                        info = gr.Markdown(f"<div class='voice-info'><b>{voice['name']}</b><br>{voice['gender']} | {voice['country']}</div>")
                         
                         def start_animation():
                             return gr.update(elem_classes="playing")