How to create a modal with Pure CSS !

<a href="#modal" class="modal-btn">Open modal</a><div class="modal-overlay" id="modal">    <div class="modal">        <h3 class="modal-title">Modal title</h3>        <p>Lorem ipsum dolor sit amet, consectetur adipisicing, elit. Temporibus tempore aperiam deleniti consequatur, earum, consectetur et, possimus dolor laborum quia sint facere asperiores quidem repellat illum obcaecati, saepe a beatae?</p>        <a href="#" class="modal-btn">Got It</a>    </div></div>

* {  margin: 0;  padding: 0;  box-sizing: border-box;}body {  padding: 20px;  font-family: "Segoe ui", sans-serif;}.modal-overlay {  position: fixed;  top: 0;  left: 0;  opacity: 0;  pointer-events: none;  transition: all 0.2s ease;  height: 100%;  width: 100%;  background: #0000004a;}.modal-overlay:target {  opacity: 1;  pointer-events: all;}.modal {  position: fixed;  top: 50%;  left: 50%;  max-width: 600px;  width: 80%;  transform: translate(-50%, -50%) scale(.8);  background: white;  padding: 20px 30px;  font-family: "segoe ui", sans-serif;  border-radius: 4px;  transition: all 2s ease;  box-shadow: 0px 8px 40px -20px black;}.modal-overlay:target .modal {  transform: translate(-50%, -50%) scale(1);  transition: all 0.2s ease;}