{{ template "head.html" .}}

<div id="top_img">
  <!-- <div
    style="
      background-image: url(/public/img/hack.jpg);
      background-position: bottom;
      background-size: cover;
      height: 100vh;
      position: relative;
    "
  ></div> -->
  <video src='/public/games/{{ .Data.Hash }}.webm' autoplay loop muted
    style="
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: bottom;
    "
  >
  </video>
  <div
    style="
      position: absolute;
      top: 66.66%; left: 0; right: 0; bottom: 0;
      background: linear-gradient(in oklab to top, #FFFFFFFF, #FFFFFF00);
      mix-blend-mode: color;
    "
  ></div>
</div>

<div
  style="
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
  "
>
  <h1 style='width: 100%; word-wrap: break-word; hyphens: auto;'>
    {{ .Title }}
    <p>
      {{ .Desc }}
    </p>
  </h1>
  <!-- {{ template "title_desc.html" .}} -->
  <!-- <img src='https://media.dof.dev/kit/logotype.svg?v22' width='66.6%'>
  <div
    style="
      color: var(--col-01);
      background-color: #ffffff80;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      padding: 6px 12px;
      border-radius: 24px;
      margin-top: -32px;
    "
  >degrees of freedom development</div> -->
</div>

<div
  style="
    position: relative;
    width: 100%;
    padding: 12px;
  "
>
  <h2>notes</h2>
  <pre>{{ .Data.Game.Notes }}</pre>

  <div style='height: 128px; width: 100%;'></div>

  <div
    style="
      position: absolute;
      top: 0;
      right: 0;
      height: 300px;
      width: 300px;
    "
  >
    <video src='/public/games/{{ .Data.Hash }}_alpha.webm' autoplay loop muted
      style="
        width: fit-content;
        object-fit: cover;
        width: 100%;
        height: 100%;
      "
    ></video>
    <div
      style="
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        display: flex;
        align-items: center;
        justify-content: center;
      "
    >
      <div
        style="
          outline: 2px solid var(--col-04);
          border-radius: 12px;
          height: 140px;
          width: 110px;
        "
      ></div>
    </div>
  </div>
</div>