<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Generated Image</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <style>
    @import url("https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Readex+Pro:wght@400;700&display=swap");

    body {
      background: white;
      background-image: radial-gradient(
          circle at 25px 25px,
          lightgray 2%,
          transparent 0%
        ),
        radial-gradient(circle at 75px 75px, lightgray 2%, transparent 0%);
      background-size: 100px 100px;
      height: 100vh;
      font-family: "Readex Pro", sans-serif;
    }

    code {
      color: #d400ff;
      font-family: "Vera";
      white-space: pre-wrap;
      letter-spacing: -5px;
    }

    code:before,
    code:after {
      content: "`";
    }

    .logo-wrapper {
      display: flex;
      align-items: center;
      align-content: center;
      justify-content: center;
      justify-items: center;
    }

    .logo {
      margin: 0 75px;
    }

    .plus {
      color: #bbb;
      font-family: Times New Roman, Verdana;
      font-size: 100px;
    }

    .spacer {
      margin: 150px;
    }

    .emoji {
      height: 1em;
      width: 1em;
      margin: 0 0.05em 0 0.1em;
      vertical-align: -0.1em;
    }

    .heading {
      font-family: "Major Mono Display", monospace;
      font-size: 100px;
      font-style: normal;
      color: black;
      line-height: 1.8;
    }

    .font-major-mono {
      font-family: "Major Mono Display", monospace;
    }

    .text-primary {
      color: #11b981;
    }
  </style>
  <body>
    <div class="px-24">
      <!-- Profile image -->
      <div class="absolute left-24 top-8">
        <div class="flex flex-row align-bottom gap-6">
          <img
            class="h-24 w-24 rounded-full bg-gray-400 flex items-center justify-center"
            src="https://lh3.googleusercontent.com/a-/AOh14GiZyl1lBehuBMGyJYJhZd-N-mstaUtgE4xdI22lLw=s96-c"
            alt=""
          />
          <div class="flex flex-col">
            <p class="text-gray-900 text-3xl">Austin Chen</p>
            <p class="text-gray-500 text-3xl">@AustinChen</p>
          </div>
        </div>
      </div>

      <!-- Mantic logo -->
      <div class="absolute right-24 top-8">
        <a class="flex flex-row gap-3" href="/"
          ><img
            class="sm:h-12 sm:w-12"
            src="https:&#x2F;&#x2F;manifold.markets&#x2F;logo.png"
            width="40"
            height="40"
          />
          <div
            class="hidden sm:flex font-major-mono lowercase mt-1 sm:text-3xl md:whitespace-nowrap"
          >
            Manifold Markets
          </div></a
        >
      </div>

      <div class="flex flex-row justify-between gap-12 pt-36">
        <div class="text-indigo-700 text-6xl leading-snug">
          Will Manifold switch its logo to a manatee by April?
        </div>
        <div class="flex flex-col text-primary">
          <div class="text-8xl">30%</div>
          <div class="text-4xl">chance</div>
        </div>
      </div>

      <!-- Metadata -->
      <div class="absolute bottom-16">
        <div class="text-gray-500 text-3xl">
          Jan 7 &nbsp;•&nbsp; Closes Mar 31, 9:59pm &nbsp;•&nbsp; M$ 448 pool
          &nbsp;•&nbsp; #ManifoldMarkets #fun
        </div>
      </div>
    </div>
  </body>
</html>