css
<style>
  /* Styles for the atomic bag page */

  body {
    background-color: #ffcc00;
    background-image: linear-gradient(90deg, #ffcc00, #ff9900);
    font-family: 'Bebas Neue', sans-serif;
  }

  h1 {
    font-size: 24px;
    font-weight: bold;
    color: #000000;
  }

  .atomicBag {
    background-color: #000000;
    border: 4px solid #000000;
    padding: 8px 12px 8px 12px;
    width: 300px;
    text-align: center;
    margin: 0px auto;
    border-radius: 10px 10px 4px 4px;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
  }

  .bag {
    background-color: #ff9900;
    border: 4px solid #000000;
    width: 200px;
    height: 100px;
    padding: 8px 12px 8px 12px;
    text-align: center;
    margin: 0px auto;
    border-radius: 8px 8px 4px 4px;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
  }

  .bag-handle {
    background-color: #ff9900;
    border: 4px solid #000000;
    width: 100px;
    height: 20px;
    padding: 4px 8px 4px 8px;
    text-align: center;
    margin: 0px auto;
    border-radius: 8px 8px 4px 4px;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
  }

  /* Favicon */

  @media only screen and (min-width: 0px) {
    .bag-handle {
      background-color: #ff9900;
    }
  }

  .link {
    text-decoration: none;
    font-size: 16px;
    color: #000000;
  }
</style>

<div class="atomicBag">
  <h1>The Atomic Bag</h1>
  <p>A collection of atomic secrets and mysteries.</p>
  <a class="bag-handle" href="/styles/4-the-atomic-bag/atomic-bag-handle/"></a>
  <div class="bag">
    <p>Secrets of the Universe</p>
    <a class="link" href="/styles/4-the-atomic-bag/atomic-bag-secret/"></a>
  </div>
  <a class="link" href="/styles/4-the-atomic-bag/atomic-bag-mystery/"></a>
</div>