/* Global styles */ :root { --primary-color: #9D0208; --accent-color: #3366cc; --secondary-color: #ffdd00; --text-color: #000000; --light-gray: #f5f5f5; --border-color: #e0e0e0; --border-radius: 8px; } body { background-color: white; color: var(--text-color); font-family: 'Inter', sans-serif; } h1 { text-align: center; display: block; font-size: 2.2rem; margin: 0.2em 0; font-weight: 800; letter-spacing: -0.01em; } /* Header styles */ .header { display: flex; align-items: center; justify-content: center; padding: 1.5rem 0; margin-bottom: 1rem; } .toucan-logo { margin-right: 1rem; } .title-container { display: flex; flex-direction: column; align-items: flex-start; } .subtitle { font-size: 1.2rem; color: #666; margin-bottom: 0.3rem; } .author { font-size: 0.9rem; color: #777; } .author a { color: var(--primary-color); text-decoration: none; } .author a:hover { text-decoration: underline; } /* Duplicate button styles */ #duplicate-button { margin: 1.5rem auto; display: block; color: #fff; background: var(--primary-color); border-radius: 100vh; padding: 0.5rem 2rem; font-weight: 500; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: all 0.2s ease; } #duplicate-button:hover { background: #7d0106; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transform: translateY(-1px); } /* Chat interface modifications */ .gradio-container { max-width: 1000px !important; margin-left: auto !important; margin-right: auto !important; } .message.user { background-color: var(--light-gray) !important; border-left: 3px solid #666 !important; } .message.bot { background-color: #fffdf7 !important; border-left: 3px solid var(--primary-color) !important; } /* Tables */ table { border-collapse: collapse; width: 100%; margin: 1.5rem 0; font-size: 0.9rem; } table th { background-color: var(--light-gray); border: 1px solid var(--border-color); padding: 0.75rem; text-align: left; } table td { border: 1px solid var(--border-color); padding: 0.75rem; } table tr:nth-child(even) { background-color: #fafafa; } /* Code blocks */ code { font-family: 'IBM Plex Mono', monospace; background-color: var(--light-gray); padding: 0.2em 0.4em; border-radius: 3px; font-size: 0.9em; } /* Footer */ .footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color); text-align: center; font-size: 0.9rem; color: #666; } .footer a { color: var(--primary-color); text-decoration: none; } .footer a:hover { text-decoration: underline; } /* Responsive adjustments */ @media (max-width: 768px) { .header { flex-direction: column; text-align: center; } .toucan-logo { margin-right: 0; margin-bottom: 1rem; } .title-container { align-items: center; } }