Flexbox Centered Heading

This text is perfectly centered with Flexbox.

this is the content of my code-block element

<video autoplay loop muted playsinline class="responsive-video">
    <source src="https://webers-testseite.de/wp-content/uploads/Traffic-6456.mp4" type="video/mp4">
    Dein Browser unterstützt das Video-Tag nicht.
</video>

<!-- Text Overlay -->
<div class="overlay">
        <h2>Flexbox Centered Heading</h2>
        <p>This text is perfectly centered with Flexbox.</p>
</div>
#top .html5-video .responsive-video {
  width: 100%;
  height: auto;
  display: block;
}

.responsive #top #wrap_all .html5-video .container {
  max-width: 100% !important;
  width: 100%;
  padding: 0;
}

#top .html5-video .content {
  padding: 0;
}

#top .html5-video .overlay {
  position: absolute;
  width: auto;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display:  flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
  background-color: rgba(255,255,255,0.5);
  backdrop-filter: blur(5px);
  white-space: nowrap;
}

@media only screen and (max-width: 767px) {
  #top .html5-video .overlay {
    top: 65%;
  }
}

#top .html5-video .overlay > * {
  flex: 1 1 100%;
  line-height: 1.5rem
}


#top .html5-video h2 {
  font-size: min(max(1rem, calc(1rem + (3 - 1) * ((100vw - 20rem) / (93.75 - 20)))), 3rem);
  min-height: 0vw;
  margin-bottom: 0;
}

#top .html5-video p {
  font-size: min(max(0.75rem, calc(0.75rem + (1.5 - 0.75) * ((100vw - 20rem) / (93.75 - 20)))), 1.5rem);
  font-weight: 700;
  min-height: 0vw;
  margin: 0;
}