*{box-sizing:border-box;margin:0;padding:0;font-family:system-ui,-apple-system,sans-serif}:root{--primario: #1d3557;--secundario: #457b9d;--tercero: #a8dadc;--cuarto: #f1faee}#app{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(to bottom,#ff00007b,#0000ff7d,#0000147d)}#app-container{border-radius:9px;padding:8px;width:500px;flex-direction:column;justify-content:center;align-items:center;margin:50px;background-color:#e6e6e6d2;box-shadow:10px 8px 9px #7065654d}.head-app{background-color:#db08c263;box-shadow:0 0 10px #db08c283;width:100%;padding:8px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:9px}.title-app{color:#190019b4;text-shadow:0px 0px 9px rgba(156,0,156,.295);margin:10px;font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif;font-size:30px}.head-inputs{width:100%;display:flex}.container-checkAll{width:150px;display:flex;align-items:center;flex-direction:row;gap:10px}.container-checkAll>label{width:4px;font-weight:700;color:#000;font-size:11px}#checkAll{width:22px;height:22px}.input-todo{width:100%;height:30px;padding:8px;margin-bottom:6px;margin-right:9px;outline:none;border:none;background-color:transparent;border-radius:3px;border-bottom:3px solid purple;caret-color:#fbff00;font-size:18px}.input-todo::placeholder{width:100%;margin-left:80px;font-size:18px;color:#0000007f;text-indent:4px;overflow:hidden}.list-items{width:100%;padding:2px;display:flex;flex-direction:column;justify-content:center;align-items:center}.list-items>li{background-color:#dbef0075;width:100%;margin:10px;display:flex;justify-content:space-between;align-items:center;list-style:none;box-shadow:3px 3px 6px #7065654d;border-radius:16px}.list-items>li:hover{background-color:#dbef0092;transform:scale(1.03)}.list-items .completed{background-color:#7065655e}.list-items .completed>.todo-item>label{text-decoration:line-through;text-decoration-thickness:3px;text-decoration-color:#ff00a6}.list-items .completed:hover{background-color:#7065658c}.todo-item{width:96%;margin:10px;display:flex;justify-content:space-between;align-items:center;list-style:none;overflow-wrap:break-word}.todo-item>label{max-width:394px;padding:0 3px 0 5px}.close{font-size:38px;color:#b91313;border:0;cursor:pointer;background:none;transition:all .2s}.close:hover{color:#ff4d00;transform:scale(1.2)}.close:hover:active{transform:scale(.9)}.check-box{width:20px;height:20px}.footer{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px}.filters{width:100%;display:flex;align-items:center;justify-content:space-between;list-style:none}.filtro{position:relative;text-decoration:none;font-size:large;color:#b900b6de}.filtro:after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:2px;background:#b100becc;border-radius:5px;transform:scaleX(0);transform-origin:right;transition:transform .4s}.filtro:hover:after{transform-origin:left;transform:scaleX(1)}.clear-completed{font-size:.7em;border-radius:6px;padding:4px;cursor:pointer;border:none;background-color:transparent;transition:all .5s}.clear-completed:hover{color:#fff;background-color:#b900b684;box-shadow:1px 1px 4px #b900b6de}.clear-completed:hover:active{transform:scale(.9)}.todo-count{display:flex;text-indent:5px}#pendig-count{color:#b900b6de;font-size:18px}.selected{font-weight:700;color:#b900b6de}@media only screen and (max-width: 526px){#app-container{top:0;width:87%;margin:20px 5px}.title-app{font-size:24px}.input-todo{margin-right:40px}.list-items{margin-top:20px}.todo-item{width:96%}.todo-item>label{max-width:260px}.footer{width:100%;display:flex;flex-direction:column;gap:10px}.clear-completed{font-size:.9em;padding:9px;margin-bottom:4px}}@media only screen and (max-width: 456px){#app-container{top:0;width:87%;margin:20px 5px}.todo-item{width:96%}.todo-item>label{max-width:260px}}@media only screen and (max-width: 420px){#app-container{top:0;width:87%;margin:20px 5px}.todo-item{width:96%}.todo-item>label{max-width:180px}}@media only screen and (max-width: 342px){#app-container{top:0;width:87%;margin:20px 5px}.todo-item{width:96%}.todo-item>label{max-width:150px}}.checkbox-wrapper input[type=checkbox]{visibility:hidden;display:none;margin:0}.checkbox-wrapper *,.checkbox-wrapper :after,.checkbox-wrapper :before{box-sizing:border-box;-webkit-user-select:none;user-select:none}.checkbox-wrapper{position:relative;display:block;overflow:hidden}.checkbox-wrapper .label{cursor:pointer}.checkbox-wrapper .check{width:50px;height:50px;position:absolute;opacity:0}.checkbox-wrapper .label svg{vertical-align:middle}.checkbox-wrapper .path1{stroke-dasharray:400;stroke-dashoffset:400;transition:.5s stroke-dashoffset;opacity:0}.checkbox-wrapper .check:checked+label svg g path{stroke-dashoffset:0;opacity:1}