body{
    margin: 0px;
    padding: 0px;
    height: 100vh;
    background-color: rgb(166, 212, 209);
}
.container{
    border: none;
    border-radius: 20px;
    background-color: rgb(0, 129, 188);
    height: auto;
    width: auto;
    box-shadow: 4px 5px 6px rgb(217, 164, 142);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.header{
    text-align: center;
    padding: 10px;
    border-bottom: 2px solid #eee;
    font-size: 30px;
}
.task{
    display: flex;
    justify-content: space-around;
    padding: 5px;
  
}
.task input{
    padding: 5px;
    border-radius: 10px;
    border: none;
    outline: none;
    font-size: 20px;
    margin:5px;
}
.task button,button{
    padding: 5px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    background-color: rgb(165, 18, 168);
    color: white;
    font-size: 20px;
    margin:5px;
}
ul{ 
    list-style: none;
    padding: 5px;
}
li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid white;
    border-radius: 5px;
    margin-bottom: 10px;
    padding: 5px;
    font-size: 20px;

}
@media (max-width:900px){
.header{
    font-size: 20px;
}

.task input{
    font-size: 15px;
    margin:5px;
}
.task button,button{
    font-size: 20px;
    margin:5px;
}
li{
    padding: 5px;
    font-size: 15px;

}
}