:root{font-family:Poppins,Inter,sans-serif;line-height:1.5}*{margin:0;padding:0;box-sizing:border-box}body{width:100%;min-height:100vh;padding:10px;background:linear-gradient(135deg,#71b7e6 0%,#9b59b6 100%);display:flex;align-items:center;justify-content:center}.wrapper{background:#fff;max-width:400px;width:100%;margin:120px auto;padding:25px;border-radius:5px;box-shadow:0 10px 15px #0000001a}header{font-size:30px;font-weight:600;margin-bottom:20px}.inputField{margin:20px 0;width:100%;display:flex;height:45px}.inputField input{width:85%;height:100%;outline:none;border-radius:3px;border:1px solid #ccc;padding-left:15px;font-size:17px;transition:all .3s ease}.inputField input:focus{border-color:#8e44ad}.inputField button{width:50px;height:100%;border:none;color:#fff;margin-left:5px;font-size:21px;outline:none;background:#8e44ad;border-radius:3px;cursor:pointer;transition:all .3s ease}.todoList{max-height:250px;overflow-y:auto}.todoList li{position:relative;list-style:none;height:45px;line-height:45px;margin-bottom:8px;background:#f2f2f2;border-radius:3px;padding:0 15px;cursor:default;overflow:hidden}.todoList li .icon{position:absolute;right:-45px;top:50%;transform:translateY(-50%);background:#e74c3c;width:45px;text-align:center;color:#fff;padding:10px 15px;border-radius:0 3px 3px 0;cursor:pointer;transition:all .3s ease}.todoList li:hover .icon{right:0}.footer{display:flex;width:100%;margin-top:20px;align-items:center;justify-content:space-between}.footer button{padding:6px 10px;border-bottom-width:0px;border-radius:3px;border:none;outline:none;color:#fff;font-weight:400;font-size:16px;cursor:pointer;background:#8e44ad;transition:all .3s ease}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#8e44ad}