import gradio as gr

custom_css = """
body {
    background-color: #1a1a1a; /* Very dark gray background for the entire page */
    color: #e0e0e0; /* Light gray text color for better contrast */
}
.gradio-container {
    background-color: #2c2c2c; /* Slightly lighter dark gray for the main Gradio app container */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Darker shadow for dark theme */
}
/* Style for the centered text */
.center-text {
    text-align: center;
    width: 100%; /* Ensure it takes full width to center content */
}
.gradio-markdown {
    color: #e0e0e0; /* Ensure markdown text is light */
}
"""

with gr.Blocks(css=custom_css) as demo:
    gr.Markdown("# My Custom Styled App", elem_classes="center-text") # Centering the main title as well

    with gr.Row(elem_classes="center-text"):
        gr.Markdown("""
        🎯 إجابات قاطعة: يُسمح ✅ | لا يُسمح ❌ | مطلوب 📋
        ⚖️ مراجع قانونية دقيقة: CBK | CMA | AML | المبادئ القانونية
        """)

    gr.Textbox(label="Enter text here")
    gr.Button("Submit")

demo.launch()