<h1>Mooana's Potential Matches</h1>
<div class="profiles bestmatch">
  <zombie-profile class="high">
    <img slot="profile-image" src="https://assets.codepen.io/1804713/leroy.png" />
    <span slot="zombie-name">Leroy</span>
    <span slot="z-age">29</span>
    <span slot="idate">March 1, 2026</span>
    <ul slot="z-interests">
      <li>disco</li>
      <li>leisure suits</li>
      <li>brains</li>
    </ul>
    <span slot="statement">Disco daddy who won't stop dancing your heart away.</span>
  </zombie-profile>

  <zombie-profile class="high">
    <img slot="profile-image" src="https://assets.codepen.io/1804713/ahabcshanty.png" />
    <span slot="zombie-name">A. C. Shanty</span>
    <span slot="z-age">41</span>
    <span slot="idate">November 7, 2026</span>
    <ul slot="z-interests">
      <li>sea shanties</li>
      <li>reality tv</li>
      <li>brains</li>
      <li>more brains</li>
    </ul>
    <span slot="statement">What's a pirate's favorite letter?<br>Rrrrrrr!<br>Aye! But his first love be the C</span>
  </zombie-profile>
</div>
<div class="profiles worstmatch">
  <zombie-profile class="medium">
    <img slot="profile-image" src="https://assets.codepen.io/1804713/phil.png" />
    <span slot="zombie-name">Phil</span>
    <span slot="z-age">31</span>
    <span slot="idate">December 22, 2025</span>
    <ul slot="z-interests">
      <li>brains</li>
      <li>selfies</li>
    </ul>
    <span slot="statement">I'm out of this world! You know... because of the spacesuit... get it?</span>
  </zombie-profile>

  <zombie-profile class="low">
  </zombie-profile>
</div>
<template id="zprofiletemplate">
  <style>
    img,
    ::slotted(img) {
      width: 100%;
      max-width: 300px;
      height: auto;
      margin: 0 1em 0 0;
    }

    h2 {
      font-size: 3em;
      margin: 0 0 0.25em 0;
      line-height: 0.8;
      transform-origin: center;
      display: inline-block;
    }

    h3 {
      margin: 0.5em 0 0 0;
      font-weight: normal;
    }

    .age,
    .infection-date {
      display: block;
      clear: both;
    }

    span {
      line-height: 1.4;
    }

    .label {
      color: #555;
    }

    li,
    ul,
    ::slotted(ul) {
      display: inline;
      padding: 0;
    }

    li::after {
      content: ', ';
    }

    li:last-child::after {
      content: '';
    }

    li:last-child::before {
      content: ' and ';
    }

    :host {
      width: calc(50% - 1em);
      border: 1px solid red;
      padding: 1em;
      margin-bottom: 2em;
      display: grid;
      grid-template-columns: 2fr 4fr;
      column-gap: 20px;
      overflow: hidden;
      position: relative;
    }

    :host(.high) {
      border: 2px solid blue;
    }

    :host-context(.bestmatch) {
      background-color: #EEF;
    }

    :host-context(.worstmatch) {
      background-color: #DDD;
    }
  </style>
  <div class="profilepic" part="photo">
    <slot name="profile-image"><img src="https://assets.codepen.io/1804713/default.png" alt=""></slot>
  </div>
  <div class="info">
    <h2 part="name">
      <slot name="zombie-name" part="zname">Zombie Bob</slot>
    </h2>
    <span class="age"><span class="label">Age:</span>
      <slot name="z-age">37</slot>
    </span>
    <span class="infection-date"><span class="label">Infection Date:</span>
      <slot name="idate">September 12, 2025</slot>
    </span>
    <div class="interests">
      <span class="label">Interests: </span>
      <slot name="z-interests">
        <ul>
          <li>Long Walks on Beach</li>
          <li>brains</li>
          <li>defeating humanity</li>
        </ul>
      </slot>
    </div>
    <span class="z-statement"><span class="label">Apocalyptic Statement: </span>
      <slot name="statement">Moooooooan!</slot>
    </span>
</template>

.high::part(name) {
  color: blue;
}
.medium::part(name) {
  color: navy;
}
.low::part(name) {
  color: slategray;
}
.high::part(name):hover {
  animation: highmatch 1s ease-in-out;
}

@keyframes highmatch {
  0%,
  100% {
    transform: rotate(0) scale(1);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: rotate(6deg) scale(1.05);
  }
  20%,
  40%,
  60%,
  80% {
    transform: rotate(-6deg) scale(1.05);
  }
}

@import url("https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,300;0,700;1,300&display=swap");
* {
  box-sizing: border-box;
}
body {
  font-family: "Libre Franklin", sans-serif;
}
h1 {
  text-align: center;
}
.profiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  width: 80%;
  margin: auto;
}
.profiles > :nth-child(odd) {
  margin-right: 2em;
}

zombie-profile li {
  display: inline;
  padding: 0;
}
zombie-profile li::after {
  content: ", ";
}
zombie-profile li:last-child::after {
  content: "";
}
zombie-profile li:last-child::before {
  content: " and ";
}

@media screen and (max-width: 1000px) {
  .profiles {
    width: 100%;
  }
}
@media screen and (max-width: 700px) {
  zombie-profile {
    width: 100%;
  }
  .profiles > :nth-child(odd) {
    margin-right: 0;
  }
}

customElements.define(
  "zombie-profile",
  class extends HTMLElement {
    constructor() {
      super();
      let profile = document.getElementById("zprofiletemplate");
      let myprofile = profile.content;

      const shadowRoot = this.attachShadow({ mode: "open" }).appendChild(
        myprofile.cloneNode(true)
      );
    }
  }
);