#root{display:flex;align-items:center;width:100%;height:100vh}body{background-color:#f7e8a2;font-family:Architects Daughter,cursive}.todo-container{margin:auto;min-height:560px;width:350px;background:#f1f5f8;background-image:radial-gradient(#bfc0c1 7.2%,transparent 0);background-size:25px 25px;border-radius:20px;box-shadow:4px 3px 7px 2px #00000040;padding:1rem;box-sizing:border-box}h2{display:flex;align-items:center;justify-content:center;margin-bottom:1rem}.input-container{width:246px;height:70px;margin:auto}.input-container input{box-sizing:border-box;background-color:transparent;padding:.7rem;border-bottom-right-radius:15px 3px;border-bottom-left-radius:3px 15px;border:solid 3px transparent;border-bottom:dashed 3px #fdcb6e;font-size:1rem;color:#3f3e41b3;width:70%;margin-bottom:20px}.add-btn{padding:0 0 3px;border:none;text-decoration:none;border-radius:5px;background-color:#fdcb6e;width:60px;height:40px;color:#000;margin-left:10px;border:2px solid black}.task-counter{height:40px;display:flex;justify-content:center;align-items:center;font-family:Architects Daughter,cursive;font-size:1rem;color:#000;margin-bottom:10px}ul{list-style-type:none;padding:0;color:#000;font-family:Architects Daughter,cursive;width:calc(100% - 10px)}ul li{display:flex;align-items:center;border:2px solid black;gap:5px;font-size:1.1em;font-weight:600}ul li:before{content:"•";margin-right:5px;font-size:1.5em}.delete-btn{background:none;border:none;cursor:pointer;font-size:16px;margin-left:auto}.completed{text-decoration:line-through;color:gray}
