@import url(https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap);*{box-sizing:border-box;margin:0;padding:0}html{font-family:Josefin Sans,sans-serif;font-size:18px}body{background-color:#fafafa;background-color:var(--background);color:var(--gray-50);height:100vh}@media(min-width:768px){body{display:flex;justify-content:center}}:root{--blue-500:#3a7bfd;--check-bg:linear-gradient(120deg,#57ddff,#c058f3);--background:#fafafa;--form-bg:#fafafa;--text-color:#484b6a;--completed-color:#d2d3db;--border-color:#d2d3db;--purple-300:#cacde8;--gray-300:#d2d3db;--gray-600:#9394a5;--navy-850:#484b6a;--navy-900:#25273c;--purple-100:#e4e5f1;--purple-600:#5c5f7f;--purple-700:#4d5066;--purple-800:#393a4c}.dark{--background:#161722;--form-bg:#25273c;--text-color:#e4e5f1;--border-color:#5c5f7f;--completed-color:#5c5f7f}li{list-style-type:none}.app{padding:40px 20px}@media(min-width:768px){.app{margin:40px;width:600px}}@media(min-width:991px){.app{margin:50px;width:700px}}@media(min-width:1200px){.app{margin:60px}}.app .body-image{left:0;position:absolute;right:0;top:0;z-index:-1}.app .body-image img{display:block;height:25vh;object-fit:cover;width:100%}@media(min-width:768px){.app .body-image img{height:33vh}}header{align-items:center;display:flex;justify-content:space-between;margin-bottom:35px}header h1{color:#fafafa;color:var(--background);font-size:24px;letter-spacing:7px}@media(min-width:1200px){header h1{font-size:35px}}header .toggle-theme{cursor:pointer}header .toggle-theme img{height:22px;width:22px}main form{margin-bottom:20px}main form .input-box{position:relative}main form .input-box .costum-checkbox{align-items:center;border:1px solid #393a4c;border:1px solid var(--purple-800);border-radius:50%;display:flex;justify-content:center;left:15px;padding:8px;position:absolute;top:50%;transform:translateY(-50%)}main form .input-box input{border:none;color:#484b6a;color:var(--text-color);font-size:18px;padding:16px 16px 16px 45px;width:100%}main .todos,main form .input-box input{background-color:#fafafa;background-color:var(--form-bg);border-radius:5px}main .todos .todo-list .todo-list-item{align-items:center;border-bottom:1px solid #d2d3db;border-bottom:1px solid var(--border-color);color:#484b6a;color:var(--text-color);display:flex;font-size:14px;gap:15px;list-style-type:none;padding:16px;position:relative;transition:all .3s}main .todos .todo-list .todo-list-item:last-child{justify-content:space-between;position:relative}main .todos .todo-list .todo-list-item:last-child>p{color:#484b6a;color:var(--text-color);font-size:12px}main .todos .todo-list .todo-list-item:last-child .clear-completed{cursor:pointer}main .todos .todo-list .todo-list-item:last-child .filter{background-color:#fafafa;background-color:var(--form-bg);border-radius:5px;bottom:-150%;left:0;padding:16px 0;position:absolute;width:100%}@media(min-width:768px){main .todos .todo-list .todo-list-item:last-child .filter{padding:0;position:static;width:auto}}main .todos .todo-list .todo-list-item:last-child .filter ul{align-items:center;display:flex;gap:20px;justify-content:center}main .todos .todo-list .todo-list-item:last-child .filter ul li{color:#9394a5;color:var(--gray-600);cursor:pointer;font-size:14px}main .todos .todo-list .todo-list-item:last-child .filter ul li.active{color:#3a7bfd;color:var(--blue-500)}main .todos .todo-list .todo-list-item .costum-checkbox{align-items:center;border:1px solid #393a4c;border:1px solid var(--purple-800);border-radius:50%;cursor:pointer;display:flex;justify-content:center;padding:5px}main .todos .todo-list .todo-list-item .costum-checkbox.linear{background:linear-gradient(120deg,#57ddff,#c058f3);background:var(--check-bg)}main .todos .todo-list .todo-list-item .costum-checkbox span{border-radius:50%;height:7px;width:7px}main .todos .todo-list .todo-list-item .costum-checkbox img{height:7px;width:7px}main .todos .todo-list .todo-list-item>p.completed{color:#d2d3db;color:var(--completed-color);padding-right:20px;text-decoration:line-through}main .todos .todo-list .todo-list-item .delete-todo{position:absolute;right:20px;top:50%;transform:translateY(-50%)}main .todos .todo-list .todo-list-item .delete-todo img{cursor:pointer;height:15px;width:15px}main .todos .todo-list .empty-list{align-items:center;color:#484b6a;color:var(--text-color);display:flex;font-size:20px;justify-content:center;min-height:200px}
/*# sourceMappingURL=main.a94afb56.css.map*/