.user-selection-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; } .user-selection-card { background-color: white; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); width: 90%; max-width: 400px; } .user-selection-card h2 { margin: 0 0 1.5rem 0; text-align: center; color: #333; } .user-list { display: flex; flex-direction: column; gap: 1rem; } .user-button { padding: 1rem; border: none; border-radius: 4px; background-color: #007bff; color: white; font-size: 1rem; cursor: pointer; transition: background-color 0.2s; } .user-button:hover { background-color: #0056b3; } /* Mobile styles */ @media (max-width: 480px) { .user-selection-card { padding: 1.5rem; width: 95%; } .user-button { padding: 0.875rem; font-size: 0.9rem; } }