Simple conflict with mix-blend-mode

I need the background color around the text to be exact same color as the body color(#fafaee), it has a video at the back so every time I mix it without having either a white or black background it doesn't fit well with the body background color.

Here you can see the diff between #fafaee and a regular white with some differences cause of the mix

    <div>
        <div>
            <div class="contenedor">
                <video autoplay loop muted><source src="4K_24.mp4"
                type="video/mp4"></video>
                <h1>mi</h1>
            </div>

            <span class="one h6"></span>
            <span class="two h3"></span>
        </div>
    </div> 

// CSS

body{
  padding:0;
  margin:0;
  width:100%;height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#fafaee;
  font-family: 'Open Sans', sans-serif;
  background-color: #fafaee; 
}

.container{
  display:flex;
  justify-content:center;
  align-items:center;
}

div{
  position:absolute;
  width:184px;height:106px;
}



video{ 
  width: 100%;
  height: 104px;
  object-fit: fill;
  position: absolute;
  top: 0;
  left: 0;
  display: hidden;
  background: #fafaee;
  background-attachment: transparent;
  opacity: 100%;
}

h1{
  font-size: 80px;
  top: 0;
  left: 0;
  mix-blend-mode:  screen;
  text-transform: uppercase;
  z-index: 888888;
  font-family: 'Nunito', sans-serif;
  text-align: center;
  justify-content:center; 
  align-items:center; 
  background: #fafaee;
  z-index: 9999;
  background-color: #fafaee;
}