@charset "UTF-8";@import"https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;700&display=swap";:root{--font-body: "Josefin Sans", sans-serif;--font-size-body: 18px;--font-size-btns: 15px;--color-pr-bright-blue: hsl(220, 98%, 61%);--color-aqua: hsl(192, 100%, 67%);--color-purple: hsl(280, 87%, 65%);--color-lg-very-light-gray: hsl(0, 0%, 98%);--color-lg-very-light-grayish-blue: hsl(236, 33%, 92%);--color-lg-grayish-blue: hsl(233, 11%, 84%);--color-lg-dark-grayish-blue: hsl(236, 9%, 61%);--color-lg-very-dark-grayish-blue: hsl(235, 19%, 35%);--color-dr-very-dark-blue: hsl(235, 21%, 11%);--color-dr-very-dark-desaturated-blue: hsl(235, 24%, 19%);--color-dr-light-grayish-blue: hsl(234, 39%, 85%);--color-dr-light-grayish-blue-hover: hsl(236, 33%, 92%);--color-dr-dark-grayish-blue: hsl(234, 11%, 52%);--color-dr-very-dark-grayish-blue: hsl(233, 14%, 35%);--color-dr-very-dark-grayish-blues: hsl(237, 14%, 26%);--app-width-size: 40rem;--app-width-size-mobile: 90%;--app-height-size: 25rem;--app-height-size-mobile: 80%;--items-height-size: 4rem}*{padding:0;margin:0;box-sizing:content-box}body{font-size:var(--font-size-body);font-family:var(--font-body)}.title-container{width:var(--app-width-size);display:flex;justify-content:space-between;align-items:center;letter-spacing:1rem;color:var(--color-lg-very-light-grayish-blue)}.btn-theme{border:none;background-color:transparent;cursor:pointer}@media screen and (max-width: 900px){.title-container{width:var(--app-width-size-mobile)}}.app{width:100vw;height:100vh;background-repeat:no-repeat;background-size:contain;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2rem}.app .main-container{width:100vw;height:60vh;display:flex;flex-direction:column;align-items:center}.app-dark{background-color:var(--color-dr-very-dark-blue);background-image:url(/assets/bg-desktop-dark-cf72eaad.jpg)}.app-light{background-color:var(--color-lg-very-light-grayish-blue);background-image:url(/assets/bg-desktop-light-c99caf89.jpg)}@media screen and (max-width: 900px){.app{height:95vh;padding-top:4rem;justify-content:flex-start}.app .main-container{display:flex;flex-direction:column;align-items:center}.app-dark{background-image:url(/assets/bg-mobile-dark-0b3e4071.jpg)}.app-light{background-image:url(/assets/bg-mobile-light-df636158.jpg)}}.add-container{width:var(--app-width-size);height:var(--items-height-size);border-radius:.4rem;display:flex;justify-content:center;align-items:center;gap:.7rem}.add-container-light{background-color:var(--color-lg-very-light-gray)}.add-container-dark{background-color:var(--color-dr-very-dark-desaturated-blue)}.add-container .add-input,.add-container .add-input-dark{width:85%;height:var(--items-height-size);font-family:var(--font-body);font-size:var(--font-size-body);background-color:transparent;border:none;outline:none}.add-container .add-input-dark{color:var(--color-dr-light-grayish-blue)}@media screen and (max-width: 900px){.add-container{width:var(--app-width-size-mobile);padding:0 .5rem}}.todos-container{width:var(--app-width-size);height:var(--app-height-size);border-top-left-radius:.4rem;border-top-right-radius:.4rem;display:flex;flex-direction:column;overflow-y:scroll}.todos-container::-webkit-scrollbar{width:8px;height:8px;display:none}.todos-container ul{display:flex;flex-direction:column;align-items:center}.todos-container-light{background-color:var(--color-lg-very-light-gray)}.todos-container-dark{background-color:var(--color-dr-very-dark-desaturated-blue);border-top:solid 1px var(--color-dr-very-dark-grayish-blues)}.todo-item-container{width:36.5rem;padding:1rem 1.7rem;list-style:none;border-radius:.4rem;display:flex;align-items:center;justify-content:space-between}.todo-item-container-light{color:var(--color-lg-very-dark-grayish-blue);background-color:var(--color-lg-very-light-gray);border-top:solid 1px var(--color-lg-very-light-grayish-blue);border-bottom:solid 1px var(--color-lg-very-light-grayish-blue)}.todo-item-container-dark{color:var(--color-dr-light-grayish-blue);background-color:var(--color-dr-very-dark-desaturated-blue);border-top:solid 1px var(--color-dr-very-dark-grayish-blues);border-bottom:solid 1px var(--color-dr-very-dark-grayish-blues)}.todo-item-container .todo-item-text{display:flex;align-items:center;gap:2rem}.todo-item-container .item-check{cursor:pointer}.todo-item-container .item-check:hover{fill:var(--color-purple)}.todo-item-container .item-delete{cursor:pointer}.todo-item-container .item-completed{color:var(--color-lg-very-light-gray);background-image:linear-gradient(90deg,var(--color-aqua),var(--color-purple));border-radius:50%;cursor:pointer}.todo-item-container .item-completed-p{text-decoration:line-through;color:var(--color-dr-dark-grayish-blue)}.btns-container{width:36rem;padding:1rem 2rem;border-bottom-left-radius:.4rem;border-bottom-right-radius:.4rem;font-size:var(--font-size-btns);display:flex;justify-content:space-between;align-items:center}.btns-container-light{background-color:var(--color-lg-very-light-gray);color:var(--color-lg-dark-grayish-blue);border-top:solid 1px var(--color-lg-very-light-grayish-blue)}.btns-container-dark{background-color:var(--color-dr-very-dark-desaturated-blue);color:var(--color-dr-dark-grayish-blue);border-top:solid 1px var(--color-dr-very-dark-grayish-blues)}.btns-container .btns{display:flex;gap:1rem}.btns-container .btn{background-color:transparent;border:none;font-family:var(--font-body);font-size:var(--font-size-btns);cursor:pointer}.btns-container .btn-light{color:var(--color-lg-dark-grayish-blue)}.btns-container .btn-light:hover{color:var(--color-lg-very-dark-grayish-blue);font-weight:700}.btns-container .btn-dark{color:var(--color-dr-dark-grayish-blue)}.btns-container .btn-dark:hover{color:var(--color-dr-light-grayish-blue-hover);font-weight:700}.btns-container .btn:active,.btns-container .btn:focus{color:var(--color-pr-bright-blue);font-weight:700}.btns-mobile{display:none}@media screen and (max-width: 900px){.todos-container{width:var(--app-width-size-mobile);height:var(--app-height-size-mobile)}.todo-item-container{width:var(--app-width-size-mobile);padding:1rem 0}.btns-container{width:var(--app-width-size-mobile);padding:1rem 0;justify-content:space-around}.btns-container .btns{display:none}.btns-mobile{width:var(--app-width-size-mobile);height:var(--items-height-size);margin-top:1rem;border-radius:.4rem;display:flex;justify-content:center;gap:1rem}.btns-mobile-light{background-color:var(--color-lg-very-light-gray)}.btns-mobile-dark{background-color:var(--color-dr-very-dark-desaturated-blue)}.btns-mobile .btn{background-color:transparent;border:none;font-family:var(--font-body);font-size:var(--font-size-btns);cursor:pointer}.btns-mobile .btn-light{color:var(--color-lg-dark-grayish-blue)}.btns-mobile .btn-light:hover{color:var(--color-lg-very-dark-grayish-blue);font-weight:700}.btns-mobile .btn-dark{color:var(--color-dr-dark-grayish-blue)}.btns-mobile .btn-dark:hover{color:var(--color-dr-light-grayish-blue-hover);font-weight:700}.btns-mobile .btn:active,.btns-mobile .btn:focus{color:var(--color-pr-bright-blue);font-weight:700}}.empty-todos,.error-todos{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.empty-todos-light{color:var(--color-lg-grayish-blue)}.empty-todos-dark{color:var(--color-dr-dark-grayish-blue)}.error-todos-light{color:var(--color-lg-grayish-blue)}.error-todos-dark{color:var(--color-dr-dark-grayish-blue)}.loader-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.dot-spinner{--uib-size: 2.8rem;--uib-speed: .9s;--uib-color: hsl(234, 11%, 52%);position:relative;display:flex;align-items:center;justify-content:flex-start;height:var(--uib-size);width:var(--uib-size)}.dot-spinner__dot{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:flex-start;height:100%;width:100%}.dot-spinner__dot:before{content:"";height:20%;width:20%;border-radius:50%;background-color:var(--uib-color);transform:scale(0);opacity:.5;animation:pulse0112 calc(var(--uib-speed) * 1.111) ease-in-out infinite;box-shadow:0 0 20px #121f354d}.dot-spinner__dot:nth-child(2){transform:rotate(45deg)}.dot-spinner__dot:nth-child(2):before{animation-delay:calc(var(--uib-speed) * -.875)}.dot-spinner__dot:nth-child(3){transform:rotate(90deg)}.dot-spinner__dot:nth-child(3):before{animation-delay:calc(var(--uib-speed) * -.75)}.dot-spinner__dot:nth-child(4){transform:rotate(135deg)}.dot-spinner__dot:nth-child(4):before{animation-delay:calc(var(--uib-speed) * -.625)}.dot-spinner__dot:nth-child(5){transform:rotate(180deg)}.dot-spinner__dot:nth-child(5):before{animation-delay:calc(var(--uib-speed) * -.5)}.dot-spinner__dot:nth-child(6){transform:rotate(225deg)}.dot-spinner__dot:nth-child(6):before{animation-delay:calc(var(--uib-speed) * -.375)}.dot-spinner__dot:nth-child(7){transform:rotate(270deg)}.dot-spinner__dot:nth-child(7):before{animation-delay:calc(var(--uib-speed) * -.25)}.dot-spinner__dot:nth-child(8){transform:rotate(315deg)}.dot-spinner__dot:nth-child(8):before{animation-delay:calc(var(--uib-speed) * -.125)}@keyframes pulse0112{0%,to{transform:scale(0);opacity:.5}50%{transform:scale(1);opacity:1}}