@import url(https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap);*,:after,:before{margin:0;padding:0;box-sizing:border-box}ul{list-style:none}#app{font-family:Josefin Sans,sans-serif}.hide-el{display:none}.active-link{color:#3a7bfd;font-weight:700}.title{font-size:19px;font-weight:700;color:#4d5066;order:2;align-self:center;margin-left:15px;padding-top:5px}.completed-paragraph{position:relative;color:#9394a5}.completed-paragraph:before{content:"";position:absolute;left:0;top:14px;width:100%;height:2px;background:#d2d3db}.bg-img{height:50vh;background-image:url(/img/bg-desktop-light.c2b0ff8f.jpg);background-repeat:no-repeat}.container{width:40%;margin:auto;display:flex;flex-direction:column;justify-content:center}.top{display:flex;justify-content:space-between;margin-top:25px;margin-bottom:10px}.top img{cursor:pointer}.todo-container input{width:40vw;border:none;outline:none;padding:20px 0 20px 20px;border-radius:3.5px;font-size:18px}.todo-container input::-moz-placeholder{font-size:18px}.todo-container input::placeholder{font-size:18px}.todo-container .checker{width:25px;height:25px;border:1px solid #9394a5;border-radius:50%;cursor:pointer}.todo-container .checker-position{transform:translate(15px,43px)}.todo-container .completed{background:linear-gradient(90deg,#57ddff,#c058f3);border:none;position:relative}.todo-container .completed:before{content:url(/img/icon-check.5b02c047.svg);position:absolute;right:7px;top:5px}.box{min-width:30vw;background:#fff;margin-top:20px;border-radius:3.5px;padding:20px 0;box-shadow:8px 10px 17px -5px #9394a5;-webkit-box-shadow:8px 10px 17px -5px #9394a5;-moz-box-shadow:8px 10px 17px -5px #9394a5}.box hr{margin:15px 0}.box .list{display:flex;padding:0 20px;margin-bottom:35px;position:relative}.box .list:before{content:"";position:absolute;width:100%;height:1px;background:#9394a5;bottom:-15px;left:0}.box .list-checker{order:1}.bottom{justify-content:space-between;padding:0 15px;color:#9394a5}.bottom,.bottom ul{display:flex}.bottom ul li{margin:0 7px}.bottom .clear,.bottom ul li,.completed{cursor:pointer}.completed{background:linear-gradient(90deg,#57ddff,#c058f3);width:25px;height:25px;border:1px solid #9394a5;border-radius:50%}h1{letter-spacing:15px;font-weight:700;color:#fafafa}.dark-mode{background:#161722}.dark-mode .input-dark{background:#25273c;color:#9394a5}.dark-mode .input-dark::-moz-placeholder{color:#9394a5}.dark-mode .input-dark::placeholder{color:#9394a5}.dark-mode .dark-box{box-shadow:8px 10px 17px -5px #25273c;-webkit-box-shadow:8px 10px 17px -5px #25273c;-moz-box-shadow:8px 10px 17px -5px #25273c;background:#25273c}.dark-mode .dark-box .title{color:#9394a5}.dark-mode .dark-box .list:before{background:#25273c}.dark-mode .dark-box .completed-paragraph{color:#4d5066}.dark-mode .dark-box .list:before{background:#484b6a}.dark-mode .bg-img{background-image:url(/img/bg-desktop-dark.b69c1296.jpg)}.dark-mode .mobile-only{background:#25273c;color:#4d5066}.dark-mode .mobile-only li{cursor:pointer}.mobile-only{display:none}@media(max-width:1140px){.mobile-only{display:block;background:#fff;max-width:98%;margin:20px auto;padding:20px 0;border-radius:5px}.mobile-only ul{display:flex;justify-content:space-evenly}.mobile-only ul li{font-size:17px}}@media(max-width:1140px)and (max-width:600px){.mobile-only ul li{font-size:14px}}@media(max-width:1140px){.desktop-only{display:none}}@media(max-width:900px){.clear,.length,.title{font-size:2.3vw}}@media(max-width:600px){.clear,.length,.title{font-size:3vw;text-align:center}}@media(max-width:600px){.todo-container input::-webkit-input-placeholder{font-size:14.5px}}@media(max-width:600px){.todo-container input::-moz-placeholder{font-size:14.5px}}@media(max-width:600px){.todo-container input:-ms-input-placeholder{font-size:14.5px}}@media(max-width:600px){.todo-container input::-ms-input-placeholder{font-size:14.5px}}@media(max-width:600px){.todo-container input::-moz-placeholder{font-size:14.5px}.todo-container input::placeholder{font-size:14.5px}}