style.css

* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}

.container {
    width: 100%;
    min-height: 100vh;
    background: linear-gradient(135deg, #153677, #4e085f);
    padding: 10px;
}

.todo-app {
    width: 100%;
    max-width: 540px;
    background: #fff;
    margin: 100px auto 20px;
    padding: 40px 30px 70px;
    border-radius: 10px;
}

.todo-app h2 {
    color: #002765;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.todo-app h2 img {
    width: 30px;
    margin-left: 10px
}

.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #edeef0;
    border-radius: 30px;
    padding-left: 20px;
    margin-bottom: 25px;
}

input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 10px;
    font-weight: 14px;
}

button {
    border: none;
    outline: none;
    background: #ff5945;
    padding: 16px 50px;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    border-radius: 40px;
}

ul li {
    list-style: none;
    font-size: 17px;
    padding: 12px 8px 12px 50px;
    user-select: none;
    cursor: pointer;
    position: relative;
}

ul li::before {
    content: '';
    position: absolute;
    height: 28px;
    width: 28px;
    border-radius: 50%;
    background-image: url(https://png.pngtree.com/png-clipart/20230927/original/pngtree-swirling-circular-icon-with-round-line-frame-and-circle-logo-pattern-png-image_12892343.png);
    background-size: cover;
    background-position: center;
    top: 12px;
    left: 8px;
}

ul li.checked {
    color: #555;
    text-decoration: line-through;
}

ul li.checked::before {
    background-image: url(data:image/jpeg;base64,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);
}

ul li span{
    position:absolute;
    right:0;
    top: 5 px;
    width: 40px;
    height: 40px;
    font-size: 22px;
    color:#555;
    line-height: 40px;
    text-align:center;
    border-radius: 50%;

}

ul li span:hover{
    background: #edeef0;
}

@media(max-width:500px){
    html{
        font-size: 12pt;
    }
    button{
        position: unset;
        width: 100%;
        margin-top: 10px;
        padding: 15px;
        height:auto;
    }
    h2{
        margin-top: 30px;
        font-size: 15vw;
    }
}