@import url(https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap);*{box-sizing:border-box;font-family:Josefin Sans,sans-serif;margin:0;padding:0}html{--bg-image:url(/to-do-list/static/media/bg-desktop-dark.73e47dbb723ebc772ef0.jpg);--Background-color:#161722;--List-bg-color:#25273c;--Footer-color:#777a92;--List-active-color:#9394a5;--List-done-color:#4d5066;--Bright-Blue:#3a7bfd;--Box-shadow:#161722}html.light{--bg-image:url(/to-do-list/static/media/bg-desktop-light.3508d620efd5a52bb4ce.jpg);--List-bg-color:#fafafa;--Background-color:#e4e5f1;--List-done-color:#d2d3db;--Footer-color:#9394a5;--List-active-color:#484b6a;--Bright-Blue:#3a7bfd;--Box-shadow:#b9b9bb}body{background-color:#161722;background-color:var(--Background-color);background-image:url(/to-do-list/static/media/bg-desktop-dark.73e47dbb723ebc772ef0.jpg);background-image:var(--bg-image);background-repeat:no-repeat;background-size:100% 300px;display:flex;justify-content:center;min-height:100vh}.App{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.App>div{margin-top:150px}button{cursor:pointer}header{align-items:center;color:#fff;display:flex;gap:0;justify-content:space-between}header h1{font-size:2.5rem;letter-spacing:.6rem;text-transform:uppercase}header img{cursor:pointer}form{margin-top:20px}form,ul{box-shadow:0 0 10px 0 #161722;box-shadow:0 0 10px 0 var(--Box-shadow)}ul{display:flex;flex-direction:column;margin-top:30px}.cross-btn{opacity:0}.check-btn{background:transparent;border:1px solid #9394a5;border:1px solid var(--List-active-color);border-radius:50%;height:26px;transition:background .2s ease-in-out;width:26px}.check-btn img{opacity:0;transition:opacity .3s ease-in-out}.check-btn.active{background:linear-gradient(#57ddff,#c058f3)}.check-btn.active img{opacity:1}li{align-items:center;background-color:#25273c;background-color:var(--List-bg-color);border-bottom:1px solid #4d5066;border-bottom:1px solid var(--List-done-color);color:#9394a5;color:var(--List-active-color);display:grid;grid-template-columns:45px auto 30px;list-style-type:none;padding:20px 30px;transition:color .5s ease-in-out;width:100%}li button{background-color:transparent;border:0;color:#fff;cursor:pointer;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}li:hover .cross-btn{opacity:1}li span{color:#9394a5;color:var(--List-active-color);margin-top:5px;text-decoration:none}li.done span{color:#4d5066;color:var(--List-done-color);text-decoration:line-through}li:last-of-type{border:0}input{border:0;color:#9394a5;color:var(--List-active-color);font-size:1.1rem;outline:none;padding:18px 30px}#error,input{background-color:#25273c;background-color:var(--List-bg-color);width:100%}#error{color:red;display:inline-block;padding:15px 30px}#error,.footer{border-top:1px solid #4d5066;border-top:1px solid var(--List-done-color)}.footer{grid-gap:20px;background-color:#25273c;background-color:var(--List-bg-color);box-shadow:0 10px 10px 1px #161722;box-shadow:0 10px 10px 1px var(--Box-shadow);display:grid;gap:20px;grid-template-areas:"items buttons clearButton";justify-content:center;padding:20px;width:100%}.footer span{grid-area:items}.footer button,.footer span{color:#777a92;color:var(--Footer-color);font-size:.9rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.footer button{background-color:transparent;border:0}.footer div{display:flex;gap:15px;grid-area:buttons;margin:0 auto}.footer div button.active{color:#3a7bfd;color:var(--Bright-Blue)}.footer>button{float:right;grid-area:clearButton}@media (min-width:900px){header{gap:25rem}.footer{gap:50px;grid-template-areas:"items . buttons . clearButton"}li{grid-template-columns:70px auto 30px}}@media (max-width:500px){.footer{gap:50px;grid-template-areas:"items . buttons . clearButton";position:relative}.footer div{background-color:#25273c;background-color:var(--List-bg-color);grid-area:none;justify-content:center;left:0;padding:18px 0;position:absolute;top:80px;width:100%}}
/*# sourceMappingURL=main.c261fb33.css.map*/