<div id="open-modal" class="modal-window">
  <div class="modal-content">
    <a href="#!" title="Close" class="modal-close"> X </a>
    <h2>Yaaay!</h2>
    <div>
      <p class="bold">A nice responsive css only modal.</p>
    </div>
    <div>
      <p>
        You can close this dialog by clicking the close button at the bottom, the cross at the top right or the backdrop.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti dolore repellat nulla sunt, sed libero voluptatem facilis saepe iste dolores et dignissimos ea fugiat sit quae aliquam nisi corporis tempora.
      </p>
    </div>
    <div class="modal-footer">
      <a href="#!" title="Close" class="btn modal-close"> Close </a>
    </div>
  </div>
</div>
<a class="modal-backdrop" href="#!"></a>

<div class="d-flex justify-center align-center">
  <a class="btn modal-btn" href="#open-modal" name="a">
    Open Modal
  </a>
</div>

// convenience styles that have nothing to do with the modal
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500&display=swap');
.d-flex { display: flex; height: 50vh }
.justify-center { justify-content: center; }
.align-center { align-items: center; }
* { font-family: 'Ubuntu', sans-serif; }


/* responsive modal styles */
.modal-btn { 
  font-size: 20px; 
  font-weight: lighter; 
  text-decoration: none; 
  color: #282828; 
  border-radius: .4em; 
  border: 1px solid lightblue; 
  height: fit-content; 
  padding: 5px 15px;
  &:hover, &:hover p {
    background: lightblue;  
  }
}
.modal-window { 
  position: fixed; 
  left: 50%; 
  top: 50%; 
  right: 50%; 
  bottom: 50%; 
  transform: translate(-50%, -50%); 
  z-index: 999;
  visibility: hidden; 
  opacity: 0; 
  pointer-events: none; 
  transition: opacity .25s;
  &:target { 
    visibility: visible; 
    opacity: 1; 
    pointer-events: auto; 
    +.modal-backdrop { 
      background-color: rgba(0, 0, 0, 0.75); 
      position: fixed; 
      top: 0; 
      right: 0; 
      bottom: 0; 
      left: 0; 
      z-index: 990;
    }
  }
  &>div.modal-content { 
    width: 900px; 
    max-width: 90vw; 
    position: fixed; 
    top: 50%; left: 50%; 
    transform: translate(-50%, -50%); 
    padding: 10px 30px; 
    background: #fff; 
    max-height: 90vh; 
    overflow-y: auto;
  }
  .modal-close:not(.btn) { 
    position: fixed; 
    right: 15px; 
    top: 5px; 
    font-size: 1.2rem; 
    text-decoration: none; 
  }
  .modal-close, .modal-close:visited { 
    color: #212121; 
  }
  .btn.modal-close { 
    font-size: 1.2rem; 
    text-decoration: none; 
    border: 1px solid #333; 
    padding: 10px 15px; 
    background: #fff; 
    border-radius: .4em; 
  }
  .btn.modal-close:hover { 
    background: #f0f0f0; 
  }
  .modal-footer { 
    width: 100%; 
    display: flex; 
    justify-content: flex-end; 
    margin: 15px 0px 0px 5px;
  }
}