@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap";*{padding:0;margin:0;box-sizing:border-box}html{font-size:62.5%}body{font-family:Montserrat,sans-serif}body #root{color:#adb5bd}@media screen and (max-width: 768px){html{font-size:45%}}.header-section{background-color:#151532;min-height:100vh;display:flex;align-items:center;padding:3.2rem 0}.header{max-width:120.8rem;margin:0 auto;padding:1.6rem;display:grid;grid-template-columns:repeat(2,1fr);column-gap:9.6rem;align-items:center}.header-img{max-width:100%}.title{font-size:5.2rem;letter-spacing:-.5px;line-height:1.05;font-weight:700;margin-bottom:3.2rem;color:#f1f3f5}.desc{font-size:1.8rem;line-height:1.6;margin-bottom:4.4rem}.btn{display:inline-block;padding:2.4rem 3.2rem;background-color:#5653f6;font-size:1.8rem;color:#f1f3f5;font-weight:500;border-radius:.8rem;cursor:pointer;transition:all .3s}.btn-icon{width:24px;height:24px}.btn:hover{background-color:#3c3a9e}@media screen and (max-width: 768px){.header{grid-template-columns:none;text-align:center;gap:3.2rem}.title{font-size:4.4rem}.btn{justify-self:center}.header-img{max-width:100%}}.todo-section{background-color:#e1e1fe;padding:9.6rem 0}.todo{margin:0 auto;padding:1.6rem;max-width:62rem}.todo-title{font-size:3.2rem;text-align:center;color:#151532!important;margin-bottom:4.8rem}.todo-list{margin-bottom:3.2rem;display:flex;flex-direction:column;gap:1.6rem}.no-tasks{margin:3.2rem 0;font-size:2.4rem;text-align:center;color:#151532}.todo-form{display:flex;align-items:center;margin:0 auto;position:relative}.todo-text{min-width:100%;padding:1.2rem 2rem;font-size:1.8rem;border:1px solid #ccc;border-radius:4px}.todo-text:focus{outline:none;border:2px solid #151532;box-shadow:inset 0 0 10px 151532}.btn-add{display:flex;align-items:center;position:absolute;cursor:pointer;right:1rem;background:none;border:none}.todo-icon{display:block;margin:auto;width:24px;height:24px;stroke:#5653f6}.todo-error{margin-top:.4rem;font-size:1.6rem;font-weight:500;color:#f03;margin-left:1.6rem}.btn-clear{display:block;margin:0 auto;margin-top:4.8rem;padding:1.6rem 2.4rem;background-color:#151532;font-size:1.8rem;color:#fff;border:none;font-weight:500;border-radius:.8rem;cursor:pointer;transition:all .3s}.btn-clear:hover{background-color:#000}.todo-item{padding:.8rem 1.6rem;display:grid;background-color:#151532;border-radius:4px;align-items:center;grid-template-columns:1fr auto auto;box-shadow:0 0 10px #0003}.todo-item--text{font-size:1.8rem;font-weight:600;text-decoration:none}.todo-right-box{display:flex;gap:1.6rem}.todo-right--btn:hover{background-color:#5653f6}.todo-icon{width:24px;height:24px;stroke:#151532}.btn-todo{width:3.2rem;height:3.2rem;border:none;border-radius:50%;cursor:pointer;transition:all .3s}.btn-todo:hover{background-color:#5653f6}.btn-todo:hover .todo-icon{stroke:#fff}.completed{text-decoration:line-through;color:#5653f6}.scale-in-center{-webkit-animation:scale-in-center .2s cubic-bezier(.25,.46,.45,.94) both;animation:scale-in-center .2s cubic-bezier(.25,.46,.45,.94) both}@-webkit-keyframes scale-in-center{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes scale-in-center{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}