customElements.define('info-card', class extends HTMLElement {

  constructor() {

    super()

    this.attachShadow({ mode: 'open' })

    this.shadowRoot.innerHTML = /* html */ `

    <div class="wrapper">

      <img class="avatar" src="https://gravatar.com/avatar/c8288b14c875abb75c7c82d7785d7545?size=120" alt="avatar">

      <div class="name">

        秋サンマ

      </div>

      <a href="https://blog.autumnsaury.com">My Blog</a>

      <span>

        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique est dignissimos unde esse illo iusto nulla!

        Omnis provident voluptas laudantium inventore corporis! Exercitationem, minima aperiam sequi eos expedita accusamus

        officiis?

      </span>

    </div>

    <style>

      :host {

        display: block;

        width: 300px;

        height: 300px;

        border-radius: 10px;

        box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.14) , 0px 3px 1px -2px rgba(0,0,0,0.12) , 0px 1px 5px 0px rgba(0,0,0,0.2);

      }

​

      .wrapper {

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: space-between;

        position: relative;

​

        width: calc(100% - 2rem);

        height: calc(100% - 2rem);

​

        padding: 1rem;

​

        border-radius: 10px;

        font-size: 14px;

​

        --title-color: black;

        --content-color: gray;

        --link-color: dodgerblue;

        background-color: white;

        transition: 1s;

      }

​

      .wrapper__dark {

        --title-color: lightgray;

        --content-color: lightgray;

        --link-color: lightskyblue;

        background-color: #333;

      }

​

      .avatar {

        width: 120px;

        height: 120px;

        border-radius: 50%;

        object-fit: cover;

      }

​

      .name {

        font-size: 1.5rem;

        font-weight: bold;

        color: var(--title-color);

      }

​

      a {

        text-decoration: none;

        color: var(--link-color);

        font-weight: bold;

      }

​

      span {

        display: block;

        font-size: 12px;

        color: var(--content-color);

​

        text-indent: 2em;

      }

    </style>

    `

  }

})