CSS Modal using big outline

modal-outline.css

.modal {
  /* some styles to position the modal at the center of the page */
  position: fixed;
  top: 50%;
  left: 50%;
  width: 300px;
  line-height: 200px;
  height: 200px;
  margin-left: -150px;
  margin-top: -100px;
  background-color: #f1c40f;
  text-align: center;

  /* needed styles for the overlay */
  z-index: 10; /* keep on top of other elements on the page */
  outline: 9999px solid rgba(0,0,0,0.5);
}