*,:after,:before{box-sizing:border-box}html{font-family:Lato,"Segoe UI","Helvetica Neue",sans-serif;font-size:18px;color:#333}body{margin:0;padding:2rem;background:#eeeef6}h1{font-weight:700;font-size:1.5rem;text-transform:uppercase;letter-spacing:.1ch;color:#212121;margin:0 0 1em;padding:0 0 1em;line-height:1;position:relative}h1:after{display:block;position:absolute;content:"";height:2px;width:80px;bottom:0;background:#9818d6}input[type=text]{font-weight:300;display:block;background:transparent;color:#888;border:none;height:2rem;line-height:2rem;font-size:1.5rem;font-family:inherit;width:100%;outline:none;transition:.3s ease}input[type=text]:focus{background:#f8f8f8}input[type=checkbox]{display:none;position:relative}input[type=checkbox]+label{padding-left:2rem;position:relative;transition:color .15s ease;height:2rem;line-height:2rem}input[type=checkbox]+label .todo__strike{position:absolute;display:block;height:2px;right:0;left:2rem;top:50%;background:#9818d6;transition:.45s ease;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:left;transform-origin:left}input[type=checkbox]+label:after,input[type=checkbox]+label:before{display:block;position:absolute;content:""}input[type=checkbox]+label:before{left:0;height:1.25rem;width:1.25rem;margin-right:.5rem;top:calc(50% - .625rem);border:1px solid #dedeed;border-radius:50px}input[type=checkbox]+label:after{left:.3125rem;top:.38329404rem;height:.35714286rem;width:.625rem;margin-right:.5rem;border-left:2px solid #9818d6;border-bottom:2px solid #9818d6;-webkit-transform:rotate(-45deg) scale(.5);transform:rotate(-45deg) scale(.5);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;opacity:0;transition:.15s ease-in-out}input[type=checkbox]:checked+label{color:#ccc}input[type=checkbox]:checked+label .todo__strike{-webkit-transform:scaleX(1);transform:scaleX(1)}input[type=checkbox]:checked+label:after{opacity:1;-webkit-transform:rotate(-45deg) scale(1);transform:rotate(-45deg) scale(1)}.todo__form{margin:0;display:block;padding:1rem;overflow:hidden;background:#fff;border-bottom:1px solid #dedeed}.todo__input{width:92%;float:left;background:transparent}.todo__add__button{cursor:pointer;display:block;outline:none;font-family:inherit;font-size:.8rem;border:none;float:right;width:2rem;height:2rem;border-radius:50px;padding:0;color:#5959a6;font-size:2rem;background:transparent;transition:.15s ease}.todo__add__button svg{display:block;stroke:#555;stroke-width:2px;stroke-linecap:round;width:100%;height:100%;stroke:#9818d6}.todo__add__button:hover{background:#f2f2f2}.todo__add__button:active{box-shadow:inset 0 2px 10px rgba(0,0,0,.1);background:#e6e6e6}.filter__todos{padding:.5rem 1rem}.filter__todos span{float:right;height:2rem;line-height:2rem;color:#9b9ba6}.filter__todos button{cursor:pointer;display:inline-block;outline:none;background:transparent;font-family:inherit;font-size:.8rem;border:none;padding:.5rem 1rem;border-radius:100px;margin-right:.5rem;background-color:transparent;transition:.15s ease;box-shadow:inset 0 0 0 1px #eeeef6;color:#6f6f77;font-weight:600;margin-bottom:.5rem}.filter__todos button:hover{box-shadow:none;background-color:#eeeef6}.filter__todos button.selected__button,.filter__todos button:active{background-color:#eeeef6;box-shadow:inset 0 2px 5px rgba(0,0,0,.1)}.todo__list{padding:0;margin:0;background:#fff}.todo__list li{list-style:none;padding:.5rem 1rem}.todo__remove{cursor:pointer;outline:none;font-family:inherit;font-size:.8rem;position:relative;float:right;display:block;height:2rem;width:2rem;border:none;padding:0;background:transparent;transition:.3s ease}.todo__remove svg{display:block;stroke:#555;stroke-width:2px;stroke-linecap:round;width:100%;height:100%;stroke:#dedeed}.todo__remove:hover svg{stroke:#212121}.todo__remove:before{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.todo__remove:after{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.wrap{max-width:720px}.app,.wrap{margin:0 auto}.app{padding:0 0 3px;background:#fff;box-shadow:0 5px 20px rgba(0,0,0,.1);border-radius:6px;overflow:hidden;position:relative}.app:after{display:block;position:absolute;content:"";bottom:0;height:3px;width:100%;border-radius:0 0 6px 6px;background:#9818d6}
/*# sourceMappingURL=main.83f3268d.chunk.css.map */