<!DOCTYPE html>
<html>
  <head>
    <!-- Google Tag Manager -->
    <script>
      ;(function (w, d, s, l, i) {
        w[l] = w[l] || []
        w[l].push({
          'gtm.start': new Date().getTime(),
          event: 'gtm.js',
        })
        var f = d.getElementsByTagName(s)[0],
          j = d.createElement(s),
          dl = l !== 'dataLayer' ? '&l=' + l : ''
        j.async = true
        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl
        f.parentNode.insertBefore(j, f)
      })(window, document, 'script', 'dataLayer', 'GTM-M3MBVGG')
    </script>
    <!-- End Google Tag Manager -->
    <meta charset="UTF-8" />
    <style type="text/css">
      body {
        position: relative;
      }

      .play-page {
        display: flex;
        flex-direction: row-reverse;
        font-family: Georgia, 'Times New Roman', Times, serif;
        min-height: 200px;
      }

      h1,
      h3 {
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        text-align: center;
      }

      #submit {
        margin-top: 10px;
        padding: 8px 20px;
        background-color: cadetblue;
        border: none;
        border-radius: 3px;
        font-size: 1.1em;
        color: white;
        cursor: pointer;
      }

      #submit:hover {
        background-color: rgb(0, 146, 156);
      }

      [type='radio'] {
        display: none;
      }

      [type='radio'] + label.radio-label {
        background: lightgrey;
        display: block;
        padding: 10px;
        border-radius: 4px;
        cursor: pointer;
      }

      label.radio-label:hover {
        background: darkgrey;
      }

      [type='radio']:checked + label.radio-label {
        background: lightcoral;
      }

      .radio-label h3 {
        margin: 0;
        display: inline-block;
        vertical-align: middle;
        width: 220px;
      }

      .thumbnail {
        display: inline-block;
        vertical-align: middle;
        width: 67px;
        height: 48px;
        margin-right: 4px;
      }

      body {
        padding: 70px 0 30px;
      }

      #addl-options {
        position: absolute;
        top: 30px;
        right: 30px;
        background-color: white;
        padding: 10px;
        cursor: pointer;
        width: 200px;
      }

      #addl-options > summary {
        list-style: none;
        text-align: right;
      }
    </style>
  </head>
  <body>
    <!-- Google Tag Manager (noscript) -->
    <noscript>
      <iframe
        src="https://www.googletagmanager.com/ns.html?id=GTM-M3MBVGG"
        height="0"
        width="0"
        style="display: none; visibility: hidden"
      ></iframe>
    </noscript>
    <!-- End Google Tag Manager (noscript) -->
    <h1>Magic the Guessering</h1>
    <div class="play-page" style="justify-content: center">
      <form
        method="get"
        action="guess.html"
        style="display: flex; flex-direction: column; align-items: center"
      >
        <input
          type="radio"
          id="counterspell"
          name="whichguesser"
          value="counterspell"
          checked
        />
        <label class="radio-label" for="counterspell">
          <img
            class="thumbnail"
            src="https://c1.scryfall.com/file/scryfall-cards/art_crop/front/7/1/71cfcba5-1571-48b8-a3db-55dca135506e.jpg?1562843855"
          />
          <h3>Counterspell Guesser</h3></label
        ><br />

        <input type="radio" id="burn" name="whichguesser" value="burn" />
        <label class="radio-label" for="burn">
          <img
            class="thumbnail"
            src="https://c1.scryfall.com/file/scryfall-cards/art_crop/front/6/0/60b2fae1-242b-45e0-a757-b1adc02c06f3.jpg?1562760596"
          />
          <h3>Match With Hot Singles</h3></label
        ><br />

        <input type="radio" id="beast" name="whichguesser" value="beast" />
        <label class="radio-label" for="beast">
          <img
            class="thumbnail"
            src="https://c1.scryfall.com/file/scryfall-cards/art_crop/front/3/3/33f7e788-8fc7-49f3-804b-2d7f96852d4b.jpg?1562905469"
          />
          <h3>Finding Fantastic Beasts</h3></label
        >
        <br />

        <input type="radio" id="basic" name="whichguesser" value="basic" />
        <label class="radio-label" for="basic">
          <img
            class="thumbnail"
            src="https://c1.scryfall.com/file/scryfall-cards/art_crop/front/0/3/03683fbb-9843-4c14-bb95-387150e97c90.jpg?1642161346"
          />
          <h3>How Basic</h3></label
        >
        <br />

        <details id="addl-options">
          <summary>
            <img
              src="https://mythicspoiler.com/images/buttons/ustset.png"
              style="width: 32px; vertical-align: top"
            />
            Options
          </summary>
          <input type="checkbox" name="digital" id="digital" checked />
          <label for="digital">include digital cards</label>
          <br />
          <input type="checkbox" name="un" id="un" checked />
          <label for="un">include un-cards</label>
          <br />
          <input type="checkbox" name="original" id="original" />
          <label for="original">only original set printing</label>
        </details>
        <input type="submit" id="submit" value="Play" />
      </form>
    </div>

    <div style="margin: -40px 0 0; height: 60px">
      <a href="https://paypal.me/idamayer">Donate, buy us a boba 🧋</a>
    </div>

    <div
      style="
        font-size: 0.9em;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        color: grey;
        font-style: italic;
      "
    >
      made by
      <a
        style="color: rgb(0, 146, 156); font-style: italic"
        href="https://idamayer.com"
        >Ida Mayer</a
      >
      &
      <a
        style="color: rgb(0, 146, 156); font-style: italic"
        href="mailto:alexlien.alien@gmail.com"
        >Alex Lien</a
      >, 2022
    </div>
  </body>
</html>