@media screen and (max-width: 768px) {
    .To-Do-main{
        max-width: 400px;
    }
    .To-Do-main h2{
        font-size: 25px;
    }
    .To-Do-main h2 img{
        max-width: 25px;
    }
    .add-task{
        max-width: 400px;
        margin-top: 30px;
       
    }
    #task-input{
        padding: 5px;
       
    }
    #add-task-btn{
        padding: 5px 10px;
    }
    #added-task{
        max-width: 320px;
        margin-left: 10px;
    }
    ul li{
        padding-left: 40px;
        max-width: 320px;
    }
    ul li::before{
        left: 10px;
    }
}


@media screen and (max-width: 425px) {
    .To-Do-main{
        max-width: 250px;
    }
    .To-Do-main h2{
        font-size: 15px;
    }
    .To-Do-main h2 img{
        max-width: 15px;
    }
    .add-task{
        margin-top: 30px;
        max-width: 180px;
        padding-left: 15px;
    }
    #task-input{
        padding: 2px 2px 2px 0;
        max-width: 140px;
        /* font-weight: 400; */
        font-size: 12px;
    }
    #add-task-btn{
        padding: 2px 5px;
        margin-right: 30px;
    }
    ul li{
        padding-left: 20px;
        max-width: 180px;
        font-size: 12px;
    }
    ul li::before{
        top: 14px;
        left: 2px;
        width: 15px;
        height: 15px;
    }
    ul li span{
        width: 15px;
        height: 15px;
        top: 15px;
        font-size: 11px;
        
    }
}