style.css

html{
    background-color: #E4E9FD ;
    background-image: -webkit-linear-gradient(65deg, #a683e3 50%,#E4E9FD 50%);
    min-height: 1000px;
}
.heading{
    text-align: center;
    padding: 2%;
}
.item{
    /* text-align: center; */
    background-color: rgb(246, 242, 247);
    width: 40vw;
    padding: 4px;
    margin: 0 auto;
    
}
input[type="checkbox"]{
    display: inline;
    margin: 0 2% 0 0%;
    /* margin: 60px 0 0 -150px; */
}
input[type="checkbox"]:checked+p{
    text-decoration: line-through;
}
p{
    margin-left: 20px;
    font-size: 1.2rem;
    padding: 0px;
    display: inline;
}
input[type="text"]{
    margin: 0 2% 0 30%;
    height: 30px;
    
}
.list{
    margin: 0 2% 0 30%;
    text-decoration: none;
    list-style: none;  
     
}
button{
    border: 2px solid blue;
    border-radius: 100px;
    height: 40px;
    width: 40px;
    background-color: blue;
    color: white;
    font-size: 2rem;
    margin-top: 2px;
}
@media screen and (max-width:500px){
    .item{
        width: 100%;
    }
    h1{
        line-height: 20px;
    }
    .list{
        margin: 0 2% 0 10%;

    }
    input[type="text"]{
        margin: 4% 2% 0 10%; 
        width: 50%;   
    }
    
}