<h1>Mooana's Potential Matches</h1>
<div class="profiles">
  <zombie-profile class="high-match">
    <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="medium-match">
    <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="high-match">
    <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>
  <zombie-profile class="low-match">
  </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;
    }

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

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

    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 ';
    }

    .profile-wrapper {
      border: 1px solid red;
      padding: 1em;
      margin-bottom: 2em;
      display: grid;
      grid-template-columns: 2fr 4fr;
      column-gap: 20px;
      overflow: hidden;
      position: relative;
    }
  </style>
  <div class="profile-wrapper">
    <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="zname">
        <slot name="zombie-name">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>
    </div>
</template>

.high-match::part(zname) {
  color: blue;
}
.medium-match::part(zname) {
  color: navy;
}
.low-match::part(zname) {
  color: slategray;
}
.high-match::part(zname):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 {
  width: calc(50% - 1em);
}

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)
      );
    }
  }
);