style.css

body {
    background-color: #f0f0f0;
    font-family: 'Arial', sans-serif;
    color: #333; /* Slightly darker font color for better readability */
}

.gradio-app {
    max-width: 1200px;
    margin: 20px auto; /* Increased margin for a centered look */
    padding: 20px;
    background-color: #ffffff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* More pronounced shadow for depth */
    border-radius: 8px; /* Rounded corners for modern app feel */
}

.button, .input, .output {
    margin-bottom: 20px;
    border: 1px solid #ddd; /* Subtle borders for inputs and buttons */
    border-radius: 4px; /* Consistent rounded corners */
    padding: 10px; /* Increased padding for better touch interaction */
}

.button {
    background-color: #007bff; /* Brighter blue for a more engaging button */
    color: white;
    font-weight: bold;
    text-transform: uppercase; /* Button text styling */
    letter-spacing: 0.05em; /* Spaced out letters */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

.button:hover {
    background-color: #0056b3; /* Darker shade on hover */
}

.label {
    font-weight: bold;
    margin-bottom: 5px;
    color: #555; /* Darker labels for better visibility */
}

.tab {
    background-color: #e0e0e0;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    margin-right: 5px; /* Space between tabs */
    transition: all 0.2s ease; /* Smooth transition for interaction */
    border-radius: 20px; /* Rounded tabs for a softer look */
}

.tab.active {
    background-color: #007bff;
    color: white; /* Active tab with white text */
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Consistent spacing between elements */
}

.image {
    border-radius: 5px;
    max-width: 100%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow for images */
}

.markdown {
    padding: 15px;
    background-color: #f8f9fa; /* Light background for markdown sections */
    border-left: 4px solid #007bff; /* Highlight bar */
    margin-bottom: 20px; /* Spacing below text blocks */
    border-radius: 4px; /* Matching rounded corners */
}