.container{display:flex;flex-direction:column;gap:1.5rem;padding:30px;position:relative;border-radius:10px;margin-bottom:50px}.container .title{margin:0;align-self:center}@media (max-width: 480px){.container{padding:10px}}.form{display:flex;justify-content:center}.form input{font-size:18px;color:var(--text-color);border:solid 1px var(--text-color)}.form input[type=text]{padding:15px 20px;flex-grow:1;border-right:0;border-radius:5px 0 0 5px;background-color:transparent}.form input[type=image]{padding:15px;width:30px;height:30px;border-radius:0 5px 5px 0;background-color:var(--accent-color);transition:all .3s ease-in-out}.form input[type=image]:hover{box-shadow:0 0 15px var(--accent-color)}@media (max-width: 480px){.form input{font-size:16px}}.taskContainer{display:flex;justify-content:space-between;align-items:center;background-color:var(--bg-color-task);border-radius:5px;padding:0 20px;transition:all .2s}.taskContainer:hover{box-shadow:0 0 12px var(--bg-color-task-shadow)}.taskContainer .task{display:flex;align-items:center;flex-grow:1;cursor:pointer}.taskContainer .task div{display:flex}.taskContainer .task div .check-icon{width:25px;height:25px}.taskContainer .task div .check-icon path{stroke:var(--accent-color)}.taskContainer .task div .uncheck-icon{width:25px;height:25px;fill:var(--bg-color-task-done)}.taskContainer .task>p{padding:0 10px;font-size:16px;font-weight:300;line-height:24px;background-color:inherit;text-align:justify}.taskContainer .delete{cursor:pointer}.taskContainer .delete div{display:flex}.taskContainer .delete div svg{width:25px;height:25px;opacity:.4;fill:var(--text-color)}.taskContainer .delete div svg:hover{opacity:1}@media (max-width: 480px){.taskContainer{padding:0 10px}.taskContainer:hover{box-shadow:none}}.checked{text-decoration:line-through .5px;color:var(--text-color-fade);background-color:var(--bg-color-task-done)}.checked:hover{box-shadow:0 0 0 var(--bg-color-task-shadow)}.tabs{display:flex;gap:10px}.tabs button{font-size:18px;width:33.33%;border:0;border-radius:5px 5px 0 0;padding:10px;background-color:inherit;color:var(--text-color-fade);cursor:pointer}.tabs button:hover{background-color:var(--bg-color-hover)}.tabs .active-tab{border-bottom:1px solid var(--text-color);color:var(--text-color);font-weight:700}@media (max-width: 480px){.tabs>button{font-size:14px}}.list{display:flex;flex-direction:column;gap:5px}.list .empty{color:var(--text-color-fade);height:20vh;text-align:center;line-height:20vh}:root{--accent-color: hsl(222, 60%, 50%);--bg-color-task-shadow: hsl(222, 60%, 50%)}@media (prefers-color-scheme: light){:root{--bg-color: hsl(0, 0%, 98%);--bg-color-hover: hsl(222, 25%, 95%);--bg-color-task: hsl(222, 100%, 95%);--bg-color-task-done: hsl(222, 10%, 80%);--text-color: hsl(0, 0%, 5%);--text-color-fade: hsl(0, 0%, 40%)}}@media (prefers-color-scheme: dark){:root{--bg-color: hsl(222, 25%, 12%);--bg-color-hover: hsl(222, 25%, 15%);--bg-color-task: hsl(222, 15%, 24%);--bg-color-task-done: hsl(222, 10%, 20%);--text-color: hsl(0, 0%, 90%);--text-color-fade: hsl(0, 0%, 50%)}}body{font-family:Arial;font-weight:600;max-width:768px;margin:0 auto;background-color:var(--bg-color);color:var(--text-color)}