/* app.css */ body { background-color: #f5f5f5; margin: 0; padding: 0; } .gradio-container { font-family: 'Roboto', sans-serif; margin: 0 auto; padding: 20px; max-width: 100%; /* Ensure the container doesn't exceed the viewport width */ overflow-x: hidden; /* Hide horizontal overflow */ } .gr-button { background-color: #6200EE; color: white; font-weight: bold; cursor: pointer; border: none; padding: 10px 20px; margin: 5px; border-radius: 4px; transition: background-color 0.3s; } .gr-button:hover { background-color: #3700B3; } h1 { color: #333; text-align: center; font-weight: normal; } .card { background-color: white; border-radius: 4px; margin: 10px 0; padding: 15px; box-sizing: border-box; /* Include padding and border in the total width and height */ word-wrap: break-word; /* Break long words to prevent overflow */ overflow-wrap: break-word; /* For better compatibility */ max-width: 100%; /* Ensure cards don't exceed the container width */ } .card-content h3 { margin-top: 0; font-size: 1.2em; color: #6200EE; } .card-content p { margin: 5px 0; color: #555; } .card-content a { color: #1E88E5; text-decoration: none; word-break: break-all; /* Break long URLs to prevent overflow */ } .card-content a:hover { text-decoration: underline; } .dead-link { border: 2px solid #D32F2F; } .dead-link .card-content h3, .dead-link .card-content p, .dead-link .card-content a { color: #D32F2F; } @media screen and (max-width: 600px) { .card-content h3 { font-size: 1em; } }