<header>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
  </nav>
</header>
<section class="hero">
  <h1>Welcome to our Film Production Studio</h1>
  <p>We create compelling videos that captivate your audience.</p>
  <div class="cta-buttons">
    <button type="button" popovertarget="popoverContainer">Watch video</button>
  </div>
</section>

<section class="content-section">
  <div class="container">
    <h2>About Us</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis lorem ac orci aliquet luctus. In hac habitasse platea dictumst. Aliquam pulvinar auctor nunc, a auctor ante mollis eu. Nam eu mi vitae tortor placerat euismod sit amet a libero. Fusce pulvinar nulla vel placerat tristique. Fusce eget enim a erat cursus fringilla. Sed ultri.</p>
  </div>
</section>

<section class="content-section">
  <div class="container">
    <h2>Our Services</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis lorem ac orci aliquet luctus. In hac habitasse platea dictumst. Aliquam pulvinar auctor nunc, a auctor ante mollis eu. Nam eu mi vitae tortor placerat euismod sit amet a libero. Fusce pulvinar nulla vel placerat tristique. Fusce eget enim a erat cursus fringilla. Sed ultricies mi vitae ligula hendrerit lacinia. Cras at ipsum sit amet turpis.</p>
  </div>
</section>

<footer>
  <p>&copy; 2023 Film Production Studio. All rights reserved.</p>
</footer>

<div id="popoverContainer" popover>
  <div align="center">
    <iframe title="vimeo-player" src="https://player.vimeo.com/video/783453158?h=bca8b328e2" width="640" height="360" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

/* Reset default styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Global styles */
body {
  font-family: Arial, sans-serif;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px;
}

/* Header styles */
header {
  background-color: rgba(10, 10, 10, .9);
  padding: 20px;
  position: sticky;
  top: 0px;
  backdrop-filter: blur(4px);
}

nav a {
  color: #fff;
  text-decoration: none;
  margin-right: 24px;
}

/* Hero section styles */
.hero {
  background-image: url("https://images.unsplash.com/photo-1496559249665-c7e2874707ea?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODU3MjgzMDR8&ixlib=rb-4.0.3&q=85");
  background-size: cover;
  background-position: center;
  height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}

.hero h1 {
  font-size: 40px;
  margin-bottom: 20px;
}

.hero p {
  font-size: 18px;
  margin-bottom: 40px;
}

.cta-buttons {
  display: flex;
  justify-content: center;
}

.cta-buttons button {
  display: inline-block;
  padding: 12px 20px;
  background-color: #ff8c00;
  color: #fff;
  text-decoration: none;
  margin: 0 10px;
  font-weight: bold;
  border-radius: 4px;
  transition: background-color 0.3s ease;
  border: 1px solid #ff8c00;
  font-size: 1rem;
}

.cta-buttons button:hover {
  background-color: #e66200;
}

/* Content section styles */
.content-section {
  padding: 40px 0;
  background-color: #f2f2f2;
}

.content-section h2 {
  font-size: 32px;
  margin-bottom: 20px;
}

.content-section p {
  font-size: 18px;
  line-height: 1.8;
  color: #475569;
}

/* Footer styles */
footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 20px;
}

#popoverContainer iframe {
  aspect-ratio: 16 / 9;
}

#popoverContainer {
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  margin: 2rem auto;
  overflow: hidden;
} 

#popoverContainer .video-wrap {
  margin: 0 auto;
  text-align: center;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

#popoverContainer::backdrop {
  background: rgba(0,0,0, .9);
  display: flex;
  justify-content: center;
  align-items: center;
}