*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif}h1{font-size:26px;font-weight:700}.todo{display:flex;align-items:center;justify-content:space-between;position:relative;padding:1em 1em 1em 50px;margin:0 auto;cursor:pointer;border-bottom:solid 1px #ddd}.todo:last-child{border-bottom:none}.todo__state{position:absolute;top:0;left:0;opacity:0}.todo__text{color:#00a8b8;transition:all .4s linear .4s}.todo__icon{position:absolute;top:0;bottom:0;left:0;width:300px;height:auto;margin:auto;fill:none;stroke:#00a8b8;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.todo__line,.todo__box,.todo__check{transition:stroke-dashoffset .8s cubic-bezier(.9,0,.5,1)}.todo__circle{stroke:#27fdc7;stroke-dasharray:1 6;stroke-width:0;transform-origin:13.5px 12.5px;transform:scale(.4) rotate(0);animation:none .8s linear}@keyframes explode{30%{stroke-width:3;stroke-opacity:1;transform:scale(.8) rotate(40deg)}to{stroke-width:0;stroke-opacity:0;transform:scale(1.1) rotate(60deg)}}.todo__box{stroke-dasharray:56.1053,56.1053;stroke-dashoffset:0;transition-delay:.16s}.todo__check{stroke:#00a8b8;stroke-dasharray:9.8995,9.8995;stroke-dashoffset:9.8995;transition-duration:.32s}.todo__line{stroke-dasharray:168,1684;stroke-dashoffset:168}.todo__circle{animation-delay:.56s;animation-duration:.56s}.todo__state:checked~.todo__text{transition-delay:0s;color:#00a8b8;opacity:.6}.todo__state:checked~.todo__icon .todo__box{stroke-dashoffset:56.1053;transition-delay:0s}.todo__state:checked~.todo__icon .todo__line{stroke-dashoffset:-8}.todo__state:checked~.todo__icon .todo__check{stroke-dashoffset:0;transition-delay:.48s}.todo__state:checked~.todo__icon .todo__circle{animation-name:explode}