*{
                    margin: 0;
                    padding: 0;
                    box-sizing: border-box;
                    font-family:Arial, Helvetica, sans-serif;
}
.container{
                    width: 100%;
                    min-height: 100vh;
                    padding: 10px;
                    background: linear-gradient(135deg,#153677,#16729d);
}
.todo{
                    width: 100%;
                    max-width: 540px;
                    background-color: #fff;
                    padding: 40px 30px 70px;
                    border-radius: 10px;
                    margin: 100px auto 20px;
}
.todo h2{
                    display: flex;
                    color: #002765;
                    align-items:center;
                    margin-bottom: 20px;
}
.todo h2 img{
                    width: 35px;
                    margin-left: 15px;
}
.row{
                    display:flex;
                    align-items: center;
                    justify-content: space-between;
                    border-radius: 30px;
                    background-color: #edeef0;
                    padding-left: 20px;
                    margin-bottom: 25px;             
}
#inputbox{
                    border: none;
                    outline: none;
                    width: 100%;
                    background: transparent;
                    height: 40px;
                    color:black;
                    font-size: 17px;
                    padding: 10px;
}
.row button{
                    border: none;
                    outline: none;
                    padding: 16px 50px;
                    background:#3f48f0;
                    color: #fff;
                    border-radius: 40px;
                    font-size: 17px;
                    cursor: pointer;
                    
}
ul li{
                    list-style: none;
                    font-size: 19px;
                    padding: 12px 8px 12px 50px;
                    user-select: none;
                    cursor: pointer;
                    position: relative;
}
ul li::before{
                    content: '';
                    position: absolute;
                    height: 25px;
                    width: 25px;
                    background-image: url(Images/unchecked.png);
                    background-position: center;
                    background-size: cover;
                    top: 12px;
                    left: 8px;
}
ul li.checked{
                    text-decoration: line-through;
                    color: #555;
}
ul li.checked::before{
                    background-image: url(Images/checked.png);
}
ul li span:hover{
                    background: #edeef0;
}
ul li span{
                    font-size: 20px;
                    position: absolute;
                    top: 5px;
                    right: 0px;
                    text-align: center;
                    width: 40px;
                    height: 40px;
                    color: #555;
                    line-height: 40px;
}
@media only screen and (max-width: 490px){
                    .row button{
                                       font-size: 15px;
                    }    
                    #inputbox{
                                        font-size: 15px;
                                        
                    }
                    ul li{
                                        font-size: 15px;
                                  
                    }
}