Knockout Text mix-blend-mode not working for <nav> element over <body> with background img

I'm trying to create a navigation bar with knockout text. I've tested this code with just using a <div> with a <p> inside, and got it to work properly. However, when I try to style my <nav> element using the same technique, the text remains black instead of becoming transparent.

HTML:

<body>
    <nav class="flex-row">
        <a class="flex-center" href="index.html" class="logo"><img src="images/logo-no-bkg.png" style="height:15vh;"></a>
        <a class="flex-center" href="about.html">about</a>
        <a class="flex-center" href="team.html">team</a>
        <a class="flex-center" href="services.html">services</a>
        <a class="flex-center" href="contact.html">contact</a>
    </nav>
    <div class="background">
        <div class="text flex-center">TEST</p>
    </div>
</body>

CSS:

body {
  width: 100vw;
  height: 100vh;
  background-image: url("../images/nyc.jpeg");
  background-position: top;
  background-size: cover;
}

nav {
  justify-content: space-around;
  color: black;
  background: rgba(255,255,255,0.5);
  mix-blend-mode: screen;
}

nav a {
  height: 20vh;
  width: 20vw;
  font-family: 'Bebas Neue', cursive;
  font-size: 50px;
  align-self: stretch;
  position: relative;
  text-align: center;
}

.background {
  width: 100vw;
  height: 100vh;
  background-image: url('../images/nyc.jpeg');
}

.text {
  height: 100%;
  margin: 10px solid;
  font-family: 'Bebas Neue', cursive;
  font-size: 400px;
  color: black;
  background: rgba(255,255,255,0.5);
  mix-blend-mode: screen;
}

Here's an image of both the <nav> bar and my test <div>, the <div> working correctly and the <nav> bar not working:

Solution

For whatever reason, it does not like that you are using your <body> element to try to do this. Wrapping everything inside the <body> in a separate <div class="background-2"> division, and applying the exact same styles to it as the body seems to solve the issue:

.background-2 {
  width: 100vw;
  height: 100vh;
  /* background-image: url("../images/nyc.jpeg"); */
  background-image: url("https://via.placeholder.com/200/f00");
  background-position: top;
  background-size: cover;
}

nav {
  justify-content: space-around;
  color: black;
  background: rgba(255,255,255,0.5);
  mix-blend-mode: screen;
}

nav a {
  height: 20vh;
  width: 20vw;
  font-family: 'Bebas Neue', cursive;
  font-size: 50px;
  align-self: stretch;
  position: relative;
  text-align: center;
  color:black;
}

.background {
  width: 100vw;
  height: 100vh;
  /* background-image: url("../images/nyc.jpeg"); */
  background-image: url("https://via.placeholder.com/200/0f0");
}

.text {
  height: 100%;
  margin: 10px solid;
  font-family: 'Bebas Neue', cursive;
  font-size: 400px;
  color: black;
  background: rgba(255,255,255,0.5);
  mix-blend-mode: screen;
}

<body>
  <div class="background-2">
    <nav class="flex-row">
        <!-- <a class="flex-center" href="index.html" class="logo"><img src="images/logo-no-bkg.png" style="height:15vh;"></a> -->
        <a class="flex-center" href="index.html" class="logo">
          <img src="https://via.placeholder.com/200/000" style="height:15vh;">
        </a>
        <a class="flex-center" href="about.html">about</a>
        <a class="flex-center" href="team.html">team</a>
        <a class="flex-center" href="services.html">services</a>
        <a class="flex-center" href="contact.html">contact</a>
    </nav>
    <div class="background">
        <div class="text flex-center">TEST</p>
    </div>
  </div>
</body>

Run and view code snippet in Full page mode to see it clearly.