Centering a modal box on your screen inside of a div that goes below visibility

Question

On my site, I have a tutorial that appears in a modal. The wrapper is a translucent gray that covers the entire site (including the parts that you must scroll down to see).

I am trying to center the modal vertically, but since the div covers below the fold (it goes where you must scroll down), the modal appears half cut off on the bottom of the page because it is placed in the center of the modal wrapper div. I'd appreciate it if someone could look at my code below and tell me how can I change the CSS so that the modal box will always appear in the center of the screen (vertically), even if the parent div moves below visibility.

Here's my code:

.modal-wrapper {
    display: none; 
    position: fixed; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: none; 
    background-color: #000000;
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    position: absolute;
    background-color: #fefefe;
    border: 1px solid #888;
    border-radius: 12px;
    margin: 15% auto; 
    padding: 20px;
    width: 80%; 
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

You may be wondering what happens when the screen's width is smaller. As the browser size shrinks, the div slowly moves further up the page, but it is never fully revealed. I would like this modal to be centered similarly to the Wordle Help Modal. If you play around with it, you'll see that it always stays in the same spot no matter how small or large the browser's width is. Thanks in advance for any answers!