@import"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";*{margin:0;padding:0;box-sizing:border-box;color:#fff;font-family:Poppins}html,body{min-height:100vh;background:#222831;display:flex;justify-content:center}.container{margin-top:4rem;min-height:180px;max-height:500px;width:420px;border:1px solid #999;border-radius:7px;background:#393e46;overflow-y:auto;padding:1rem}.input-section h1{font-size:22px;font-weight:500;color:#cfffe2;margin-bottom:1rem}#task-input-field{background:transparent;font-size:16.5px;padding:7px 10px;width:100%;border-radius:5px;outline:none;margin-bottom:1rem;border:1px solid #999}#task-input-field::placeholder{color:#999}#add-btn{width:100%;padding:8px;font-size:16.5px;border:none;outline:none;border-radius:5px;cursor:pointer;background:#6a5acd;margin-bottom:2rem;transition:.3s ease}#add-btn:hover{background:#5649a7}.todos-section li{position:relative;list-style:none;font-size:16.5px;padding:8px 12px;background:#222831;border-radius:5px;display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;animation:opacity .3s ease}@keyframes opacity{0%{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}#del-btn{position:absolute;right:2px;padding:5px 25px;font-size:16px;border:none;outline:none;border-radius:3px;cursor:pointer;background:#e83f25;transition:.3s ease}#del-btn:hover{background:red}@media screen and (max-width:420px){.container{width:360px}#del-btn{padding:5px 20px}}