* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background-color: #f4f4f4; color: #333; line-height: 1.6; padding: 20px; } .container { max-width: 800px; margin: auto; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h1 { text-align: center; color: #333; margin-bottom: 20px; font-size: 2.5rem; } label { font-size: 1.2rem; margin-bottom: 10px; display: block; color: #555; } textarea { width: 100%; padding: 10px; margin-bottom: 20px; border-radius: 4px; border: 1px solid #ccc; font-size: 1rem; resize: vertical; } .btn { background-color: #007bff; color: #fff; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; } .btn:hover { background-color: #0056b3; } .btn-error { background-color: #dc3545; } .btn-error:hover { background-color: #c82333; } .results { margin-top: 20px; } .results h2 { margin-bottom: 15px; color: #333; } .results p { margin-bottom: 10px; font-size: 1.1rem; } .error-title { color: #dc3545; margin-top: 15px; font-size: 1.2rem; } .error-list { list-style: none; margin-top: 10px; } .error-item { color: #dc3545; margin-bottom: 5px; } .download-buttons { margin-top: 20px; } @media (max-width: 768px) { .container { padding: 15px; } h1 { font-size: 2rem; } .btn, .btn-error { width: 100%; margin-bottom: 10px; } .results p { font-size: 1rem; } }