@import url(https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap);*{box-sizing:border-box;margin:0;padding:0}.header{background-color:#0d0d0d;height:200px;width:100%}.header__container{display:flex;height:100%;justify-content:center;margin:auto;width:90%}.header__logo{align-items:center;display:flex;height:100%}.header__image{width:180px}.main{background-color:#191919;min-height:calc(100vh - 200px);width:100%}.main__container{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:flex-start;margin:auto;width:90%}.main__task-actions{gap:10px;margin-top:-25px;z-index:1}.main__task-actions,.main__task-details{align-items:center;display:flex;justify-content:center;width:90%}.main__task-details{flex-direction:column;gap:24px;padding:60px 0}.main__task-status{align-items:center;justify-content:space-between}.main__task-list,.main__task-status{display:flex;max-width:736px;width:100%}.main__task-list{flex-direction:column;gap:8px;justify-content:center}@media (max-width:430px){.main__task-status{display:flex;flex-direction:column;gap:8px}.main__task-details{padding:24px 0}}.task-search__input{background-color:#262626;border:1px solid #0d0d0d;border-radius:8px;color:#f2f2f2;font-family:Inter,sans-serif;font-size:16px;max-width:638px;outline:none;padding:16px;transition:border .3s ease;width:100%}.task-search__input::placeholder{color:grey}.task-search__input:focus{border:1px solid #5e60ce}.task-add__button{align-items:center;background-color:#1e6f9f;border:none;border-radius:8px;cursor:pointer;display:flex;gap:8px;justify-content:center;padding:16px;transition:background-color .3s ease}.task-add__button:hover{background-color:#4ea8de}.task-add__text{color:#f2f2f2;font-family:Inter,sans-serif;font-size:14px;font-weight:500}.task-add__icon{color:#f2f2f2;height:16px;width:16px}@media (max-width:430px){.task-add__text{display:none}}.task-counter__text{font-family:Inter,sans-serif;font-size:14px;font-weight:500}.task-counter__text--created{color:#4ea8de}.task-counter__text--completed{color:#8284fa}.task-counter__text--completed,.task-counter__text--created{align-items:center;display:flex}.task-counter__number{background-color:#333;border-radius:20px;color:#d4d4d4;font-family:Inter,sans-serif;font-size:12px;font-weight:500;margin-left:8px;padding:2px 8px}.task-item{background-color:#262626;border:1px solid #333;border-radius:8px;display:flex;gap:12px;justify-content:space-between;padding:16px}.task-item__text{color:#f2f2f2;flex-grow:1;font-family:Inter,sans-serif;font-size:14px;font-weight:300}.task-item__text--completed{color:grey;text-decoration:line-through}.task-item__icon{cursor:pointer;height:17px;width:17px}.task-item__button{padding-top:3.27px}.task-item__icon--complete{color:#4ea8de}.task-item__icon--completed{color:#585abd}.task-item__icon--delete{color:grey;transition:color .3s ease}.task-item__icon--delete:hover{color:#e25858}.task-modal__container{align-items:center;background-color:#0d0d0de6;bottom:0;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:1}.task-form,.task-modal__container{display:flex;flex-direction:column}.task-form{align-items:end;max-width:638px;width:100%}.task-form__textarea{background-color:#262626;border:1px solid #0d0d0d;border-radius:8px;color:#f2f2f2;font-family:Inter,sans-serif;font-size:16px;height:150px;outline:none;padding:16px;resize:none;transition:border .3s ease;width:100%}.task-form__textarea--error{animation:shake .3s ease-in-out;border:1px solid #e25858}.task-form__textarea::placeholder{color:grey}.task-form__textarea:focus{border:1px solid #5e60ce}.task-form__actions{margin-top:10px}.task-form__actions,.task-form__button{align-items:center;display:flex;gap:10px}.task-form__button{border:none;border-radius:8px;cursor:pointer;justify-content:center;padding:16px}.task-form__button--cancel{background-color:grey;transition:background-color .3s ease}.task-form__button--cancel:hover{background-color:#e25858}.task-form__button--add{background-color:#1e6f9f;transition:background-color .3s ease}.task-form__button--add:hover{background-color:#4ea8de}.task-form__text{color:#f2f2f2;font-family:Inter,sans-serif;font-size:14px;font-weight:500}.task-form__icon{color:#f2f2f2;height:16px;width:16px}@keyframes shake{0%{transform:translateX(0)}25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-5px)}to{transform:translateX(0)}}.task-loading{align-items:center;border-top:1px solid #333;border-top-left-radius:8px;border-top-right-radius:8px;display:flex;flex-direction:column;gap:16px;justify-content:center;padding:64px 24px}.task-loading__icon{animation:rotate 3s linear infinite;color:#3d3d3d;height:56px;width:56px}.task-loading__content{align-items:center;display:flex;flex-direction:column;justify-content:center;text-align:center}.task-loading__text{color:grey;font-family:Inter,sans-serif;font-size:16px}.task-loading__text--title{font-weight:500}.task-loading__text--message{font-weight:300}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.task-empty{align-items:center;border-top:1px solid #333;border-top-left-radius:8px;border-top-right-radius:8px;display:flex;flex-direction:column;gap:16px;justify-content:center;padding:64px 24px}.task-empty__icon{color:#3d3d3d;height:56px;width:56px}.task-empty__content{align-items:center;display:flex;flex-direction:column;justify-content:center;text-align:center}.task-empty__text{color:grey;font-family:Inter,sans-serif;font-size:16px}.task-empty__text--title{font-weight:500}.task-empty__text--message{font-weight:300}.task-error{align-items:center;border-top:1px solid #333;border-top-left-radius:8px;border-top-right-radius:8px;display:flex;flex-direction:column;gap:16px;justify-content:center;padding:64px 24px}.task-error__icon{color:#3d3d3d;height:56px;width:56px}.task-error__content{align-items:center;display:flex;flex-direction:column;justify-content:center;text-align:center}.task-error__text{color:grey;font-family:Inter,sans-serif;font-size:16px}.task-error__text--title{font-weight:500}.task-error__text--message{font-weight:300}
/*# sourceMappingURL=main.0bbed97a.css.map*/