Profile card component with simple funky background

Hi!

Thank you for reviewing this, was relatively simple to build, but found a couple of problems, particularly with the background circles, I explained more in the repository's README, but I'll add it here as well:

In order to do the circles on the background I did the following:

HTML

    <figure class="backImg">                
      <div id="topCircleContainer">
        <img src="images/bg-pattern-top.svg" alt="" id="topCircle">
      </div>
      <div id="bottomCircleContainer">
        <img src="images/bg-pattern-bottom.svg" alt="" id="bottomCircle">
      </div>
    </figure>

CSS

.backImg{
    overflow: hidden;
    position: absolute;
    width: 100vw;
    height: 110vh;
    z-index: -1;
    margin-top: -30vh; /*I had to add this because for some reason it kept pushing my figure down */
}
#topCircleContainer{
    position: absolute;
}
#bottomCircleContainer{
    position: absolute;
}
#topCircle{
    margin-top: -50vh;
    margin-left: -10vw;
}
#bottomCircle{
    margin-top: 50vh;
    margin-left: 50vw;
}

My problem I have some doubts, I found myself in the situation that for some reason my <figure> did not covered the entire background I had to give it a height: 110vh; but this was not enough as my content kept (for some reason unknown to me) being pushed down. So I had to add margin-top: -30vh;. Not sure what I may have been missing here.

Additionally I found that the font sizes specified in the design are sending this on the lighthouse report: "Document doesn't use legible font sizes" , if this were a real project, would it have been a good idea to go back to the designer and tell them about this?

Thank you all for your time!