@import "https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap";*,:after,:before{box-sizing:inherit;margin:0;padding:0}:root{--color-primary:#060606;--add-btn-width:3.6rem;--circumference:339.292;--h1-height:7rem}html{font-size:62.5%}body{box-sizing:border-box;color:#fff;background:linear-gradient(120deg,#1b3966,#896fa6,#1b5166) 0 0/200% 200%;min-width:100dvw;min-height:100dvh;font-family:Montserrat,Arial,Helvetica,sans-serif;font-size:1.2rem;animation:20s infinite moveGradient}ul{list-style:none}.container-app{min-height:calc(100dvh - var(--h1-height));flex-direction:column;gap:2.4rem;max-width:60rem;margin:0 auto;padding:4rem 2rem;display:flex}.header{color:#fff;text-align:center;height:var(--h1-height);background-color:#ffffff20;justify-content:center;align-items:center;padding:2rem;font-weight:100;display:flex;box-shadow:.2rem .2rem 3rem #0000001a}.title{text-align:center;font-weight:200}.heading{margin-bottom:1rem;font-size:2.3rem;font-weight:300}.btn{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#ffffffe6;background:#ffffff1a;border:1px solid #fff3;border-radius:10px;justify-content:center;align-items:center;padding:.4rem;transition:all .2s;display:flex;box-shadow:1px 3px 30px #341f871a}.btn:active{opacity:.8;transform:scale(.98)}@media (hover:hover) and (pointer:fine){.btn--edit:hover{cursor:pointer;color:#4ef0e3;border-color:#4ef0e399;transform:translateY(-1px);box-shadow:0 0 8px #4ef0e366}.btn--delete:hover{cursor:pointer;color:#ff6b6b;border-color:#ff6b6b99;box-shadow:0 0 8px #ff6b6b66}}.add-form{-webkit-backdrop-filter:blur(12px)saturate(160%);border-radius:20px;margin-bottom:2rem;padding:3.2rem 1.5rem;box-shadow:0 8px 32px #1f268745,inset .1px .7px #fff9}.add-form__add-box{position:relative}.add-form__input{width:100%;padding:.9rem;padding-right:calc(var(--add-btn-width) + 10px);background-color:#ebebeb;border:none;border-radius:20px;font-family:inherit;font-size:1.7rem;box-shadow:.2rem .2rem 3rem #0003}.add-form__btn{height:3.6rem;width:var(--add-btn-width);color:#4ef0e3;background:#914ef026;border:1px solid #8745e466;border-radius:50%;justify-content:center;align-items:center;font-family:inherit;transition:-webkit-backdrop-filter .25s,backdrop-filter .25s;display:flex;position:absolute;top:50%;right:2px;transform:translateY(-50%)}@media (hover:hover) and (pointer:fine){.add-form__btn:hover{cursor:pointer;-webkit-backdrop-filter:brightness(.95)blur(12px)saturate(120%);backdrop-filter:brightness(.95)blur(12px)saturate(120%)}}.todo-section{margin-bottom:2rem}.todo-section .list-item{-webkit-backdrop-filter:blur(12px)saturate(140%);background:#ffffff05;border:1px solid #ffffff26;border-radius:20px;box-shadow:0 8px 32px #1f26872b}@media (hover:hover) and (pointer:fine){.todo-section .list-item__checkbox:hover{cursor:pointer;background-color:#4c91af}}.tasks-list{flex-direction:column;gap:1.3rem;display:flex}.list-item{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;align-items:center;column-gap:.5rem;padding:1rem;font-size:1.8rem;font-weight:400;display:flex;position:relative;box-shadow:.2rem .2rem 3rem #0003}.list-item__checkbox{appearance:none;cursor:pointer;border:2px solid #9aa4b3;border-radius:50%;flex-shrink:0;width:2rem;height:2rem;transition:all .2s;position:relative}.list-item__checkbox:checked{background-color:#4c91af;border-color:#9aa4b3}.list-item__checkbox:checked:before{content:"";background:#4c91af;border-radius:50%;width:.9rem;height:.9rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.list-item__input{font-size:inherit;border:none;transition:width .3s;display:none}.list-item__note{margin:0 .6rem;display:block}.list-item--edit .list-item__input{background-color:#ebebeb;border:none;border-radius:18px;width:100%;margin-right:1rem;padding:.6rem .8rem;font-family:inherit;font-size:1.6rem;display:inline-block;box-shadow:.2rem .2rem 3rem #0003}.list-item--edit .list-item__checkbox,.list-item--edit .list-item__note{display:none}.btn--edit{margin-left:auto}.completed-section .list-item__note{color:#ffffff80;text-decoration:line-through}.completed-section .btn{color:#ffffff80}.stats{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;justify-content:space-evenly;column-gap:1rem;margin-top:auto;padding:1.8rem .2rem;font-size:1.6rem;animation:6s ease-in-out infinite float;display:flex;box-shadow:0 8px 32px #1f268745,inset .1px .7px 1.5px #fff9}.stats__info{align-self:center;font-size:1.6rem;font-weight:300}.stats__info p:not(:last-child){margin-bottom:2rem}.progress-ring{z-index:1;position:relative;transform:rotate(-90deg)}.progress-ring__bg{fill:none;stroke:#eee;stroke-width:7px}.progress-ring__value{fill:none;stroke:#51ce55;stroke-width:12px;stroke-linecap:round;stroke-dasharray:var(--circumference);stroke-dashoffset:calc(var(--circumference) - var(--circumference)*.65);transition:stroke-dashoffset .4s}.progress-ring__text{fill:inherit;text-anchor:middle;dominant-baseline:middle;transform:rotate(90,60,60);font-size:2rem;font-weight:600}.text-center{text-align:center}button,input{-webkit-tap-highlight-color:transparent}input,button:focus,button:active{outline:none}.logo-icon{width:4rem;height:4rem}.plus-icon{stroke:#8d5cc145;width:2.2rem;height:2.2rem}@keyframes moveGradient{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}