<h1>The Spooky Box</h1>
<p>The dimensions of type on the web are defined by a combination of font-size and line-height - there is no concept of a typographic baseline.</p>
h1 {
  font-size: 2rem;
  display: inline-block;

h1, p {
  max-width: 36em;
  margin: 0 auto 1.5rem;
  animation: spooky 5s ease infinite 0s both;

body {
  font-family: "Helvetica Neue",Arial,sans-serif;
  text-align: center;
  padding: 1.5rem;
  line-height: 1.6;
  background: #4b4c57;
  color: #fff;

@keyframes spooky {
  0%, 100% {
    background: #8232d2;
  50% {
    background: transparent;
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.