@import"https://fonts.googleapis.com/css2?family=Roboto:wght@100..900&display=swap";*{margin:0;padding:0;box-sizing:border-box}:root{--color-primary: #20A39E;--color-secondary: #FFBA49;--color-teritary: #EF5B5B;--color-light: #FDFDFD;--color-light-gray: hsl(309 100 7 / 36%);--color-dark: #23001E;--color-gray: #A4A9AD;--ff-sans: "Roboto", sans-serif;--heading-h1: 500 3rem/1.2 var(--ff-sans);--heading-h2: 500 2rem/1.2 var(--ff-sans);--heading-h3: 500 1rem/1.2 var(--ff-sans);--text-paragraph: 1rem/1.5 var(--ff-sans);--text-paragraph-bold: 700 var(--text-paragraph);--text-small:400 .875/1.5 var(--ff-sans);--text-small-bold:700 .875/1.5 var(--ff-sans);--text-timer: 700 6.25rem/4.5rem var(--ff-sans);--sapcing1: 4px;--sapcing2: 8px;--sapcing3: 16px;--sapcing4: 24px;--sapcing5: 32px;--sapcing6: 40px;--sapcing7: 48px;--sapcing8: 64px}html #app{scroll-behavior:smooth;height:100%}body{text-wrap:balance;font:var(--text-paragraph);background-color:var(--color-light);color:var(--color-dark)}#app{display:grid;grid-template-rows:auto 1fr auto;min-height:100vh}main{padding:var(--sapcing3)}h1{font:var(--heading-h1)}h2{font:var(--heading-h2)}h3{font:var(--heading-h3)}p{margin:var(--sapcing2) 0}a{color:var(--color-dark);text-decoration:none}a:hover{color:var(--color-primary);text-decoration:underline}.btn,button{all:unset;display:inline-block;margin:var(--sapcing2) 0;background:var(--color-primary);padding:var(--sapcing2) var(--sapcing3);color:var(--color-light);border:var(--sapcing1);font:var(--text-paragraph);cursor:pointer;border-radius:var(--sapcing1)}.btn:hover,button:hover{text-decoration:underline;transition:.3s ease-in-out}img{width:100%}header{display:flex;justify-content:space-between;padding:var(--sapcing3);box-shadow:0 4px 8px #0000001a}nav{display:flex;padding:var(--sapcing2) var(--sapcing4)}nav ul{list-style:none;display:flex;gap:var(--sapcing3)}.logo{color:var(--color-primary)}footer{padding:0;display:flex;flex-direction:column}footer svg{width:24px;height:24px}footer .footer-top{display:flex;padding:var(--sapcing5);justify-content:space-between}footer .footer-top .footer-brand{display:flex;gap:var(--sapcing3);align-items:center;justify-content:center;padding:0}footer .footer-top .footer-social{display:flex;gap:var(--sapcing3);padding:0}footer .footer-bottom{padding:var(--sapcing2);display:flex;align-items:center;justify-content:center}.pomodoro-timer__container{display:flex;flex-direction:column;align-items:center;background-color:var(--color-teritary);max-width:346px;padding:var(--sapcing3) var(--sapcing1);color:var(--color-light);border-radius:var(--sapcing1)}.break{background-color:var(--color-primary)}.pomodoro-timer__header{display:flex;padding:0;margin:0;gap:var(--sapcing1);justify-content:start}.pomodoro-timer__header button{padding:var(--sapcing1);margin:var(--sapcing1);background-color:transparent;font:var(--text-small)}.pomodoro-timer__header .pomodoro-timer__active{font:var(--text-paragraph-bold);background-color:var(--color-light-gray)}.pomodoro-timer__time-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;padding:var(--sapcing6)}.pomodoro-timer__timer{font:var(--text-timer)}.pomodor-timer__footer{display:flex;justify-content:center;align-items:center;gap:var(--sapcing3)}.button-break{background-color:var(--color-secondary);color:var(--color-dark);font:var(--text-paragraph-bold)}.pomodoro-timer__forward{background:transparent;margin:0}.task-item-form__container{border:solid 1px var(--color-dark);border-radius:var(--sapcing1);display:flex;flex-direction:column;gap:var(--sapcing2);padding:var(--sapcing1) var(--sapcing2);width:346px}.task-item-form__container textarea{padding:var(--sapcing2);font:var(--text-small);background-color:var(--color-light-gray);border-radius:var(--sapcing1);border:0}.task-item-form__container textarea:focus-visible{outline:none}.task-item-form__container input{width:100%;border-radius:var(--sapcing1);height:2rem}.task-item-form__container select{border-radius:var(--sapcing1);text-align:center}.task-item-form__container .pomodoro-count{display:flex;flex-direction:column;gap:var(--sapcing1);padding:0;margin:0}.task-item-form__container .pomodoro-count .pomodoro-select{display:flex;align-items:center;gap:var(--sapcing2)}.task-item-form__container .pomodoro-count .pomodoro-select input{width:4rem;text-align:center}.task-item-form__container .pomodoro-count .pomodoro-select button{display:flex;width:1rem;height:1rem;background-color:transparent;border:1px solid var(--color-primary);color:var(--color-dark);align-items:center;justify-content:center}.task-item-form__container .content{display:flex;gap:var(--sapcing2);padding:0;justify-content:space-between}.task-item-form__container .content button{background-color:transparent;color:var(--color-light-gray);margin:0;padding:0;border-bottom:1px solid var(--color-light-gray);border-radius:0;text-decoration:none}.task-item-form__container .content button:hover{color:var(--color-dark)}.task-item-form__container .footer{display:flex;justify-content:space-between}.task-item-form__container .footer .delete-btn{display:flex;align-items:center;width:24px;height:24px;color:var(--color-teritary);background-color:transparent;border:1px solid var(--color-primary)}.task-item-form__container .footer .action-btn-container{display:flex;gap:var(--sapcing4)}.task-item-form__container .footer .action-btn-container button{display:flex;align-items:center}.task-item-form__container .footer .action-btn-container .outline{background-color:transparent;border:1px solid var(--color-primary);color:var(--color-dark)}.task-item-form__container .footer .action-btn-container .link{background-color:transparent;border:0;margin:0;color:var(--color-light-gray);padding:0;border-radius:0;text-decoration:underline}.task-item-form__container .footer .action-btn-container .link:hover{color:var(--color-dark)}.task-item__container{display:flex;align-items:center;justify-content:space-between;width:346px;border:solid 1px;border-radius:var(--sapcing1);border-right-width:2px;gap:var(--sapcing1);padding:var(--sapcing1) var(--sapcing2);cursor:pointer;background-color:transparent;color:var(--color-dark);margin:0}.task-item__container:hover{box-shadow:inset 3px 0 0 var(--color-light-gray);text-decoration:none}.task-item__container.active{box-shadow:inset 3px 0 0 var(--color-dark)}.task-item__container.work{border-right-color:#7fff00}.task-item__container.personal{border-right-color:violet}.task-item__container.side{border-right-color:#6495ed}.task-item__complete-btn{display:flex;width:2rem;height:2rem;background-color:transparent;border:1px solid var(--color-primary);color:var(--color-dark);align-items:center;justify-content:center}.task-item__complete-btn.completed{background-color:var(--color-teritary);border:1px solid var(--color-light);color:var(--color-light)}.task-item__menu-btn{display:flex;width:1rem;height:2rem;background-color:transparent;border:1px solid var(--color-primary);color:var(--color-dark);align-items:center;justify-content:center}.task-item__center{width:100%;height:100%;display:flex;flex-direction:column}.task-item__center.completed{text-decoration:line-through;color:var(--color-light-gray)}.task-item__center-header{display:flex;align-items:center;gap:var(--sapcing2)}.task-item__center-title{font:var(--text-small-bold)}.task-item__center p{font:var(--text-small);color:var(--color-light-gray);margin:0}.expand-enter-active,.expand-leave-active{transition:all .3s ease;overflow:hidden}.expand-enter-from,.expand-leave-to{opacity:0;max-height:0}.expand-enter-to,.expand-leave-from{opacity:1;max-height:500px}.task-list{padding:var(--sapcing3) 0}