body { background-color: #f8f9fa; font-family: 'Inter', sans-serif; } .kanban-board { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1rem; } .kanban-column { border-radius: 0.5rem; padding: 1rem; width: 320px; flex-shrink: 0; transition: background-color 0.3s ease; } .kanban-column h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 1rem; } .task-card { border: 1px solid #dee2e6; border-radius: 0.25rem; padding: 1rem; margin-bottom: 1rem; cursor: grab; box-shadow: 0 1px 3px rgba(0,0,0,0.05); transition: background-color 0.3s ease, color 0.3s ease; } .task-card:active { cursor: grabbing; } /* Column and Task Colors */ #kanban-column-to-do { background-color: #e9ecef; /* Light Grey */ } #kanban-column-to-do .task-card { background-color: #ffffff; /* White */ color: #212529; /* Dark Grey */ } #kanban-column-in-progress { background-color: #dbeafe; /* Light Blue */ } #kanban-column-in-progress .task-card { background-color: #3b82f6; /* Blue */ color: #ffffff; /* White */ } #kanban-column-done { background-color: #d1fae5; /* Light Green */ } #kanban-column-done .task-card { background-color: #10b981; /* Green */ color: #ffffff; /* White */ }