*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: 'Poppins', sans-serif;
    background: url(to-do-list.jpg) no-repeat center center/ cover;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

#add-task-container{
    width: 350px;
    padding: 20px 10px;
    background-color: white;
    border-radius: 20px;
    box-shadow: 0 0 10px rgb(23, 22, 22);

    display: flex;
    margin-top: 1em;
    margin-bottom: 0.75em;
}

#input-task{
    flex: 5;
    margin-right: 10px;
    padding: 10px;
    font-size: 1.2rem;
    border-radius: 20px;
}

#add-task{
    transition: .3s;
    flex: 1;

    font-size: 1.2rem;
    padding: 10px;
    
    background-color: white;
    color: green;
    border: 2px solid green;
    border-radius: 20px;

}

#add-task:hover{
    background-color: green;
    color: white;
    /* cursor: pointer; */
    
}

/*Note: Things to be added further, if there are more task then the input field is moved upward resulting in invisibleness of <div id="add-task-container"> */

/* Adding Styling to the elements added in To-do List */
.task{
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 0 5px rgb(195, 242, 95);
    padding: 0.5em;
    margin-bottom: 0.5em;
    display: flex;
}

.task li{
    list-style: none;
    font-size: 1.3rem;
    
    display: flex;
}

.list{
    flex : 6;
    
}

.task button{
    flex:1;
    border-radius: 10px;
    background-color: white;
    font-size: 1.3rem;
}

.task .checkTask{
    margin-right: 5px;
    border: 2px solid orange;
    color: orange;
   
}
.task .deleteTask{
    border: 2px solid red;
    color: red;
    
}

.task .checkTask:hover{
    background-color: orange;
    color: white;
    cursor: pointer;   
}
.task .deleteTask:hover{
    background-color: red;
    color: white;
    cursor: pointer;   
}