*{margin:0;padding:0;box-sizing:border-box}html{height:100%}body{background:url(/zitask/assets/layered-peaks-bg-12baee7a.svg);color:#fff;height:100%}.wrapper{display:flex;justify-content:flex-start;flex-direction:column;align-items:center;gap:1.5rem;height:100%}.clock{display:flex;justify-content:center;align-items:center;background-color:#1a1d22;font-size:1.5rem;font-family:Lato;font-weight:300;width:100%;height:50px}.todo-list{background-color:#1a1d22;height:fit-content;width:85%;max-width:700px;max-height:550px;overflow-y:scroll;overflow:auto;scrollbar-color:#c8ff03 #2a2e34;scrollbar-width:thin;border-radius:1rem;padding-block:1rem;display:flex;flex-direction:column;font-family:Lato;font-weight:400;font-size:1.3rem;align-items:center;gap:1rem;box-shadow:#c4ff5633 0 40px 60px -7px}.todo-item{background-color:#2a2e34;border-radius:1rem;width:85%;height:fit-content;display:flex;justify-content:center;align-items:center;gap:1rem;font-family:Raleway;font-size:1rem;transition:.2s linear;padding:1rem}.todo-text{font-family:Raleway;font-size:1rem;width:75%;word-wrap:break-word;resize:none;overflow:hidden;background-color:transparent;color:#fff;border-style:none;border-radius:.3rem}.todo-text-completed{font-family:Raleway;font-size:1rem;width:75%;word-wrap:break-word;resize:none;overflow:hidden;background-color:transparent;text-decoration:line-through;text-decoration-color:#fff;color:#000;border-style:none;border-radius:.3rem}.todo-item label{width:75%;word-wrap:break-word}.todo-item button{width:30px;height:30px;background-color:transparent;border-style:solid;border-color:#f5a302;border-radius:1rem;cursor:pointer;transition:.2s linear}.todo-item button:hover{border-radius:.7rem;transition:.1s linear;background-color:#c8ff03}.todo-item-completed{background-color:#f6e71d;border-radius:1rem;width:85%;height:fit-content;display:flex;justify-content:center;align-items:center;gap:1rem;font-family:Raleway;font-size:1rem;transition:.1s linear;padding:1rem}.todo-item-completed button{width:30px;height:30px;background-color:#f5a302;border-style:none;border-radius:1rem;cursor:pointer;transition:.1s linear}.todo-item-completed button:hover{border-radius:.7rem;transition:.1s linear;background-color:#a70000;color:#fff}.bin-button{width:30px;height:30px;background-color:#810000;color:#000;border-style:none;border-radius:1rem;padding:5px;cursor:pointer;transition:.1s linear;display:flex;justify-content:center;align-items:center}.bin-button:hover{border-radius:.7rem;transition:.1s linear;background-color:#a70000;color:#fff}.edit-button{width:30px;height:30px;background-color:#bac499;color:#000;border-style:none;border-radius:1rem;padding:5px;cursor:pointer;transition:.1s linear;display:flex;justify-content:center;align-items:center}.edit-button:hover{border-radius:.7rem;transition:.1s linear;background-color:#a5ec21;color:#fff}.button-container{display:flex;gap:.5rem}.toggle-button-container{width:8%;display:flex;justify-content:center;align-items:center}.add-button{background-color:#f5a302;border-style:none;border-radius:1rem;width:80px;height:40px;font-family:Raleway;font-size:1rem;cursor:pointer;transition:linear .1s}.add-button:hover{background-color:#c8ff03}.add-todo-container{width:85%;max-width:400px;display:flex;gap:1rem;align-items:center;background-color:#2a2e34;padding:1rem;border-radius:1rem;margin-bottom:1rem}.add-todo-container input{background-color:#1a1d22;border-radius:.5rem;border-style:none;color:#fff;padding-inline:1rem;height:40px;width:75%;box-sizing:border-box}@media only screen and (max-width: 630px){.toggle-button-container{width:15%}.button-container{flex-direction:column}}