body{
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQ4AAACUCAMAAABV5TcGAAAAA1BMVEXDseEeQFjUAAAAPklEQVR4nO3BMQEAAADCoPVPbQwfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgIcBnKwAAXyxvCsAAAAASUVORK5CYII="); 
}
.header{
    background-color: white;
    text-align:center;
    font-family: "Comic Sans MS";
    border-radius: 25px;
    padding: 10px;
    width: 400px;
    height:100px;
    margin-left:20px ;
    margin-top: 45px;
    color:purple;
}

.notepage{
    background-color: white;
    font-family: "Comic Sans MS";
    border-radius: 25px;
    padding:20px;
    margin-top:50px ;
    margin-left:50px;
    margin-right:50px;
    color: purple;
}

.button{
    background-color: white;
    font-family: "Comic Sans MS";
    border-radius: 25px;
    padding: 10px;
    color:purple;
    border-color: purple;
    transition-duration: 0.4s;
    cursor: pointer;
}

button:hover{
    background-color: purple;
    color: white;
}


.input-field{
    padding: 10px;
    width: 60%;
    border: 2px solid purple;
    border-radius: 25px;
    font-family: "Comic Sans MS";
    margin-right: 10px;
}

#taskList{
    list-style-type: none;
    padding-left: 0px;
    margin-top: 20px;
}

#taskList li{
    background-color: #f0e6f7;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 20px;
    text-align: left;
    font-family: "Comic Sans MS";
    color: purple;
}

#taskList li button{
    white-space: nowrap;
}

::-webkit-scrollbar{
    width: 10px;
}
::-webkit-scrollbar-track{
    background:purple;
}
::-webkit-scrollbar-thumb{
    background: white;
}
::-webkit-scrollbar-thumb:hover{
    background: #f0e6f7;
}