| |
| body { |
| font-family: 'Courier New', Courier, monospace; |
| background-color: #181818; |
| color: white; |
| margin: 0; |
| padding: 0; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| height: 100vh; |
| } |
|
|
| |
| .terminal-container { |
| width: 80%; |
| max-width: 800px; |
| background-color: #2d2d2d; |
| border-radius: 10px; |
| padding: 20px; |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); |
| } |
|
|
| |
| .header { |
| display: flex; |
| justify-content: space-between; |
| margin-bottom: 20px; |
| font-size: 18px; |
| } |
|
|
| .header h1 { |
| margin: 0; |
| } |
|
|
| |
| .terminal { |
| display: flex; |
| flex-direction: column; |
| height: 300px; |
| overflow-y: auto; |
| } |
|
|
| .terminal .output { |
| flex-grow: 1; |
| white-space: pre-wrap; |
| word-wrap: break-word; |
| } |
|
|
| .prompt { |
| color: #00ff00; |
| } |
|
|
| .input { |
| background-color: #181818; |
| border: none; |
| color: white; |
| padding: 10px; |
| width: 100%; |
| font-size: 16px; |
| outline: none; |
| } |
|
|
| |
| .input:focus { |
| border: 1px solid #00ff00; |
| } |
|
|
