/* General Body Styling */ body { font-family: 'Arial', sans-serif; background-color: #f4f4f4; margin: 0; padding: 20px; color: #333; } /* Form Styling */ form { background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); max-width: 500px; margin: 30px auto; } input[type="file"] { border: 1px solid #ddd; padding: 10px; border-radius: 4px; width: calc(100% - 22px); } input[type="submit"] { background-color: #007bff; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; margin-top: 10px; } input[type="submit"]:hover { background-color: #0056b3; } /* Output Styling */ h2, h3 { color: #007bff; } p { background: #fff; padding: 10px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin-bottom: 10px; } strong { color: #333; } /* Responsive Design */ @media (max-width: 600px) { form { width: 100%; padding: 15px; } input[type="file"], input[type="submit"] { width: calc(100% - 20px); } } /* Table Styling */ table { width: 100%; border-collapse: collapse; margin-top: 20px; } table, th, td { border: 1px solid #ddd; } th, td { text-align: left; padding: 8px; } th { background-color: #f4f4f4; } /* Error Message Styling */ .error { color: red; margin-top: 20px; } /* Responsive Table */ @media (max-width: 600px) { table { display: block; overflow-x: auto; } }