body{
    background-image:url("blackbackground.jpg");
    display: ;
}

#addBtn{
    transition-property: color, background-color;
    transition-duration: 0.5s;
}

#newnote{
    transition-property: color, background-color;
    transition-duration: 0.5s;
    visibility: hidden;
}

#newnote:hover{
    color:white;
    background-color: rgb(19, 113, 190);
}

#addBtn:hover{
    color:black;
    background-color: rgb(95, 250, 90);
    
}

h1{
    color: rgb(86, 157, 250);
}

h2{
    color: rgb(86, 157, 250);


}

#yournote{
    display: inline-block;
}

#newnote{
    display: inline-block;
    color: black;
    background-color: greenyellow;

}

#dateinback{
    position: absolute;
    margin-top:20px;
    margin-left: 60px;
    text-shadow: 2px 2px rgb(0, 0, 0);
    color: rgb(248, 248, 248);

}

#projdetail{
    display: inline-block;
    width: 70%;
}

@media screen and (max-width: 800px){
    #dateinback{
        margin-left: 20px;
        font-size: medium ;
        }

    #addBtn{
        display:block;
    }

    #coloron{
        display: none;
    }

    #coloroff{
        display: none;
    }

}