*{margin:0;padding:0;box-sizing:border-box}.main{width:100%;height:100vh;background-color:#232323;align-items:center;display:flex;justify-content:center}.card{width:50%;height:60vh;background-color:#fff;box-shadow:0 0 15px #fffb01;border-radius:10px;text-align:center;align-items:center}.heading{font-size:3rem;font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif;color:#000;margin-top:20px}.inp{width:80%;height:40px;border-radius:5px;border:1px solid rgb(0,0,0);margin-top:20px;padding-left:10px;font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif;font-size:1.2rem}.add{width:80%;height:40px;border-radius:5px;border:none;background-color:#000;color:#fff;font-size:1.2rem;margin-top:20px}.ul{list-style:none;padding:0;margin-top:20px;text-align:left;width:80%;margin-left:10%;overflow-y:auto;height:50%}.li{width:100%;height:50px;background-color:#2ae01c;margin-bottom:10px;border-radius:5px;display:flex;font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif;align-items:center;justify-content:space-between;padding:0 10px}.delete{width:50px;height:30px;border-radius:5px;border:none;background-color:red;color:#fff;font-size:15px;cursor:pointer}.edit{width:50px;height:30px;border-radius:5px;border:none;background-color:#000;color:#fff;font-size:15px;cursor:pointer;margin-right:10px}
