| body { |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; |
| background-color: #f0f2f5; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| height: 100vh; |
| margin: 0; |
| } |
| .container { |
| background-color: #fff; |
| padding: 2rem; |
| border-radius: 8px; |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
| width: 100%; |
| max-width: 500px; |
| } |
| h1 { |
| text-align: center; |
| color: #1c1e21; |
| } |
| textarea { |
| width: 100%; |
| padding: 0.5rem; |
| border: 1px solid #dddfe2; |
| border-radius: 6px; |
| margin-bottom: 1rem; |
| font-size: 1rem; |
| resize: vertical; |
| } |
| select, button { |
| width: 100%; |
| padding: 0.75rem; |
| border-radius: 6px; |
| border: 1px solid #dddfe2; |
| font-size: 1rem; |
| margin-bottom: 1rem; |
| } |
| button { |
| background-color: #1877f2; |
| color: #fff; |
| border: none; |
| cursor: pointer; |
| } |
| button:hover { |
| background-color: #166fe5; |
| } |
| #output { |
| margin-top: 1rem; |
| padding: 1rem; |
| background-color: #f0f2f5; |
| border-radius: 6px; |
| min-height: 50px; |
| } |
|
|
