<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/wingcss/0.1.4/wing.min.css" />

<div class="centered text-center">
  <h1>SLEEK MODAL</h1>
  <p>pure css modal for all of your needs</p>
  <button class="open"><a href="#wrap">CLICK ME!</a></button>
</div>

<div id="wrap">
  <div class="modal">
    <h2>I'm A Sleek Modal</h2>
    <p>Pretty sweet, eh?</p>
    <br/>
    <a class="close btn" href="#">Close Me!</a>
  </div>
</div>

#wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  display: flex;
}

.modal {
/*   width: 50%; */
  background: #fff;
  padding: 3rem;
  text-align: center;
}


#wrap:not(:target) {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s, visibility 1s;
}

#wrap:target {
  opacity: 1;
  visibility: visible;
  transition: opacity 1s, visibility 1s;
}

.open a {
  text-decoration: none;
  color: white;
}

/* 
         /    /\
        /    /  \
       /    /    \
      /    /  /\  \
     /    /  /  \  \
    /    /  /\   \  \
   /    /  /  \   \  \
  /    /__/____\   \  \
 /              \   \  \
/________________\   \  \
\_____________________\ /

*/