body { font-family: "Segoe UI", Arial, sans-serif; margin: 0; padding: 0; background-color: #2b2b2b; color: #e0e0e0; } .container { max-width: 90%; margin: 50px auto; padding: 15px; background: #333333; box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1); border-radius: 5px; } #responseContainer { margin-top: 15px; border: 1px solid #444; padding: 10px; min-height: 100px; background-color: #3a3a3a; color: #e0e0e0; } .btn-primary { background-color: #007bff; color: white; border: none; } #userInput { margin-bottom: 10px; background-color: #424242; /* Darker shade for textarea */ color: #e0e0e0; /* Light text for readability */ border: 1px solid #555; /* Adjusted border color */ padding: 10px; /* Added padding for better text visibility */ } #patternSelector { margin-bottom: 10px; background-color: #424242; /* Darker shade for textarea */ color: #e0e0e0; /* Light text for readability */ border: 1px solid #555; /* Adjusted border color */ padding: 10px; /* Added padding for better text visibility */ height: 40px; } @media (min-width: 768px) { .container { max-width: 80%; } } .light-theme { background-color: #fff; color: #333; } .light-theme .container { background: #f0f0f0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .light-theme #responseContainer, .light-theme #userInput, .light-theme #patternSelector { background-color: #fff; color: #333; border: 1px solid #ddd; } .light-theme .btn-primary { background-color: #0066cc; color: white; } .hidden { display: none; }