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 */
}