ReadMe UI
===

<br>

<table style="table-layout: fixed !important; text-align: center;">
  <tbody>
    <tr>
      <td>
        <flex align="center">
          <a href="./#/Design System" style="display: block">
            <i class="fa-lg fas fa-paint-brush"></i>
            <br/>
            <span>Design System</span>
          </a>
        </flex>
      </td>
      <td>
        <flex align="center">
          <a href="./#/UI Library/Components" style="display: block">
            <i class="fa-lg fas fa-boxes"></i>
            <br/>
            <span>UI Components</span>
          </a>
        </flex>
      </td>
      <td>
        <flex align="center">
          <a href="./#/Overview" style="display: block">
            <i class="fa-lg fas fa-book-open"></i>
            <br/>
            <span>Introduction</span>
          </a>
        </flex>
      </td>
    </tr>
  </tbody>
</table>

<style>
h1#section-readme-ui a {
  pointer-events: none !important;
}
h1#section-readme-ui + [class*=rsg--toolbar-] {
  display: none
}
main[class*=rsg--content][class*=rsg--content] {
  background:
    no-repeat
    top center
    url(data:image/svg+xml;base64,PHN2ZyBzdHlsZT0id2lkdGg6MTAwJSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDE0NDAgODU3Ij48ZGVmcz48cGF0aCBkPSJNMCA4OTIuNTA1YzMwOC44MjkgMzIuNDk4IDU0OC44MjkgNy41MzYgNzIwLTc0Ljg4NSAxNzEuMTcxLTgyLjQyMiA0MTEuMTcxLTEwNC45NzggNzIwLTY3LjY2OFYwSDB2ODkyLjUwNXoiIGlkPSJhIi8+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBhdGggZD0iTS01NS40MzEgODM2Ljk1NWMzMzYuOTMgNDMuMDggNjAzLjAxOCAxNS4zNzcgNzk4LjI2NS04My4xMSAxOTUuMjQ2LTk4LjQ4NiA0NjEuMTMxLTEyMy4yNiA3OTcuNjU1LTc0LjMxN2wzNy4zMTgtNTM3LjIzN0wtNi4wNSAxMjYuMDM3bC00OS4zODIgNzEwLjkyeiIgZmlsbD0iI0U4RjRGRCIvPjx1c2UgZmlsbD0iIzAxOEVGNSIgeGxpbms6aHJlZj0iI2EiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTk0KSIvPjwvZz48L3N2Zz4=);
  background-size: 100% 90% !important;
  margin: 0 !important;
  margin-top: 0 !important;
  max-width: unset !important;
  width: 100%;
  min-height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
h1[class*="rsg--heading"] {
  pointer-events: none !important;
}
h1[class*="rsg--heading"]:before {
  /* blue */
  content:
    url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MC4xIDQzLjciPjxkZWZzLz48cGF0aCBmaWxsPSIjMDE4ZWY1IiBkPSJNNTUgMEg0MC42QTEwLjcgMTAuNyAwIDAwMzAgOC40IDEwLjcgMTAuNyAwIDAwMTkuNiAwSDVhNSA1IDAgMDAtNSA1djI1LjZhNSA1IDAgMDA1IDVoOS4zYzEwLjYgMCAxMy44IDIuNiAxNS4zIDcuOGEuMy4zIDAgMDAuMy4yLjMuMyAwIDAwLjQtLjJjMS41LTUuMiA0LjctNy44IDE1LjMtNy44SDU1YTUgNSAwIDAwNS01VjVhNSA1IDAgMDAtNS01ek0yNS4zIDI3LjZhLjQuNCAwIDAxLS4zLjRIOC4yYS40LjQgMCAwMS0uNC0uNHYtMi40YS40LjQgMCAwMS40LS4zaDE2LjdhLjQuNCAwIDAxLjMuNHYyLjN6bTAtNi4zYS40LjQgMCAwMS0uMy4zSDguMmEuNC40IDAgMDEtLjQtLjN2LTIuNGEuNC40IDAgMDEuNC0uM2gxNi43YS40LjQgMCAwMS4zLjN2Mi40em0wLTYuNGEuNC40IDAgMDEtLjMuNEg4LjJhLjQuNCAwIDAxLS40LS40di0yLjNhLjQuNCAwIDAxLjQtLjRoMTYuN2EuNC40IDAgMDEuMy40VjE1em0yNyAxMi43YS40LjQgMCAwMS0uMy40SDM1LjJhLjQuNCAwIDAxLS40LS40di0yLjRhLjQuNCAwIDAxLjQtLjNoMTYuN2EuNC40IDAgMDEuMy4zdjIuNHptMC02LjNhLjQuNCAwIDAxLS4zLjNIMzUuMmEuNC40IDAgMDEtLjQtLjN2LTIuNGEuNC40IDAgMDEuNC0uNGgxNi43YS40LjQgMCAwMS4zLjR2Mi40em0wLTYuNGEuNC40IDAgMDEtLjMuNEgzNS4yYS40LjQgMCAwMS0uNC0uNHYtMi4zYS40LjQgMCAwMS40LS40aDE2LjdhLjQuNCAwIDAxLjMuNFYxNXoiLz48L3N2Zz4=);
  /* white */
  content:
    url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MC4xIDQzLjc0Ij48cGF0aCBkPSJNNTUuMDYgMEg0MC41MWExMC43MiAxMC43MiAwIDAgMC0xMC40NiA4LjM2QTEwLjcyIDEwLjcyIDAgMCAwIDE5LjU5IDBINS4wNWE1IDUgMCAwIDAtNSA1djI1LjZhNSA1IDAgMCAwIDUgNWg5LjM0YzEwLjY0IDAgMTMuODIgMi41NiAxNS4zNCA3LjgzYS4yOC4yOCAwIDAgMCAuMjguMjFoLjA2YS4yOC4yOCAwIDAgMCAuMjgtLjIxYzEuNTMtNS4yNyA0LjcxLTcuODMgMTUuMzQtNy44M2g5LjM0YTUgNSAwIDAgMCA1LTVWNWE1IDUgMCAwIDAtNC45Ny01ek0yNS4yNSAyNy42M2EuMzYuMzYgMCAwIDEtLjM2LjM2SDguMTlhLjM2LjM2IDAgMCAxLS4zNi0uMzZ2LTIuMzhhLjM2LjM2IDAgMCAxIC4zNi0uMzZoMTYuN2EuMzYuMzYgMCAwIDEgLjM2LjM2djIuMzh6bTAtNi4zNGEuMzYuMzYgMCAwIDEtLjM2LjM2SDguMTlhLjM2LjM2IDAgMCAxLS4zNi0uMzZ2LTIuMzhhLjM2LjM2IDAgMCAxIC4zNi0uMzZoMTYuN2EuMzYuMzYgMCAwIDEgLjM2LjM2djIuMzh6bTAtNi4zNGEuMzYuMzYgMCAwIDEtLjM2LjM2SDguMTlhLjM2LjM2IDAgMCAxLS4zNi0uMzZ2LTIuMzhhLjM2LjM2IDAgMCAxIC4zNi0uMzZoMTYuN2EuMzYuMzYgMCAwIDEgLjM2LjM2djIuMzh6bTI3IDEyLjY3YS4zNi4zNiAwIDAgMS0uMzYuMzZoLTE2LjdhLjM2LjM2IDAgMCAxLS4zNi0uMzZ2LTIuMzhhLjM2LjM2IDAgMCAxIC4zNi0uMzZoMTYuN2EuMzYuMzYgMCAwIDEgLjM2LjM2djIuMzh6bTAtNi4zNGEuMzYuMzYgMCAwIDEtLjM2LjM2aC0xNi43YS4zNi4zNiAwIDAgMS0uMzYtLjM2VjE4LjlhLjM2LjM2IDAgMCAxIC4zNi0uMzZoMTYuN2EuMzYuMzYgMCAwIDEgLjM2LjM2djIuMzh6bTAtNi4zNGEuMzYuMzYgMCAwIDEtLjM2LjM2aC0xNi43YS4zNi4zNiAwIDAgMS0uMzYtLjM2di0yLjM3YS4zNi4zNiAwIDAgMSAuMzYtLjM2aDE2LjdhLjM2LjM2IDAgMCAxIC4zNi4zNnYyLjM4eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  transform: translateY(.175em);
  margin: 0 .25em 0 0;
}

main[class*=rsg--content][class*=rsg--content] *,
main[class*=rsg--content][class*=rsg--content] h1 > a {
  color: white !important;
}
main[class*=rsg--] article[class*=rsg--] table[class*=rsg--] {
  border-collapse: separate;
  border-spacing: 1.5em 0;
}

main[class*=rsg--] article[class*=rsg--] table[class*=rsg--] thead tr > * {
  border-bottom: 1px solid;
}

main[class*=rsg--] article[class*=rsg--] table[class*=rsg--] tr > * {
  padding: .25em 0;
}

main[class*=rsg--] article[class*=rsg--] table[class*=rsg--] tr > :first-child {
  padding-left: 0;
}

main[class*=rsg--] article[class*=rsg--] table[class*=rsg--] tr > :last-child {
  padding-right: 0;
}

@media {
  #rsg--github-link {
    transition: .3s ease-out;
  }
  #rsg--github-link:not(:hover) {
    opacity: .68 !important
  }
}

@media {
  [class*=rsg--root-][data-testid="section-section-readme-ui"] {
    display: flex !important;
    flex-flow: wrap row;
    justify-content: center;
    margin: 0 auto !important;
    max-width: 25em;
  }

  [class*=rsg--root-][data-testid="section-section-readme-ui"] > * {
    flex: 0 100%;
    justify-content: center;
  }

  [class*=rsg--root-][data-testid="section-section-readme-ui"] * {
    text-align: center !important;
  }

  [class*=rsg--root-][data-testid="section-section-readme-ui"] [class*=rsg--spacing] {
    display: none !important;
  }
}
</style>