<div class="overlay"><h1>OVERLAY</h1></div>
<div class="container">
  <h1>Pointer-Events Demo</h1>
  <p>
    Lorem ipsum dolor <a href="#">sit amet</a>, consectetur adipisicing elit. Sequi, ullam necessitatibus aspernatur reprehenderit facilis. Quasi, deleniti, sit rerum ipsa quos dolor officiis omnis repudiandae nulla quibusdam accusantium ducimus blanditiis quam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, voluptas magni deserunt dolor exercitationem ullam corrupti necessitatibus officia cum error <a href="#">saepe sunt soluta</a>. Iusto, dicta, aperiam soluta praesentium laudantium omnis.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, harum, aliquid fugiat <a href="#">molestias ipsa</a> delectus et aperiam quis vero sapiente sit laborum similique labore dignissimos dicta explicabo deleniti! Enim, itaque!
  </p>
</div>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.25em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

hr {
  margin: 50px 0;
}

.container {
  margin: 40px auto;
  max-width: 700px;
  background-color: white;
  padding: 2em;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.25);
  z-index: 1;
  color: white;
  text-align: center;
  pointer-events: none;
}

.overlay h1 {
  font-size: 80px;
  /*    font-size: 2vw;*/

  line-height: 4;
}

a {
  color: deepPink;
}