body { font-family: 'Courier New', monospace; background: #1a1a1a; color: #ffffff; margin: 0; padding: 10px; /* Reduced for mobile */ font-size: 18px; /* Balanced size for readability */ display: flex; flex-direction: column; flex: 1 0 auto; } a { color: #00ff00; } footer { flex-shrink: 0; text-align: center; } .container { max-width: 1000px; /* Prevents it from stretching too wide on desktop */ margin: 20px auto; background: #222; padding: 20px; border: 1px solid #00ff00; box-sizing: border-box; /* Ensures padding doesn't break layout */ } .container > h1 { color: #00ff00; } h1 { font-size: 1.5rem; word-wrap: break-word; } input[type="text"], input[type="email"] { width: 100%; padding: 12px; margin: 10px 0; background: #000; color: #00ff00; border: 1px solid #00ff00; box-sizing: border-box; font-size: 16px; /* Prevents iOS from zooming in on focus */ } button { background: #00ff00; color: #000; padding: 15px 20px; border: none; font-weight: bold; cursor: pointer; width: 100%; /* Full width button is easier to tap on mobile */ font-family: inherit; } .alert { padding: 10px; margin-bottom: 10px; border: 1px solid white; font-size: 14px; } .alert.error { border-color: red; color: red; } .alert.success { border-color: #00ff00; } ul { padding-left: 20px; } li { margin-bottom: 10px; } /* Small screen adjustments */ @media (max-width: 480px) { body { font-size: 16px; } .container { padding: 15px; } h1 { font-size: 1.2rem; } }