style.css

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}img{max-width:100%}a{text-decoration:none}li{list-style:none}input{outline:0}body{background:gray}.wrapper{display:grid;justify-content:center;margin-top:40px}.wrapper__input-create{min-width:230px;background-color:wheat;border:1px solid;border-radius:2px}.wrapper__add{cursor:pointer;background-color:#02a102;border:0;padding:2px 4px;border-radius:3px;transition:.2s ease-in-out;color:#fff}.wrapper__add:hover{background-color:green}.main{background:#53a885;width:290px;min-height:200px;max-height:300px;overflow:auto;padding:5px;border-radius:3px}.task-panel{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #fff;padding-bottom:5px;margin-top:5px}.task-panel__number{color:#fff}.task-panel__input-container{display:flex;justify-content:center;align-items:center;gap:3px;border:1px solid;padding:2px;border-radius:4px}.task-panel__input{border:0;background:rgba(0,0,0,0);border-bottom:1px solid #fff;color:#000}.task-panel__checkbox{height:15px;width:15px;cursor:pointer;background:red}.dellete{cursor:pointer;background-color:#fa5757;border:0;padding:2px 4px;border-radius:3px;transition:.2s ease-in-out;color:#fff}.dellete:hover{background-color:red;color:#000}.create-task{display:flex;margin-top:10px;justify-content:space-between}