:root{--desktop-content-width: 53rem;--mobile-content-width: 33rem;--base-padding: 3rem;--base-border-radius: .5rem;--base-transition-timing: .3s;--base-font-family: "Josefin Sans", sans-serif;--base-font-weight: 400;--medium-font-weight: 500;--bold-font-weight: 600;--bolder-font-weight: 700;--error-font-size: 1.4rem;--items-left-size: 1.5rem;--filters-size: 1.6rem;--base-font-size: 1.8rem;--empty-message-size: 2rem;--page-title-size: 4rem;--base-text-color: hsl(235, 19%, 35%);--page-title-color: hsl(0, 0%, 98%);--active-button-color: rgb(45, 97, 171);--filters-color: hsl(235, 16%, 43%);--error-text-color: hsl(280, 87%, 65%);--delete-popup-hover: hsl(0, 84%, 71%);--delete-popup-custom-color: hsl(235, 84%, 71%);--clear-pop-up: hsl(342, 96%, 58%);--linear-gradient: linear-gradient( to bottom right, hsl(192, 100%, 67%), hsl(280, 87%, 65%) );--page-bg: hsl(0, 0%, 98%);--box-bg: hsl(0, 0%, 98%);--task-completed: hsl(233, 11%, 84%);--gray-600: hsl(236, 9%, 61%);--filters-hover: hsl(235, 21%, 11%);--clear-button-hover: hsl(237, 14%, 26%);--task-border-color: hsl(236, 33%, 92%);--task-border: hsl(237, 52%, 35%);--error-box-bg: hsl(235, 24%, 19%);--input-color: hsl(235, 24%, 19%);--circle-hover-color: hsl(280, 87%, 65%)}:root.dark-on{--page-bg: hsl(235, 21%, 11%);--box-bg: hsl(235, 24%, 19%);--task-completed: hsl(235, 16%, 43%);--gray-600: hsl(235, 16%, 43%);--filters-hover: hsl(236, 33%, 92%);--clear-button-hover: hsl(236, 9%, 61%);--task-border-color: hsl(237, 14%, 26%);--error-box-bg: hsl(279, 76%, 7%);--input-color: hsl(236, 33%, 92%);--circle-hover-color: hsl(192, 77%, 35%)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box;font:inherit;color:inherit}html{font-size:62.5%}@media (max-width: 580px){html{font-size:56%}}body{font-family:var(--base-font-family);font-size:var(--base-font-size);font-weight:var(--base-font-weight);color:var(--base-text-color);background:var(--page-bg);line-height:1.4;position:relative}body:before,body:after{content:"";position:fixed;height:35vh;width:100%;transition:opacity var(--base-transition-timing) ease-in-out;background-size:cover;background-position:center top;background-repeat:no-repeat;top:0;z-index:-1}body:before{opacity:1;background-image:url("./bg-desktop-light-BIdKokTn.jpg")}body:after{opacity:0;background-image:url("./bg-desktop-dark-DzAvO98h.jpg")}:root.dark-on body:before{opacity:0}:root.dark-on body:after{opacity:1}.app{display:flex;flex-direction:column;align-items:center;min-height:100vh;margin-block:7rem 2rem}.main{width:var(--desktop-content-width);margin-block:3rem 2rem}@media (max-width: 580px){.main{width:var(--mobile-content-width)}}ul,li{list-style:none}.button{background:transparent;border:none;text-transform:capitalize;cursor:pointer}.text{color:var(--gray-600);font-size:var(--filters-size);margin-block-start:2rem}@media (max-width: 580px){.text{transform:translateY(350%)}}.header{width:var(--desktop-content-width);display:flex;align-items:center;justify-content:space-between}@media (max-width: 580px){.header{width:var(--mobile-content-width)}}.header__title{font-size:var(--page-title-size);color:var(--page-title-color);font-weight:var(--bolder-font-weight);letter-spacing:1.5rem;text-transform:uppercase}@media (max-width: 580px){.header__title{letter-spacing:1rem}}.theme-switcher{position:relative}.theme-switcher__input{position:absolute;opacity:0;width:1px;height:1px}.theme-switcher__input:checked+.theme-switcher__label:before{opacity:1}.theme-switcher__input:checked+.theme-switcher__label:after{opacity:0}.theme-switcher__label{position:relative;display:inline-block;width:2.5rem;aspect-ratio:1/1;cursor:pointer;transition:var(--base-transition-timing) ease-in-out}.theme-switcher__label:hover{transform:scale(1.1)}.theme-switcher__label:before,.theme-switcher__label:after{content:"";position:absolute;background-size:contain;background-repeat:no-repeat;background-position:center;inset:0;transition:opacity var(--base-transition-timing) ease-in-out}.theme-switcher__label:before{opacity:0;background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='26'%20height='26'%3e%3cpath%20fill='%23FFF'%20fill-rule='evenodd'%20d='M13%2021a1%201%200%20011%201v3a1%201%200%2011-2%200v-3a1%201%200%20011-1zm-5.657-2.343a1%201%200%20010%201.414l-2.121%202.121a1%201%200%2001-1.414-1.414l2.12-2.121a1%201%200%20011.415%200zm12.728%200l2.121%202.121a1%201%200%2001-1.414%201.414l-2.121-2.12a1%201%200%20011.414-1.415zM13%208a5%205%200%20110%2010%205%205%200%20010-10zm12%204a1%201%200%20110%202h-3a1%201%200%20110-2h3zM4%2012a1%201%200%20110%202H1a1%201%200%20110-2h3zm18.192-8.192a1%201%200%20010%201.414l-2.12%202.121a1%201%200%2001-1.415-1.414l2.121-2.121a1%201%200%20011.414%200zm-16.97%200l2.121%202.12A1%201%200%20015.93%207.344L3.808%205.222a1%201%200%20011.414-1.414zM13%200a1%201%200%20011%201v3a1%201%200%2011-2%200V1a1%201%200%20011-1z'/%3e%3c/svg%3e")}.theme-switcher__label:after{opacity:1;background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='26'%20height='26'%3e%3cpath%20fill='%23FFF'%20fill-rule='evenodd'%20d='M13%200c.81%200%201.603.074%202.373.216C10.593%201.199%207%205.43%207%2010.5%207%2016.299%2011.701%2021%2017.5%2021c2.996%200%205.7-1.255%207.613-3.268C23.22%2022.572%2018.51%2026%2013%2026%205.82%2026%200%2020.18%200%2013S5.82%200%2013%200z'/%3e%3c/svg%3e")}.todo-form{display:flex;align-items:center;gap:2.5rem;margin-inline-end:auto;position:relative;padding:1.7rem var(--base-padding);background-color:var(--box-bg);border-radius:var(--base-border-radius);transition:.1s ease-in-out}.todo-form:has(.todo-form__input:focus){border-bottom:.2rem solid var(--clear-button-hover)}.todo-form__button{display:flex;align-items:center;gap:2.5rem;margin-inline-end:auto}.todo-form__button:before{content:"";width:2.5rem;aspect-ratio:1/1;border-radius:50%;background:var(--box-bg);border:.1rem solid var(--task-border-color);transition:border-color var(--base-transition-timing) ease-in-out,background var(--base-transition-timing) ease-in-out}.todo-form__input{background-color:var(--box-bg);color:var(--input-color);outline:0;border:0;width:100%}.error{display:inline-flex;align-items:center;gap:.8rem}.error:before{content:"";background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAuhJREFUSImtlEtoVFcYx3/fmTuPPCYz8dHUWhKVIGSpg21VWhqzsFaqlkKXRdG68rFTFMEJpbVFFyJ04cZCoS0+FmpwIahtRfFVq60i+EAbBwOSSdTJ5DUz93xdyNzOZCZDb/S/u9/3P//fOfd89wpTkKKyZ8GJzxDWA+8BcSAl6O/YwIEdN1ddK3rFb/i3iSMxq6HDwPJJLFaFvTuvr94hiBo/4QcTB4PWhk6VhrcmZrDhcCd1sVCxZETZ/k3ixB4AX4C0tmxCWFpam9URZ2Z7E/G368u8omz7OtGz0BdAYIsfu1F3s7N2TjIu1mzB2Nm13GFT3wjM8bMhhU7HqPlFRT9Ca9+3iO95AHjTUbQLYPHCG9RFxip3ocL5K+9g1VZNSN0c4PH1NIO9w5VN5bkDBAF6n8wmHM5VelyDVcHqGK4tEDBOWb/v9jN+2nix+v6FS567f3AajilU9TmOSz7vkMk9ozkys6xXFwvR/n4Lt06lQMvXWTjkAVZ8eJ6mhqGqgEw2yskzyxgcfUo0FMcxQa/XtmgGK3cv4NHlfrLp/16xQM+uP9f0yLq2bq0WOpnCgQhvNc0rg0Sagoxl8iUuPZcLhj9NXvk4453gg3evEm0YqRl+9+FcHvzTRu+Lu0yPtBANTyNgAl543h0nm89cbHijfXnyt84CgAe4/2gukch4TUB6oBkAa136R/pIj/YRNBFEDNYWyNscKOm9d770LtMDvBhqZGw8TC4XZHi0jlg0izHlo+k4Ls2xzATsy+fsSD1Yh4nyKl1LLxNrzDA00sDZC0tY2fUrhuqzX0237s3nrzsdkwN6znSWNX4+/sn/Dq8lXz+7qQKev+bMsjwjIt9R8Q1OWRlV+b60IABfzEvOdwq0qkg3sGTCogLoflFO14wWcQuF4N8/Ptk5UAEoal1r93GE1SWlG2J146FU8g+/RymqcnBfaliVr4Yfd+w7yufuVMMrAcIgyDGxdusPqWTfqwQX9S+b1P+2X5a1XQAAAABJRU5ErkJggg==);background-size:contain;background-repeat:no-repeat;width:2.5rem;aspect-ratio:1/1;max-width:100%}.error{opacity:0;width:auto;font-size:var(--error-font-size);color:var(--error-text-color);background:var(--error-box-bg);padding:.6rem 1.5rem;border-radius:var(--base-border-radius);transition:opacity var(--base-transition-timing) ease-in-out,margin var(--base-transition-timing) ease-in-out}.error.error-active{opacity:1;margin-block-end:var(--base-padding)}.tasks-container{padding:var(--base-padding) var(--base-padding) 1.3rem;background-color:var(--box-bg);border-radius:var(--base-border-radius);box-shadow:2px 2px 10px #0000001a,-2px 0 10px #0000001a}.tasks{display:flex;flex-direction:column;gap:2rem}.tasks__task{position:relative;display:flex;justify-content:center;align-items:center;padding-block-end:2rem;cursor:grab;transition:var(--base-transition-timing) ease-in-out}.tasks__task:before{content:"";bottom:0;width:var(--desktop-content-width);position:absolute;border-bottom:.1rem solid var(--task-border-color)}@media (max-width: 580px){.tasks__task:before{width:var(--mobile-content-width)}}.tasks__task:hover .tasks__delete{opacity:1;pointer-events:all}.tasks__task.dragging{cursor:grabbing}.tasks__task.dragging .tasks__text{color:var(--active-button-color)}.tasks__task.dragging:before{border-bottom:.2rem solid var(--active-button-color)}.tasks__content{display:flex;justify-content:space-between;width:100%;opacity:1;pointer-events:all;transition:opacity var(--base-transition-timing) ease-in-out}.tasks__content.delete-popup--active{opacity:0;max-height:0;max-width:0;z-index:-1;pointer-events:none}.tasks__toggle{display:flex;align-items:center;gap:2.5rem;margin-inline-end:auto}.tasks__checkbox{display:none}.tasks__checkbox:checked~.tasks__text{position:relative;color:var(--task-completed)}.tasks__checkbox:checked~.tasks__text:after{content:"";position:absolute;left:0;right:0;top:50%;height:.1rem;background:var(--task-completed);transform:translateY(-50%)}.tasks__checkbox:checked~.tasks__circle:before{background:var(--linear-gradient);border:none}.tasks__checkbox:checked~.tasks__circle:after{opacity:1}.tasks__text{color:var(--input-color);cursor:pointer;transition:var(--base-transition-timing) ease-in-out}.tasks__circle{position:relative;display:flex;justify-content:center;align-items:center;cursor:pointer}.tasks__circle:before{content:"";width:2.5rem;aspect-ratio:1/1;border-radius:50%;background:var(--box-bg);border:.1rem solid var(--task-border-color);transition:border-color var(--base-transition-timing) ease-in-out,background var(--base-transition-timing) ease-in-out}.tasks__circle:after{content:"";position:absolute;background-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='11'%20height='9'%3e%3cpath%20fill='none'%20stroke='%23FFF'%20stroke-width='2'%20d='M1%204.304L3.696%207l6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-size:contain;width:1.2rem;aspect-ratio:1/1;opacity:0;transition:opacity var(--base-transition-timing) ease-in-out}.tasks__circle:hover:before,.tasks__toggle:has(.tasks__text:hover) .tasks__circle:before{border-color:var(--circle-hover-color)}.tasks__delete{opacity:0;pointer-events:none;transition:opacity var(--base-transition-timing) ease-in-out}@media (max-width: 580px){.tasks__delete{opacity:1;pointer-events:all}}.empty-tasks{font-weight:var(--bolder-font-weight);color:var(--active-button-color);margin-block-end:var(--base-padding)}.controls{display:flex;justify-content:space-between;align-items:center;margin-block-start:1.7rem}.controls__left,.controls__clear{font-size:var(--items-left-size);color:var(--gray-600)}.controls__filters{display:flex;gap:2rem;justify-content:space-between;font-size:var(--filters-size)}@media (max-width: 580px){.controls__filters{justify-content:center;width:var(--mobile-content-width);background:var(--box-bg);border-radius:var(--base-border-radius);padding:1.5rem var(--base-padding);box-shadow:0 2px 10px #0000001a;position:absolute;left:50%;transform:translate(-50%,150%)}}.controls [data-filter]{color:var(--filters-color);font-weight:var(--bold-font-weight);transition:color var(--base-transition-timing) ease-in-out,font-weight var(--base-transition-timing) ease-in-out}.controls [data-filter]:hover{color:var(--filters-hover)}.controls__clear{font-weight:var(--medium-font-weight);transition:var(--base-transition-timing) ease-in-out}.controls__clear:hover{color:var(--clear-button-hover)}.controls__clear.active-button{color:var(--clear-pop-up);border-bottom:.2rem solid var(--clear-pop-up)}.controls [data-filter].active-button{color:var(--active-button-color);font-weight:var(--bolder-font-weight);border-bottom:.2rem solid var(--active-button-color)}.delete-popup{padding-block:1rem;color:var(--input-color);opacity:0;width:0;max-height:0;pointer-events:none;overflow:hidden;transition:max-height var(--base-transition-timing) ease-in-out,opacity var(--base-transition-timing) ease-in-out}.delete-popup.delete-popup--active{max-height:10rem;width:100%;opacity:1;pointer-events:all}.delete-popup__message{display:inline-flex;align-items:center;gap:1rem}.delete-popup__message:before{content:"";background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAA6FJREFUWIXdlltoXFUUhr+1zzkzZ+5kMkmGQpNQtFCkggmCRQ0JPvjgiyIoBZFI1VbzolBoRYQRhCBFRUu1IGjqpT4oWBUFKdh4CcSW8alpMVKbNk1Nk9qY2M4lZ3K2DyZDkjkzmWTGPvi/nb3+tf6ftffiLKGO2NHVf4cy9C6Qe4FtgAVcAElr9NH8XPzLdHq3szxH6iJ8/+tx5eTfRPPYGtQRtHpyaHDfcN0MdHW9stk1jW+1Ztvy80jEJhYNcGliZnVKXoSdP333wucAqhbx7u6UXTDMY6vFAd56bSdHP3ia9rbE6pBfaz65p6e/s2YDBeXfL+gOr1hLSwwlQktzxCvsR3ifVEpt2EB3dyqM5rmN5mvN9ru/9z24YQPzYt+nIbbR/EU8bKZSJ8yxycheLfKAQKDazKk/RuKzsxM16qsd5vkr0X4R9q53HLToGsUBdNIUeHzp03UXQLtl6SIKUQYAao33m83OE43YZDLzlWgZE2gGcJwsY+d+rFhUlGLLLT0oZWBYlW/rpZeP0dbayOkzla5JxqX3mXSxl65bAF2htUqh5N8O5HJzjI8Nl+dWAS28aq6sb5bjlsC2o/jtMPncdc94UyJCPB7i19HJciVcXPejoqLj5JieHGGtpyVAU/I2LMsm0bSVifFfPHlvHHiUttYEvU+9x7nfpzzqyJGhwRdPFw2Ypo9Yw2Z0pSsARATT8gEQDCVoiLczc22shPfzqfPcuDHP9PScRw3OZhXPA6x4AxuBRvPn1G+eJrwg6JPaNB4aOr7vMkCxA65bYPaviYpjuBrhaBLLCpBo3kowGOfq1dGyb0IZFqFQ41e52QuPDB5P5ZbOiwa065LPzaHXYSAQimMtjmMwnKA1nCCfmyOTuYbjZNHuAqZpYwdiBIONiKjxgS+eyC2vUTRgmD6Sm7ZXLV4OfjuK3456Bz0ue8XcFZwcepFlmn5EFI6TrcmQMiyMCuO9bAyzjI8NF002xNsJh5u4dPHUmqNZCaFQI8lNt69twLICbLm1p4TgdVZP1LQR/W8M/H3T1ESXaCngm5skr0G+LjHgqkKf1vozoLZ5q4zLCLsH3uksWTiKm1gqdcIcvdIY8TF/AGRXmUJ5NP0+Vx+6bvgWqlEWM7Pw8cG7Sv9Iqw0soXdP+hDCsyVMzQ8Lij0fvt15thrhalHNBjKjYf+Rwx3vQl020fUYkE/FpG/gYMd0vYXLGxC5CPoM2u0bOHzn4H8lvIR/AMHmLynBTj7vAAAAAElFTkSuQmCC);background-size:contain;background-repeat:no-repeat;width:2.3rem;aspect-ratio:1/1;max-width:100%}.delete-popup__content{display:flex;justify-content:space-between;margin-block-start:1rem;padding:0rem .7rem .3rem;border-bottom:solid .2rem var(--delete-popup-custom-color);border-left:solid .2rem var(--delete-popup-custom-color)}.delete-popup__task{padding-inline-start:.3rem;color:var(--delete-popup-custom-color)}.delete-popup__status{margin-inline-start:.5rem;font-size:var(--items-left-size);color:var(--gray-600)}.delete-popup__status:before{content:"- "}.delete-popup__buttons{display:flex;gap:2.5rem;justify-content:flex-end}.delete-popup__clear{color:var(--delete-popup-custom-color);font-weight:var(--bolder-font-weight)}.delete-popup__clear,.delete-popup__cancel{transition:color var(--base-transition-timing) ease-in-out}.delete-popup__clear:hover,.delete-popup__cancel:hover{color:var(--delete-popup-hover)}