body{margin:0;background-color:#1f1e1e;color:#fff;overflow:hidden}h1{text-align:center}.todo-wrapper{background:#353434;padding:20px;width:fit-content;margin-left:auto;margin-right:auto;margin-top:30px;max-width:700px;border-radius:10px;max-height:80vh;overflow-y:auto;box-shadow:0 5px 7px #1b1b1b}.todo-input{display:flex;justify-content:center;align-items:center;border-bottom:1px solid rgb(78,78,78);padding-bottom:25px;margin-bottom:25px}.todo-input-item{display:flex;flex-direction:column;align-items:flex-start;margin-right:25px}.todo-input-item label{margin-bottom:10px;font-weight:700}.todo-input-item input{padding:10px;border-radius:5px;border:none;background-color:#1f1e1e;color:#fff;width:250px}.todo-input-item input:focus{outline:none;border:1px solid #727272}.primary-button{background-color:#727272;color:#fff;margin-top:25px;padding:10px 20px;border:none;border-radius:5px;width:80px;cursor:pointer}.primary-button:hover{background-color:#5a5a5a}.secondary-button{background-color:#474747;color:#fff;margin-top:25px;padding:10px 20px;border:none;border-radius:5px;width:fit-content;cursor:pointer}.active{background-color:#727272}.todo-list{display:flex;flex-direction:column}.btn-area{margin-bottom:15px}.todo-list-item{display:flex;justify-content:space-between;align-items:center;background-color:#414040;padding:10px 20px;margin-bottom:10px;border-radius:5px;box-shadow:0 3px 5px #2b2a2a}.todo-list-item h3{margin:0;font-size:25px;color:#fff;font-weight:700}.todo-list-item p{margin:0 10px 0 0;font-size:15px;color:#a1a1a1}.delete-icon{font-size:25px;cursor:pointer;margin-left:10px}.delete-icon:hover{color:#ff3d3d}.check-icon{font-size:25px;cursor:pointer;margin-left:10px;color:#04c46a}.check-icon:hover{color:#00ff7a}.edit-icon{font-size:25px;cursor:pointer;margin-left:10px;color:#fff}.edit-icon:hover{color:#6c8eff}.edit-todo{display:flex;flex-direction:column;padding-bottom:15px;margin-bottom:10px}.edit-todo input,.edit-todo textarea{padding:10px;border-radius:5px;border:none;background-color:#1f1e1e;color:#fff;margin:5px}.edit-todo .primary-button{margin:5px;padding:10px;width:fit-content}.completed-date{font-size:20px;color:#fff!important;margin-top:10px!important}@media (max-width: 991px){h1{font-size:32px}.todo-wrapper{width:80%;margin-top:20px;padding:15px}.todo-input{flex-direction:column;padding-bottom:20px;margin-bottom:20px}.todo-input-item{margin-right:0;margin-bottom:15px;width:100%;align-items:center}.todo-input-item:last-child{margin-bottom:0}.todo-input-item label{align-self:flex-start;width:100%;margin:15px 0 10px 15px}.todo-input-item input{width:90%}.primary-button{width:100%;padding:12px 20px}.secondary-button{width:50%;padding:12px 20px;margin-top:0}.btn-area{flex-wrap:wrap;justify-content:center;margin-bottom:20px}.todo-list-item{padding:15px;flex-direction:row;align-items:center;gap:15px}.todo-list-item .icons-container{display:flex;gap:10px;margin-top:10px}.todo-list-item h3{font-size:22px}.todo-list-item p{font-size:14px;margin:0}.delete-icon,.check-icon,.edit-icon{font-size:20px}}@media (max-width: 480px){h1{font-size:24px}.todo-list-item h3{font-size:20px}.todo-list-item p{font-size:12px}.todo-input-item input{width:90%}}