p{
    text-align: justify;
    color: black;
    font-family: 'Times New Roman', Times, serif;
    font-size: 28px;
    margin-left: 25%;
    margin-right: 25%;
    align-items: center;
}

body{
    /*background-color: #F9F9EB;*/
}

h1{
    color:black;
    font-family: 'Times New Roman', Times, serif;
    font-weight:normal;
    /* background-color: ; */
    background-size: contain;
    font-size: 47px;
    align-items: baseline;
    text-align: center;
}

/* SYDNEY - since I put your p5.js sketch inside <main>, I added the same rule you applied to images to your main here */
img{
    position: fixed;
    top: 4%;
    left: 8%; 
    z-index: -1; 
}

main{
    position: fixed;
    top: 4%;
    left: 12%;
    z-index: -1;
}

#p5{
     position: fixed;
     top: 4%;
     left: 20%;
}

.text{
    position: fixed;

}

.text2{
    position: fixed;
    top: 8.2%;
    
}

.text3{
    position: fixed;
    top: 12.2%;
    
}

.square{
    left: 12%;
}

.square2{
    left: 12%;
    top: 8.2%;
}

a{
    font-family: 'Times New Roman', Times, serif;
    font-size: 80px;
    text-align: right;
    color:black;
    text-decoration: none;
    position: fixed;
    right: 4%;
    bottom: 47%;
}

canvas{
    display: block;
    margin: auto;
}

a:hover{
    transform: scale(0.9);
}

#girl{
    position: fixed;
    top: 47%;
    left: -12%;
    z-index: 1;
}