*,:before,:after{box-sizing:border-box;margin:0}#root{position:relative;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,Liberation Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}button{margin-right:10px}a{margin-right:8px}header{background:linear-gradient(45deg,#29bee3,#403efb);background-repeat:no-repeat;background-size:cover;height:140px;left:0;padding:20px;position:fixed;right:0;top:0;z-index:-1}h1{font-weight:200;font-size:40px}main{padding:30px 20px 0;background-color:#fff;border-top-left-radius:24px;border-top-right-radius:24px;margin-top:100px;position:relative}input{font-size:inherit;border:1px solid rgb(222,226,230);border-radius:10px;text-indent:10px;width:100%}input::placeholder{font-weight:500;background:-webkit-linear-gradient(left,#29bee3,#403efb);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}input:focus{outline:none;box-shadow:none}ul{padding-left:0}form{display:flex;justify-content:space-between;width:100%}#edit-form{align-items:center}#edit-form input{height:32px}footer{position:fixed;right:0;left:0;bottom:10px;padding:0 20px}.add-todo-box{background-color:#ffffff40;border-radius:16px;box-shadow:#0000001a 0 3px 15px;padding:10px;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}.todo-count{background:#0006;border-radius:8px;color:#fff;font-size:11px;padding:4px 8px;position:fixed;right:20px;top:20px;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);z-index:1}.title-box{color:#fff;letter-spacing:4px}.toggle-all-box{font-size:13px;display:flex;justify-content:space-between;margin-bottom:16px}.toggle-all{cursor:pointer;display:flex;align-items:center;color:gray}.toggle-all svg{margin-left:2px}.clear-list{color:#f2542d;cursor:pointer}.btn-add-todo{align-items:center;background:linear-gradient(45deg,#29bee3,#403efb);cursor:pointer;border-radius:50%;color:#fff;display:flex;height:48px;justify-content:center;width:48px;margin:0 0 0 8px;box-shadow:0 0 10px 1px #00000040;border:1px solid #403efb}.text-decoration-line-through{color:#d3d3d3}.date{letter-spacing:0;font-size:12px;display:flex;justify-content:flex-end;margin-top:-8px}.time{letter-spacing:0;font-size:12px;display:flex;justify-content:flex-end;margin-top:2px}.todo-item{display:flex;justify-content:space-between;cursor:pointer;box-shadow:0 3px 15px #0000001a;padding:.75rem;border-radius:16px;margin:.35rem 0}.todo-item-text{width:100%}.todo-item-done{text-decoration:line-through;color:#d3d3d3}.status-bar{display:flex;justify-content:flex-end;align-self:flex-start}.check-icon-box{cursor:pointer;width:2rem;height:2rem;display:flex;justify-content:center;align-items:center}.edit-btn-box{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(45deg,#29bee3,#403efb);box-shadow:0 3px 15px #0000001a;border-radius:50%;color:#fff;cursor:pointer;display:flex;height:2rem;justify-content:center;width:2rem;margin:0 16px 0 8px;border:none;padding:0}.delete-btn-box{cursor:pointer;color:#fff;background:linear-gradient(45deg,#ee8c8c,#f22d2d);box-shadow:0 3px 15px #0000001a;width:2rem;height:2rem;border-radius:50%;display:flex;justify-content:center;align-items:center}.content-box{padding-bottom:100px}.hidden{display:none}.show{display:flex}:root{--animate-duration: 1s;--animate-delay: 1s;--animate-repeat: 1}.animate__animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-duration:var(--animate-duration);animation-duration:var(--animate-duration);-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.animate__fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}