body{
    background-color: #f5f7fb;
    font-family: Arial, sans-serif;
    font-weight: 600;
}
h1{
    color: #1d4ed8;
    text-align: center;
    margin-bottom: 30px;
    font-weight: 700;
}
#hero{
    background-color: #fff;
    border-radius: 20px;
    padding: 20px;
    margin-top: 20px;
}
button{
    background-color: #222;
    color: #fff;
    padding: 15px 20px;
    margin-left: 20px;
    border-radius: 20px;
    cursor: pointer;
    border: none;
    margin-bottom: 20px;
}
button:hover{
    background-color: #1d4ed8;
    transition: 0.3;
}
input{
    width: 70%;
    padding: 7px;
    border: 1px solid #e9eaeb;
    border-radius: 20px;
}
input:focus{
  border-color: #1d4ed8;
  background-color: #f5f7fb;
  outline: none;
}
p{
    margin-left: 20px;
}
#pragraph{
    color: #1d4ed8;
}
#taskList{
    background-color: #f5f7fb;
    border-radius: 29px;
     margin-bottom: 20px;
}