<style>
  td {
    text-align: center;
    vertical-align: middle;
  }
  .align-left {
    text-align: left;
  }
  .large {
    font-size: 3em;
    font-weight: bold;
    background-color: yellow;
  }
  .center-text {
    text-align: center;
  }
  .bold-text {
    font-weight: bold;
    background-color: cyan;
  }
  .table-cell {
    text-align: left;
    width: 100%; /* Ensure the table cell takes up the full width */
    height: auto; /* Let the image height adjust automatically */
  }
  
  .table-cell img {
    text-align: left;
    max-width: 80%; /* Make the image fit within the table cell */
    height: auto; /* Let the image height adjust automatically */
  }

  .table-container {
    display: flex;
    justify-content: center;
  }

  .white-bg {
    width: 10em;
    background-color: rgb(185, 201, 224);
  }  
  .cyan-bg {
    width: 10em;
    background-color: rgb(128, 184, 221);
  }  
  .yellow-bg {
    width: 10em;
    background-color: rgb(204, 190, 67);
  }

</style>

<div class="table-container">
  <table style="width: 720px; table-layout: fixed;">
    <tr>
      <td colspan="2" style="text-align: center; font-weight: bold; font-size: 2em;">角色卡 - {{Name}}</td>
    </tr>
  </table>
</div>

<div class="table-container">
  <table style="width: 720px; table-layout: fixed;">
    <tr>
      <td class="cyan-bg">名稱</td>
      <td class="align-left">{{Name}}</td>
    <tr>
      <td class="cyan-bg">種族 性別</td>
      <td class="align-left">{{Race_Gender}}</td>
    <tr>
      <td class="cyan-bg">年齡</td>
      <td class="align-left">{{Age}}</td>
    <tr>
      <td class="cyan-bg">身型</td>
      <td class="align-left">{{Body_Shape}}</td>
    <tr>
      <td class="cyan-bg">職業</td>
      <td class="align-left">{{Profession}}</td>
    <tr>
      <td class="cyan-bg">說話方式</td>
      <td class="align-left">{{Speaking_Style}}</td>
    <tr>
    <tr>
      <td class="cyan-bg">口頭禪</td>
      <td class="align-left">{{Catchphrase}}</td>
    <tr>
      <td class="yellow-bg">個性</td>
      <td class="align-left">{{Personality}}</td>
    <tr>
      <td class="yellow-bg">信念</td>
      <td class="align-left">{{Faith}}</td>
    <tr>
      <td class="yellow-bg">開場時的缺憾</td>
      <td class="align-left">{{Regret}}</td>
    <tr>
      <td class="yellow-bg">故事中的目標</td>
      <td class="align-left">{{Goal}}</td>
    <tr>
      <td class="yellow-bg">側寫</td>
      <td class="align-left">{{Another_Perspective}}</td>
    <tr>
      <td class="yellow-bg">簡史</td>
      <td class="align-left">{{Brief_History}}</td>
    <tr>
      <td class="white-bg">原型參考</td>
      <td class="align-left">{{References}}</td>
    <tr>
      <td class="white-bg">形象概念</td>
      <td class="table-cell">{{Concept}}</td>
    </tr>
  </table>
</div>

<div style="height: 50px"></div>
<p class="center-text">
  <i>
      powered by 
      <img src="https://posetmage.com/Images/Icon/PosetMage_t.png" height="16" /> PosetMage
      <img src="https://posetmage.com/Images/Icon/PosetMage_t.png" height="16" />
  </i>
</p>