Modal with CSS

dabblet.css

/* Modal with CSS */

@import url(http://fonts.googleapis.com/css?family=Audiowide);

p {
  font-family: Arial, sans-serif;
}

.box {
  padding: 2em;
  background: hotpink;
  text-align: center;
  font-family: 'Audiowide', cursive;
  width: 20vw;
  height: 3vw;
  line-height: 3vw;
  border-radius: .7em;
  border: 1px solid darken(hotpink,30%);
  transition: 1.4s all;
  position: absolute;
  margin: auto;
  top: 0; left: 0; bottom: 0; right: 0;
}
.box:hover { 
	cursor: pointer; 
	background: deeppink;
	box-shadow: 0 0 0 3000px rgba(0,0,0,0.9);
}

dabblet.html

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At odit blanditiis beatae quod dolorum soluta repudiandae voluptatibus expedita. Ipsa recusandae quisquam quod asperiores vitae obcaecati a tenetur ex optio nostrum atque cumque deserunt esse quo sunt iusto excepturi similique impedit.</p>
<p>Amet sint aliquid veniam dolores temporibus magnam inventore ea delectus ab pariatur accusamus et quia quo quam suscipit. Aspernatur aperiam atque rerum dignissimos ducimus provident quis cupiditate doloribus. Quos error optio assumenda libero mollitia incidunt officia ipsa earum commodi cumque?</p>
<p>Sint cupiditate ex non distinctio iure architecto voluptates facere labore culpa possimus odio porro aspernatur? Nisi similique quidem maxime id cum sapiente optio iure debitis harum ut nesciunt ipsum modi sint magnam atque cupiditate velit sed eaque ratione fuga aperiam.</p>
<p>Optio ab magnam velit eaque neque harum est repellendus quidem rerum minima quasi autem tempora accusantium a alias? Voluptate ullam recusandae fugit nemo accusamus aliquid fuga quia assumenda excepturi doloribus animi veritatis at labore incidunt est molestiae sit quis eaque.</p>
<p>At officiis quos doloribus cupiditate culpa id eaque ab tenetur vitae maxime. Qui eum eveniet ut maxime quo dignissimos id earum doloribus blanditiis quos voluptate sapiente similique ex possimus reprehenderit numquam aperiam magnam cum magni nam odio quis nihil animi.</p>
<div class="box">Focus Me</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}