@import url(https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@600&display=swap);*,:after,:before{list-style:none;list-style-type:none;text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{font-family:Libre Franklin,sans-serif}a,button{cursor:pointer;border:none;outline:none;background:none}img,video{display:block;max-width:100%;height:auto;object-fit:cover}.header{position:fixed;top:0;left:0;z-index:100;height:auto;background-color:#fff;box-shadow:0 1px 3px 0 #755bb46b,0 1px 2px 0 #755bb46b}.header,.navbar{width:100%;margin:0 auto}.navbar{display:flex;flex-direction:row;align-items:center;align-content:center;justify-content:space-between;height:4.25rem}.brand{font-family:inherit;font-size:1.6rem;font-weight:600;line-height:1.25;margin-right:auto;letter-spacing:-1px;text-transform:uppercase;color:#755bb4}.brand img{width:100px;height:50px}.menu{position:fixed;top:0;left:-100%;z-index:10;width:100%;height:100vh;overflow:hidden;color:#755bb4;background-color:#fff;transition:all .4s ease-in-out}.menu.is-active{left:0}.menu-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;row-gap:1.25rem;margin-top:7rem}.menu-link{font-family:inherit;font-size:1rem;font-weight:500;line-height:1.5;color:inherit;text-transform:uppercase;transition:all .3s ease}@media only screen and (min-width:48rem){.menu{position:relative;top:0;left:0;width:auto;height:auto;padding:0;margin-left:auto;background:none;box-shadow:none;transition:none}.menu-inner{display:flex;flex-direction:row;column-gap:2rem;margin:0 auto}.menu-link{text-transform:capitalize}}.burger{position:relative;display:block;cursor:pointer;order:-1;z-index:12;width:1.75rem;height:1rem;margin-right:1rem;border:none;outline:none;background:none;visibility:visible;transform:rotate(0deg);transition:.35s ease}@media only screen and (min-width:48rem){.burger{display:none;visibility:hidden}}.burger-line{position:absolute;display:block;right:0;width:100%;height:2px;border:none;outline:none;opacity:1;transform:rotate(0deg);background-color:#755bb4;transition:.25s ease-in-out}.burger-line:first-child{top:0}.burger-line:nth-child(2){top:.5rem}.burger-line:nth-child(3){top:1rem}.burger.is-active .burger-line:first-child{top:.5rem;transform:rotate(135deg)}.burger.is-active .burger-line:nth-child(2){right:-1.5rem;opacity:0;visibility:hidden}.burger.is-active .burger-line:nth-child(3){top:.5rem;transform:rotate(-135deg)}.section{margin:0 auto;padding:5rem 0 2rem}.container{max-width:75rem;margin:0 auto;padding:0 1.25rem}.task-container{width:90%;max-width:34em;position:absolute;transform:translate(-50%,-50%);top:50%;left:50%}.new-task{position:relative;background-color:#fff;padding:1.8em 1.25em;border-radius:.3em;box-shadow:0 1.25em 1.8em #01183026;display:grid;grid-template-columns:9fr 3fr;gap:1em}.new-task input{font-family:Poppins,sans-serif;font-size:1em;border:none;border-bottom:2px solid #d1d3d4;padding:.8em .5em;color:#111;font-weight:500}.new-task input:focus{outline:none;border-color:#755bb4}.new-task button{font-family:Poppins,sans-serif;font-weight:500;font-size:1em;background-color:#755bb4;color:#fff;outline:none;border:none;border-radius:.3em;cursor:pointer}.remove-task{padding:.8em;position:relative;background-color:#fff;border-radius:.3em;box-shadow:0 1.25em 1.8em #01183026;display:grid;grid-template-columns:9fr 3fr}.remove-task p{font-family:Poppins,sans-serif;font-size:1em;border:none;padding:.8em .5em;color:#111;font-weight:500}.remove-task p:focus{outline:none;border-color:#755bb4}.remove-task button{padding:1em;font-family:Poppins,sans-serif;font-weight:500;font-size:1em;background-color:#755bb4;color:#fff;outline:none;border:none;border-radius:.3em;cursor:pointer}.task-body{max-height:250px;overflow:auto}.task-body .task{background-color:#fff;padding:1em .6em;margin-top:.6em;display:flex;align-items:center;border-bottom:2px solid #d1d3d4;cursor:pointer}.task-body .task span{font-family:Poppins,sans-serif;font-size:.9em;font-weight:400}.task-body .task button{color:#fff;padding:.8em 0;width:2.8em;border-radius:.3em;border:none;outline:none;cursor:pointer}.delete{background-color:#fb3b3b}.edit{background-color:#755bb4;margin-left:auto;margin-right:3em}.completed{text-decoration:line-through}