Модальное окно на чистом CSS

<!-- Модальное окно -->
<a class="btn-modal" href="#open-window-content">Открыть</a>
<div class="modal-overlay" id="open-window-content">
  <div class="open-window">
    <h2>Lorem ipsum</h2><a class="close" href="#">×</a>
    <!-- Содержимое модального окна -->
    <div class="modal-content-body">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend cursus leo, at fringilla dui mollis non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus tortor massa, consectetur quis commodo quis, ullamcorper sed augue. Mauris eu efficitur turpis. Aliquam erat volutpat. Nullam commodo dui eu sagittis condimentum. Donec magna lorem, placerat aliquam ipsum a, egestas ornare urna. Donec dapibus luctus aliquet. Cras at est et arcu aliquam pharetra ac eu magna. Fusce vel eros sed massa tincidunt iaculis at nec lacus. Duis malesuada, magna vitae sollicitudin euismod, orci sem mollis risus, at suscipit tellus lorem ut nibh. In hac habitasse platea dictumst. Nunc laoreet nisi vitae lorem efficitur venenatis. Pellentesque consectetur lorem et vestibulum accumsan. Suspendisse potenti. Donec imperdiet consequat orci, id imperdiet elit faucibus quis.
      </p>
    </div>
  </div>
</div>
      

/* Кнопка */
.btn-modal {
  fcolor: #fff;
  cursor: pointer;
  line-height: 3rem;
  padding: 1rem 3rem;
  color: #fff;
  text-decoration: none;
  background-color: #83bec5;
  transition: all 0.3s ease-out;
}
.btn-modal:hover {
  background-color: #527c82;
}

/* Затемнение фона */
.modal-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  transition: opacity 500ms;
  visibility: hidden;
  height: 100%;
  opacity: 0;
}
.modal-overlay:target {
  visibility: visible;
  opacity: 1;
}

/* Модаальное окно */
.open-window {
  margin: 70px auto;
  padding: 1em;
  background: #fff;
  border-radius: 5px;
  width: 90%;
  position: relative;
  transition: all 5s easeout;
}
.open-window h2 {
  margin: 1em 0;
  color: #333;
  font-family: 'Raleway', sans-serif;
}

/* Кнопка закрыть */
.open-window .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.open-window .close:hover {
  color: #83bec5;
}
.open-window .modal-content-body {
  overflow: auto;
}
.modal-content-body p{
  text-align: justify;
}
::-webkit-scrollbar {
  z-index: 30;
  width: 5px;
  height: 0;
  y-index: hidden;
}
::-webkit-scrollbar-track {
  background-color: #111;
  border-radius: 0;
}
::-webkit-scrollbar-thumb {
  background-color: #2b2e33;
}
::-webkit-scrollbar-thumb:hover {
  background-color: transparent;
}