:root{--gray-color: #e3e3e3;--strong-gray-color: #34495e;--red-color: #eb4d4b;--breeze-100: #c7ecee;--breeze-500: #7ed6df;--breeze-700: #22a6b3}*{margin:0;padding:0;box-sizing:border-box}ul{list-style:none}input,textarea,button{font-family:inherit}textarea{resize:none}html{font-size:16px}body{font-family:Roboto Condensed;line-height:1;color:#000}.btn{padding:.625rem 1.5rem;background:var(--red-color);color:#fff;border:none;border-radius:.25rem;cursor:pointer;transition:background .2s ease-out}.btn:hover{background:#d73836}.wrapper{padding:1rem;display:flex;flex-direction:column;justify-content:center;align-items:center}.title{margin:0 0 1rem;font-size:2.19rem}.completed{text-decoration:line-through;color:#00000080}.checkbox,.pin-checkbox{position:absolute;opacity:0;z-index:-1}.checkbox+span{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;cursor:pointer}.checkbox+span:before{content:"";display:inline-block;width:1rem;height:1rem;border:1px solid var(--gray-color);border-radius:.25rem;background:#fff;background-repeat:no-repeat;background-position:center center;background-size:60% 60%}.checkbox:checked+span:before{border-color:#0b76ef;background-color:#0b76ef;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e")}.checkbox:not(:disabled):not(:checked)+span:hover:before{border-color:#b3d7ff}.checkbox:focus+label:before{box-shadow:0 0 0 .2rem #007bff40}.pin-checkbox+span{display:block;cursor:pointer;opacity:0}.pin-checkbox:checked+span{opacity:1}.logo{margin-bottom:1.5rem}.logo-wrapper{width:100px;height:100px;display:flex;align-items:center;justify-content:center}.logo-wrapper img{width:100%;height:100%}.todo-app{background:#fff;box-shadow:0 0 20px 8px #223c5033;-webkit-box-shadow:0px 0px 20px 8px rgba(34,60,80,.2);-moz-box-shadow:0px 0px 20px 8px rgba(34,60,80,.2);border-radius:.25rem}.todo-app__header{padding:1rem 2rem;display:flex}.todo-app__header-input{margin-right:1rem;padding:.625rem 1rem;width:100%;font-size:1.125rem;border:1px solid var(--gray-color);border-radius:.25rem}.todo-app__header-input::placeholder{opacity:.3}.todo-app__header-input:focus{outline:1px solid var(--red-color)}.todo-app__list{display:flex;flex-direction:column}.todo-app__item{width:100%;z-index:1;position:relative;padding:.5rem 2rem;display:flex;align-items:center}.todo-app__item:hover .todo-app__remove-btn{opacity:1;visibility:visible}.todo-app__item:hover .pin-checkbox+span{opacity:.2}.todo-app__item-name{margin-right:1rem;display:block;width:100%;word-break:break-all;font-size:1.125rem;cursor:pointer}.todo-app__item-editor{margin-right:1rem;display:block;width:100%;border:none;font-size:1rem}.todo-app__item-editor:focus{outline:none}.todo-app__item-pin{position:absolute;top:50%;left:.6rem;transform:translateY(-50%);width:1rem;height:1rem;display:flex;align-items:center;justify-content:center}.todo-app__item-pin-icon{width:100%;height:100%}.todo-app__item-pin-icon i{color:#eb4d4b;transform:rotate(-20deg)}.todo-app__item-checkbox{margin-right:1rem}.todo-app__item-color{position:absolute;left:0;width:.19rem;height:100%}.todo-app__remove-btn{position:relative;width:1.5rem;height:1.5rem;border:none;cursor:pointer;background:transparent;opacity:0;visibility:hidden;transition:opacity .3s ease-out}.todo-app__remove-btn:before,.todo-app__remove-btn:after{content:"";position:absolute;top:50%;left:50%;width:1rem;height:2px;background-color:var(--red-color)}.todo-app__remove-btn:before{transform:translate(-50%,-50%) rotate(45deg)}.todo-app__remove-btn:after{transform:translate(-50%,-50%) rotate(-45deg)}.todo-app__clear-btn{background-color:var(--breeze-500)!important}@media (max-width: 500px){.todo-app__clear-btn{width:100%}}.todo-app__clear-btn:hover{background-color:var(--breeze-700)!important}.todo-app__footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 2rem;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;border-top:1px solid var(--gray-color);background-color:var(--breeze-100)}@media (max-width: 500px){.todo-app__footer{flex-direction:column;gap:1.5rem}}.todo-app__filters{display:flex;align-items:center}.todo-app__filters-item:not(:last-child){margin-right:1rem}.todo-app__filters-item a{position:relative;padding:.5rem 0;text-decoration:none;color:#000}.todo-app__filters-item a.selected:after{content:"";display:inline-block;position:absolute;bottom:0;right:0;width:100%;height:2px;background:var(--red-color)}