*{margin:0;padding:0;box-sizing:border-box}html,body{margin:0 auto;padding:20px;width:100%;height:100vh;color:#ddd;background-color:#111;font-family:arial,sans-serif;font-weight:400}::-webkit-scrollbar{display:none}section.items{margin:0 auto;padding:0;width:100%;background:none;max-width:1200px}.items-inner{width:100%;display:flex;justify-content:center;align-items:center}.items-inner .container{width:100%}.items-inner .wrapper{width:fit-content;display:flex;align-items:center;gap:15px}.items-inner h2{font-size:100%;padding:5px 0}.items-inner h2:first-letter{text-transform:capitalize}.items-inner .category{color:#aaa;font-size:80%;padding:8px 0}.items-inner .edit{display:flex;align-items:center;justify-content:center;gap:10px}.items-inner i{font-size:80%;padding:15px;background-color:#333;border-radius:50%;cursor:pointer;transition:all .2s ease}.items-inner i:active{filter:drop-shadow(0 0 5px #444)}.items-inner i.fa-trash-can{font-weight:400;color:red;background-color:#ff666613}.items-inner .hide{display:none}.items-inner i.fa-rotate-left{color:#a83838;background-color:#ff666613}.items-inner i.fa-rotate-left:active{filter:drop-shadow(0 0 5px hsl(0,100%,70%))}.reDo{display:flex}.disabled{display:none}button.editBtn{margin:0 15px;border:none;outline:none;background:none;color:#ccc;font-size:60%;font-weight:300;letter-spacing:2px;cursor:pointer}button.editBtn:hover{text-decoration:underline}.items-inner button.notCompleted{margin-left:20px;padding:10px 12px;border:none;outline:0;border-radius:5px;font-size:80%;background-color:#ff3838;color:#fff;cursor:pointer;transition:.2s ease}.items-inner button.notCompleted:hover{transform:scale(1.01)}.items-inner button.completed{margin-left:20px;padding:10px 12px;border:none;outline:0;border-radius:5px;font-size:80%;background-color:#66ff6640;color:#ccc;pointer-events:none;transition:.2s ease}div.mask{display:flex;background-color:#222222f0;position:fixed;top:0;left:0;bottom:0;right:0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:5;transition:.4s all ease}.notVisible{display:none}form.addTaskForm{margin:0;padding:40px 20px;width:500px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;justify-content:center;background-color:#333;border-radius:10px;z-index:10;transition:.4s top ease-in-out}.hidden{position:fixed;top:-100%}form.addTaskForm input{margin-bottom:12px;padding:15px;font-size:80%;color:#ddd;outline:none;border:none;background-color:#222;border-radius:5px}.btnContainer{display:flex;gap:5px;margin-left:auto}form.addTaskForm button{margin-top:15px;margin-left:auto;padding:10px;width:75px;outline:none;border:none;border-radius:5px;cursor:pointer;color:#ddd;background-color:#07f}@media only screen and (max-width: 426px){html,body{padding:10px}.items-inner{display:block}.items-inner .wrapper{width:100%;margin:15px 0 0;justify-content:space-between}.items-inner div.edit{padding:15px 8px;background-color:#313131;border-radius:8px}.items-inner i{padding:0 10px}.items-inner i.fa-trash-can{background:none;font-size:100%}.items-inner button.notCompleted,.items-inner button.completed{padding-top:12px;padding-bottom:12px}form.addTaskForm{width:calc(100% - 20px)}}h1{margin:30px auto;text-align:left;font-size:150%;font-weight:800;text-transform:capitalize;max-width:1200px}main{margin:0 auto;padding-bottom:125px;display:grid;grid-template-columns:calc(50% - 5px) calc(50% - 5px);column-gap:10px;max-width:1200px;overflow-y:scroll}main p.error{grid-column:1 / -1;padding:50px;font-size:80%;text-align:center}section.items{margin:8px auto;padding:30px 25px;width:100%;background-color:#222;border-radius:10px;max-width:1200px}button.addItem,button.translate{width:55px;height:55px;-webkit-tap-highlight-color:transparent;border:none;outline:none;border-radius:50%;position:fixed;left:50%;right:-5px;bottom:30px;transform:translate(-50%);cursor:pointer;transition:.2s ease;z-index:10}button.addItem{font-size:200%;color:#fff;background-color:#26d935}button.translate{font-size:175%;color:red;background-color:#fff;transform:translate(-50%) rotate(45deg)}button.addItem:active{filter:drop-shadow(0 0 5px hsl(125,70%,50%))}.animate{animation:slide .4s forwards}@keyframes slide{0%{transform:translate(0);width:100%}to{width:calc(100% - 5px);transform:translate(5px);border-left:4px hsla(120,100%,70%,.25) solid}}section.form{width:100%;height:100%}@media only screen and (max-width: 1025px){main{grid-template-columns:100%;column-gap:0}}