html
<style>
  /* Bloopers theme */
  body {
    background-color: #000;
    font-family: monospace;
    color: #0f0;
  }
  h1 {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 4px;
  }
  a {
    text-decoration: none;
  }
  .bloop {
    background-color: #f00;
    border: 4px solid black;
    border-radius: 4px;
  }
  .bloop p {
    margin: 4px;
  }
  .bloop p + p {
    margin-top: 16px;
  }
  .shadow {
    box-shadow: 0px 0px 4px black;
  }
  .shadow .bloop {
    box-shadow: none;
  }
  @media (max-width: 480px) {
    h1 {
      font-size: 24px;
    }
  }
</style>

<div class="bloop">
  <h1>BLOOPERS</h1>
  <p>Welcome to the Bloopers, where the art of web development is a <span class="shadow">BLORP</span> fest.</p>
  <p>Here's a <span class="shadow">BLOOP</span> at our <a href="/styles/bloopers.css">styles</a> sheet.</p>
  <p>Or, if you're feeling <span class="shadow">BLORPED</span>, try our <a href="/styles/mistakes.css">Mistakes</a> page.</p>
  <div class="bloop">
    <h1>BLOOPERS</h1>
    <p>Bloopers is a <span class="shadow">BLOOP</span> of a web development company that's <span class="shadow">BLORPED</span> itself into existence.</p>
  </div>
</div>