body{margin:10%;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:#add8e6;color:#333}h1{text-align:center;color:#2c3e50;margin-bottom:30px}h2{color:#34495e;border-bottom:2px solid #ccc;padding-bottom:5px;margin-top:30px}.container{max-width:700px;margin:40px auto;padding:30px;background:#fffffff2;border-radius:10px;box-shadow:0 10px 30px #0000000d}form{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}input[type=text],input[type=datetime-local]{padding:10px;border:1px solid #ccc;border-radius:6px;flex:1;min-width:200px}input:focus{border-color:#2980b9;outline:none;box-shadow:0 0 3px #2980b980}button{background-color:#3498db;color:#fff;border:none;padding:10px 15px;border-radius:6px;cursor:pointer;transition:background-color .3s ease}button:hover{background-color:#2980b9}button:disabled{background-color:#bdc3c7;cursor:not-allowed}ul{padding:0;margin:0;list-style:none}li{background:#fdfdfd;border:1px solid #e1e4e8;padding:15px;border-radius:8px;margin-bottom:12px;box-shadow:0 2px 5px #00000005;transition:transform .2s ease,box-shadow .3s ease;animation:fadeIn .3s ease-in-out}li:hover{transform:translateY(-2px);box-shadow:0 4px 14px #00000012}li strong{font-size:16px}li small{color:#888;font-size:12px;display:block;margin-top:5px}.completed-task{background-color:#e8f6f0;border-left:4px solid #2ecc71}li button{margin-right:5px;font-size:14px;padding:6px 10px}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 600px){.container{padding:15px}form{flex-direction:column}input,button{width:100%}li button{margin-bottom:8px;width:100%}}