*{box-sizing:border-box;margin:0;padding:0}body{display:flex;justify-content:center;align-items:flex-start;min-height:100vh;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#facc15,#e11d48,#7e22ce);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.App{display:flex;justify-content:center;align-items:center;flex-direction:column;width:950px;max-width:95vw;color:#000;gap:30px;padding:2rem 7rem 5rem;margin-top:10px}.App h1{font-size:2.5rem;text-align:center}.todo-wrapper{display:flex;flex-direction:column}.todo-input{display:flex;justify-content:center;width:100%;align-items:center;font-family:Poppins,sans-serif}.add-task{width:580px;padding:12px 18px;border-radius:22px;font-size:1.1rem;outline:none;margin-left:0;border:none;background:#f4eeff;color:#000;box-shadow:0 3px 5px #2b2a2a}.add-task::placeholder{color:#000;opacity:.8}.add-date-label{display:flex}.add-button{border-radius:50%;padding:8px;width:38px;margin-left:8px;outline:none;border:4px solid rgba(255,255,255,.18);transition:all .2s ease-in-out;height:40px;background:#efc3f5}.add-button:hover{transform:scale(1.1);background:#faa6ff}.btn-area{display:flex;justify-content:space-evenly;margin:15px}.btn{color:#121213;width:100px;padding:15px;font-size:1rem;text-align:center;border-radius:22px;border:none;cursor:pointer;transition:all .2s ease-in-out;display:flex;justify-content:center;align-items:center;background-color:#396ef2;color:#fff;font-weight:500;font-family:verdana,sans-serif}.btn:hover{transform:scale(1.1)}.btn.active{background:#a427d3}.todo-list{display:flex;flex-direction:column;align-items:center;justify-content:space-between;margin-top:16px}.todo-list ul{list-style:none;width:100%;max-width:900px}.item{width:850px;border:2px solid rgba(0,0,0,.443);font-size:1.2rem;padding:15px 20px;border-radius:22px;margin-bottom:15px;box-shadow:0 3px 5px #2b2a2a;display:flex;justify-content:space-between;align-items:center;font-weight:600;background-color:#f5efff}.left-icon{margin-right:10px;font-size:1.7rem;display:flex;align-items:center}.task-text{flex-grow:1;padding-left:6px;font-size:1.2rem;word-wrap:break-word;overflow-wrap:break-word;white-space:normal}.right-icons{display:flex;gap:10px;font-size:2rem;cursor:pointer}@keyframes slideIn3D{0%{opacity:0;transform:translate3d(-40px,0,0) scale3d(.95,.95,1) rotateX(0) rotateY(-10deg) rotate(0) skew(0);transform-style:preserve-3d}to{opacity:1;transform:translateZ(0) scaleZ(1) rotateX(0) rotateY(0) rotate(0) skew(0);transform-style:preserve-3d}}.item-animate{animation:slideIn3D .4s ease-out;will-change:transform,opacity}@media (max-width:600px){.App{width:98vw;padding:1rem .5rem 2rem}.add-task{width:85%;margin-left:20px}.add-button{width:34px;margin-left:4px}.todo-input{flex-direction:column;align-items:stretch;gap:8px}.item{width:100%;max-width:95vw}.btn{width:60px;padding:10px;font-size:.7rem}select{width:60px;font-size:.8rem}.add-date-label{display:flex;justify-content:center;align-items:center;gap:8px}.btn-area span div{left:auto!important;right:0;transform:translate(-10%);max-width:200px}.btn{margin:0 8px}.todo-list ul{margin-left:20px;width:85%}.task-text{font-size:1 rem}}