Twitter Instant Game index.html with body start

index.html

        <style type="text/css">
      body {
        max-width: 85%;
        margin: auto;
      }
      iframe {      
        width: 100%;
        height: 100vh;
      }
      #locked {
        display: flex;
        height: 100vh;
        width: 50%;
        margin: auto;
        flex-direction: column;
        justify-content: center;
      }
      #locked button {
        width: 200px;
      }
      #unlocked {
        display: none;
      }
    </style>
    
    <div id="locked">
      <h1>Pinnie On/Off</h1>
      <h3>To play this game, you have to own a Pinnie NFT</h3>
      <button>Connect Wallet</button>
      <div id="buy-now">
        <p>Don't have the NFT? Buy it here.</p>
      </div>
    </div>
    <div id="unlocked">
      <iframe frameBorder="0" src="https://gateway.pinata.cloud/ipfs/Qm.../" />
    </div>