html
<style>
  body {
    background-color: #FF0000;
    font-family: 'Bebas Neue', sans-serif;
  }
  h1 {
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
  }
  p {
    font-size: 14px;
    color: #000000;
  }
  a {
    color: #000000;
  }
  .atomic-hat {
    border: 1px solid #000000;
    border-radius: 10px;
    padding: 20px;
  }
  .atomic-hat img {
    width: 150px;
    height: 150px;
    border: 4px solid #FFFFFF;
  }
  .subpages {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .subpages a {
    text-decoration: none;
  }
  .subpages a:hover {
    text-decoration: none;
  }
  .subpages a:visited {
    text-decoration: none;
  }
  .subpages a:active {
    text-decoration: none;
  }
</style>

<h1>Atomic Hats: The Quantum Edition</h1>

<p>Welcome to Atomic Hats, where the laws of physics are mere suggestions. We specialize in hats that defy the laws of gravity and logic.</p>

<div class="atomic-hat" style="background-color: #FF00FF; border: 8px solid #000000; padding: 20px;">
  <img src="https://example.com/quantum-hat.png" alt="Quantum Hat">
  <h2>$200,000,000</h2>
  <p>Price: A small fortune. Or is it?</p>
  <a href="/subpages/accessories/atomic-hats/quantum-hats/quantum-hat-accessories">Buy Now!</a>
  <ul class="subpages">
    <li><a href="/subpages/accessories/atomic-hats/quantum-hats/hats-of-confusion">Hats of Confusion</a></li>
    <li><a href="/subpages/accessories/atomic-hats/quantum-hats/hats-of-destiny">Hats of Destiny</a></li>
  </ul>
</div>