style.css

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');

*{
    margin :12px;
    padding:0;
    
    font-family: 'Outfit', sans-serif;
}

body{
    background: rgba(11, 163, 233, 0.97);
    display:inline;
    justify-content:center;
    align-items:center;
    
}
.title{
    font-size:50px;
    font-weight :600px;
    color:rgba(2, 83, 149, 0.979);
    letter-spacing: 1px;
    margin:25px,0;
    width:auto;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom: 20px;

    

}
.todo-list{
    
    padding:20px;
    box-shadow:0 10px 40px rgb(0,0,0,0.1);
    border-radius:5px;
    background-color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom: 20px;
}
.list-head{
    display:grid;
    grid-template-columns:4fr 2fr 2fr; 
    gap : 10px;
}

.add{
    border:none;
    border-radius:5px;
    background-color:rgba(2, 83, 149, 0.979);;
    outline:none;
    font-size:16px;
    color:#fff;
    cursor:pointer;
}
.entered-date{
    padding: 10px;
    border-radius:5px;
    border:1px solid #ccc;
    font-size : 16px;
    outline:none;
    color:#fff;
    background-color:rgba(2, 83, 149, 0.979);
    cursor:pointer;
}
.entered-list{
    padding: 10px;
    border-radius:5px;
    border:1px solid #ccc;
    font-size :16px;
    outline:none;

}
.task-box{
    padding:20px;
    box-shadow:0 100px 400px rgb(0,0,0,0.1);
    border-radius:5px;
    background-color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
}