body{
    height:100vh;
    background:url('pexels-pixabay-259915.jpg') no-repeat center center/cover;
    display:flex;
    justify-content: center;
    align-items:center;
}
.add-task-container{
    width:350px;
    padding:20px 10px;
    background:whitesmoke;
    border-radius:20px;
    box-shadow:0 0 3px;
    display: flex;
}
input{
    flex:5;
    margin-right:10px;
    border-radius :10px;
    font-size:1.2rem;
    padding:5px;
}
#add-task{
    font-size:1.2rem;
    transition: all .3s;
    padding:5px;
    background-color:white;
    color:green;
    border:2px solid green;
    border-radius :10px;
}
#add-task:hover{
    background-color: green;
    color:whitesmoke;
}
.task{
    width:100%;
    background-color: whitesmoke;
    border-radius:10px;
    box-shadow:0 0 3px;
    padding:5px;
    margin-bottom:5px;
    display:flex;
    justify-content:space-between;
}
.task li{
    list-style:none;
    flex:4;
    padding:5px;
    font-size:1.2rem;
    margin:10px;
}
.task button{
    flex:3;
    border-radius:10px;
    background-color:whitesmoke;
    cursor:pointer;
}
.task .checkTask{
    color:orange;
    margin-right:5px;
    border:2px solid orange;
    font-size:1.5rem;
}
.task .checkTask:hover{
    background-color:orange;
    color:whitesmoke;
}
.task .deleteTask{
    color:red; 
    border:2px solid orange;
    font-size:1.3rem;
}
.task .deleteTask:hover{
    background-color:red;
    color:whitesmoke;
}