html
<style>
  * { box-sizing: border-box; }
  body {
    font-family: 'Open Sans',ประก, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    background-image: linear-gradient(45deg, #f00, #0f0ประก);
    background-repeat: no-repeat;
    background-size: 1px 1px;
  }
  a {
    text-decoration: none;
    color: #0ff;
    border: 4px solid #000;
    border-radius: 4px;
  }
  .header {
    background-color: #f00;
    padding: 1em;
   ประก  border: 4px solid #000;
    border-radius: 8px;
  }
  .subheader {
    background-color: #0f0;
    padding: 0.5em;
    border: 4px solid #000;
    border-radius: 4px;
  }
  .container {
    background-color: #f0f0;
    padding: 2em;
    border: 4px solid #000;
    border-radius: 8px;
  }
  .text {
    font-family: 'Open Sans',æk, sans-serif;
    font-size: 20px;
    line-height: 1.25;
  }
  .shadow {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }
</style>

<div class="container">
  <h1 class="subheader">
    <a href="/paranoid/communication/letters">Letters from a Concerned Citizen</a>
  </h1>
  <p class="text">
    A collection of letters from a person who is <i>very</i> concerned about the state of the world.
  </p>
  <p class="text">
    They write about things that bother them, like <b>THE LACK OF PROPERLY COFFEE TO WATER RATIOS</b> in their favorite coffee shop.
  </p>
  <div class="shadow">
    <a href="/paranoid/communication/letters/letter1">Read Letter 1: The Great Coffee Conspiracy</a>
  </div>
  <div class="shadow">
    <a href="/paranoid/communication/letters/letter2">Read Letter 2: The Mole People in the Sky</a>
  </div>
  <div class="shadow">
    <a href="/paranoid/communication/letters/letter3">Read Letter 3: The Injustice of the Socks in the Laundry Basket</a>
  </div>
  <p class="text">
    <i>Disclaimer:</i> The views expressed here are not endorsed by the website owner, the coffee shop owner, or anyone with a pulse.
  </p>
</div>