Bunny Market Profile

  <div class="dropdown">
    <details>
      <summary>
        <span class="title-text">About Me</span>
        <div class="market-avatar-container">
          <img src="https://i.pinimg.com/1200x/1f/f9/63/1ff96359667e2161364d7454c8f70573.jpg" alt="Market Item" class="market-avatar-img">
        </div>
      </summary>
      <div class="content">
      Replace this with a short introduction about yourself.
      </div>
    </details>
  </div>
   <div class="dropdown">
    <details>
      <summary>
        <span class="title-text">My Favorite...</span>
        <div class="market-avatar-container">
          <img src="https://i.pinimg.com/1200x/1f/f9/63/1ff96359667e2161364d7454c8f70573.jpg" alt="Market Item" class="market-avatar-img">
        </div>
      </summary>
      <div class="content">
   Replace this with a list of your favorite tropes, bots, etc.
      </div>
    </details>
  </div>
  <div class="dropdown">
    <details>
      <summary>
        <span class="title-text">What I Write</span>
        <div class="market-avatar-container">
          <img src="https://i.pinimg.com/1200x/1f/f9/63/1ff96359667e2161364d7454c8f70573.jpg" alt="Market Item" class="market-avatar-img">
        </div>
      </summary>
      <div class="content">
    Replace with a description of what you write.
      </div>
    </details>
  </div>

<div class="friends">
<div class="friends-heading">Friends</div>
<div class="scroll">
<div class="creator-bunny">
  <a href="FRIEND%20PROFILE%20LINK%20HERE">
    <img class="avatar" src="https://ella.janitorai.com/media-approved/s4OVG9i-OA0ROwXy72FL6.webp" alt="Creator">
    <img class="bunny-ears" src="https://freepngimg.com/download/easter/29081-4-easter-bunny-ears-hd.png" alt="">
  </a>
  <div class="creator-title">Friend</div>
</div>
  <div class="creator-bunny">
  <a href="FRIEND%20PROFILE%20LINK%20HERE">
    <img class="avatar" src="https://ella.janitorai.com/media-approved/s4OVG9i-OA0ROwXy72FL6.webp" alt="Creator">
    <img class="bunny-ears" src="https://freepngimg.com/download/easter/29081-4-easter-bunny-ears-hd.png" alt="">
  </a>
  <div class="creator-title">Friend</div>
</div>
  <div class="creator-bunny">
  <a href="FRIEND%20PROFILE%20LINK%20HERE">
    <img class="avatar" src="https://ella.janitorai.com/media-approved/s4OVG9i-OA0ROwXy72FL6.webp">
    <img class="bunny-ears" src="https://freepngimg.com/download/easter/29081-4-easter-bunny-ears-hd.png" alt="">
  </a>
  <div class="creator-title">Friend</div>
      </div>
  <div class="creator-bunny">
  <a href="FRIEND%20PROFILE%20LINK%20HERE">
    <img class="avatar" src="https://ella.janitorai.com/media-approved/s4OVG9i-OA0ROwXy72FL6.webp">
    <img class="bunny-ears" src="https://freepngimg.com/download/easter/29081-4-easter-bunny-ears-hd.png" alt="">
  </a>
  <div class="creator-title">Friend</div>
</div>
</div>

<div class="buttons">
    <a href="discord%20link%20here" class="btn-link"><span class="btn-text">Discord</span></a>
  <a href="kofi%20link%20here" class="btn-link"><span class="btn-text">Kofi</span></a>
  <a href="cardd%20link%20here" class="btn-link"><span class="btn-text">Carrd</span></a>
</div>
</div>
<div class="nyx-credit">
  <a href="https://janitorai.com/profiles/6e6f20ef-c58d-452c-a224-91c2ab3e1364_profile-of-nyxaria-246" rel="noopener">  CSS By Nyx</a>
</div>

<style>
 .nyx-credit a {
  color: #AAC0AA;
   font-family: "Montserrat";
}

.nyx-credit:hover {
  text-decoration: underline;
}

.pp-top-bar {
    background: repeating-linear-gradient(
    45deg,
    #AAC0AA,
    #AAC0AA 25px,
    #fff8eb 25px,
    #fff8eb 50px
  ) !important;

  backdrop-filter: none;
  box-shadow: 0 4px 12px rgba(161, 130, 118, 0.15);
  border-bottom: 4px solid #A18276;
  position: relative;
  overflow: visible !important;
}

.pp-top-bar::after {
  content: "";
  position: absolute;
  bottom: -14px;
  left: 0;
  width: 100%;
  height: 14px;
    background-image: radial-gradient(circle at 50% 0%, #fff8eb 12px, transparent 13px);
  background-size: 24px 14px;
  z-index: 1;
}


.pp-top-bar-title,
.pp-top-bar-logo-name,
.pp-top-bar-create-char {
  color: #A18276 !important;
  font-family: 'Lobster', sans-serif;
  text-shadow: 1px 1px 0px #FCDFA6;
}
.pp-top-bar-logo-sub-name {
display: none;
}

.pp-top-bar-back-button {
  color: #A18276 !important;
}

.pp-top-bar-back-button p {
  display: none;
}

.pp-top-bar-create-char:hover {
  color: #F4B886 !important;
  text-shadow: 1px 1px 0px #A18276;
}

  .glow-on-hover::after {
    opacity: 1;
}
.glow-on-hover::before, .glow-on-hover:after, .glow-on-hover {
    background: none !important;
}


.pp-top-bar-search {
  border-radius: 2rem;
  border: 2px solid #A18276;
  background: #A18276;
}

#search-input {
  font-family: 'Lobster', sans-serif;
  font-size: 1rem;
  color: #FCDFA6 !important;
  caret-color: #F4B886;
  padding-left: 10px;
}

#search-input::placeholder {
  color: #FCDFA6;
  opacity: 0.7;
}

.css-17i40fo {
  z-index: 2;
  box-shadow: none;
}

.pp-top-bar-app-menu img {
  border-radius: 2rem;
  border: 2px solid #A18276;
}


.pp-top-bar-app-menu-list {
  background: #FCDFA6;
  border: 3px solid #A18276;
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(161, 130, 118, 0.15);
}

.pp-top-bar-app-menu-list hr {
  border-color: #A18276;
  opacity: 0.3;
}

.pp-top-bar-app-menu-list-item {
  color: #5b3f34;
  font-family: 'Lobster', sans-serif;
  transition: 200ms ease;
}

.pp-top-bar-app-menu-list-item:hover {
  color: #FCDFA6;
  background: #7c987c;
}


[class*="notificationsButton"] {
  color: #A18276 !important;
  border-radius: 2rem;
  background: transparent;
  transition: all 500ms;
  min-width: 2.3rem;
  min-height: 2.3rem;
  padding: 0rem;
}

[class*="notificationsButton"]:hover {
  background: #7c987c;
  border-color: #AAC0AA;
}


[class*="notificationIcon"] {
  font-size: 1.5rem;
  color: #A18276 !important;
  transition: all 500ms;
}

[class*="notificationsButton"]:hover [class*="notificationIcon"] {
  color: #FCDFA6 !important;
}

[class*="notificationsBadge"] {
  display: flex;
  align-items: center;
  justify-content: center;
  top: 4px;
  right: -8px;
  background: #F4B886;
  color: #A18276;
  font: 300 0.5rem/1 'Lob', serif;
  min-width: .5rem;
  width: .8rem;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: none;
  border: 1px solid #A18276;
  padding: 0 0.2rem;
}

[class*="notificationsPopover_"] {
  background: #FCDFA6;
  max-width: 400px;
  border: 3px solid #A18276;
  animation: all 500ms ease;
}

[class*="notificationsPopover"]::before {
  content: unset;
}

[class*="popoverHeader"] {
  padding: 1rem;
  border-bottom: 2px dashed #A18276;
  background: #AAC0AA;
  box-shadow: unset;
  border-top-left-radius: 0.8rem;
  border-top-right-radius: 0.8rem;
}

[class*="popoverTitle"] {
  font: 2rem/0.7 'Lobster', serif;
  color: #A18276   ;
    text-shadow: 1px 1px 0px #FCDFA6;
}

[class*="headerActions"] button {
  width: 2rem;
  height: 2rem;
  padding: 0.375rem;
  font-size: 1.5rem;
  background: #7c987c;
  border-color: unset;
  box-shadow: unset;
  color: #fdfcf7;
  border: 2px dashed;
  border-radius: 2rem;
  transition: all 500ms;
}

[class*="headerActions"] button:hover {
  background: #fdfcf7;
  color: #7c987c;
  border: 2px solid #0000;
  box-shadow: unset;
}

[class*="_subject_"] {
  font: 600 0.95rem 'Lobster', sans-serif;
  color: #A18276;
}
[class*="_body_"] {
  font: 400 0.85rem/1.4 'Montserrat', sans-serif;
  color: #A18276;
}

[class*="modalWarning_"] {
  color: #dd9e46;
  border: 3px dashed #dd9e46;
  background: rgba(252, 223, 166, 0.5);
  border-radius: 1rem;
  padding: 0.625rem;
  gap: 0.5rem;
  align-items: center;
}


[class*="modalWarningIcon"] {
  margin: 0;
  color: #dd9e46;
  font-size: 1.2rem;
}

[class*="modalWarningText"] {
  color: #ffffff;  }


[class*="modalContent"] [class*="modalFooter"] button[type="button"][class*="modalButton"] {
  height: auto;
  padding: 0.65rem 1.25rem;
  font: 400 1.1rem/1 'Lobster', sans-serif;
  background: #F4B886;
  color: #ffffff;
  border: 2px dashed #A18276;
  border-radius: 1rem;
  transition: all 500ms;
}

[class*="modalContent"] [class*="modalFooter"] button[type="button"][class*="modalButton"]:hover {
  background: #A18276;
  border: 2px dashed #F4B886;
  box-shadow: unset;
  transform: scale(1.02);
}
[class*="unreadIndicator"] {
width: 100%;
    background: radial-gradient(circle at 15rem 50%, #FCDFA6 70%, #F4B886) 200% 200%;
    border: 2px dashed #F4B886;
  box-shadow: unset;
  border-radius: unset;
}
  [class*="timestamp"] {
  font-family: 'Montserrat' !important;
  color: #A18276;
}

  [class*="contentWrapper"]:has([class*="subjectUnread"]) {
    background:  transparent;
  padding: 8px;
    border-radius: 10px;
}

  [class*="unreadIndicator"] {
    background: #EADBC1;
    width: 20px;
    height: 20px;
    z-index: 1;
    transform: rotate(-5deg);

    clip-path: polygon(10% 50%, 40% 40%, 49% 0, 49% 0, 59% 40%, 90% 51%, 90% 50%, 60% 63%, 51% 100%, 51% 100%, 39% 63%, 10% 50%);
}
 [class*="archiveButton"] {
  width: 2rem;
  height: 2rem;
  padding: 0.25rem;
  font-size: 1rem;
  background: #7c987c;
  border-color: unset;
  box-shadow: unset;
  color: #fdfcf7;
  border: 2px solid;
  border-radius: 999px;
  transition: all 500ms;
}

[class*="archiveButton"]:hover {
  background: #fdfcf7;
  color: #7c987c;
  border: 2px solid #0000;
  box-shadow: unset;
  transform: scale(1.05);
}

[class*="archiveSection"] {
  padding: 1rem;
  top: unset;
  bottom: 0;
}
@media only screen and (max-width: 768px),
   only screen and (max-width: 480px) {
  [class*="notificationsPopover"] {
    top: 3rem;
  }
}
[class*="notificationsList"] {
  max-height: 550px;
}

#root [class*="notificationItem"] {
  padding: 0.5rem;
  gap: 0.5rem;
  border-bottom: 1px solid #f5f3fe80;
  align-items: center;
  transition: unset;
}
#root [class*="notificationItem"]:last-child,
#root [class*="notificationItem"]:nth-last-child(2):has(+ [class*="loadMoreWrapper"]) { border-bottom: unset; }

[class*="modalBody"] {
  padding: 1rem;
}
[class*="modalContent"] [class*="modalFooter"] button[type="button"][class*="modalButton"]::first-letter { text-transform: uppercase; }
 [class*="modalTitle"]::first-letter { text-transform: uppercase; }
[class*="modalTitle"]::after { content: "?"; }

[class*="modalFooter"] {
  padding: 0 1rem 1rem 1rem;
  border: unset;
  gap: 0.75rem;
}
[class*="headerActions"] {
  gap: 0.25rem;
}
 [class*="modalContainer"] {
  max-width: 400px;
}

.pp-uc-background {
  box-shadow: none !important;
}

.pp-uc-avatar-container {
  background-color: #e08b69 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
  padding: 10px;
  position: relative;
  border-radius: 60% 60% 80% 15% / 60% 60% 85% 15% !important;
}


.pp-uc-avatar-container img {
  border-radius: 50% 50% 75% 12% / 50% 50% 80% 12% !important;
  box-shadow: none !important;
      border: 2px dashed #A18276;
}


.pp-uc-avatar-container::before {
  content: "🥬";
  position: absolute;
  top: -50px;
  left: 75%;
  font-size: 4rem;
  z-index: 3;
  filter: hue-rotate(30deg) saturate(0.5);
}

.profile-title-heading {
  font-family: 'Lobster';
         font-size: 4rem !important;
      justify-content: center;
      text-align: center !important;
        width: 100% !important;
  color: #ffffff !important;
  font-family: 'Lobster', sans-serif;
  text-shadow: 1px 1px 0px #A18276;


}

  .pp-uc-followers-count {
  color: #87a687;
    padding: -0.5rem;
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pp-uc-followers-count > span + span {
  font-size: 0;
}
.pp-uc-followers-count > span + span::after {
  content: "Bunnies in the Patch";
  font-size: 1rem;
  font-style: normal;
}

.pp-uc-member-since {
    color: #f9eed7;
   font-family: "Montserrat", sans-serif;
  font-size: 1rem;
   padding: -0.5rem;
  line-height: 0.5;
  letter-spacing: 0.08em;
}

@media only screen and (max-width: 768px) {
    .pp-uc-title {
        font-size: 3rem !important;
      justify-content: center;
      text-align: center !important;
        width: 100% !important;
    }

.css-8g8ihq:first-of-type > div:last-of-type {
  position: relative;
  top: 0px;
  left: 15px;
  align-items: center;
  justify-content: center;
}
}

.css-8g8ihq:first-of-type > div:last-of-type {
  position: relative;
 order: -1;
  top: -10px;
}


.pp-uc-options-menu {
    border-radius: 3px !important;
    border: 2px dashed #A18276 !important;
}

  .profile-badges {
  position: relative;
  filter: sepia(1) hue-rotate(50deg) saturate(0.6) brightness(1.1);
  justify-content: center;
  justify-items: center;
  text-align: center;
}

.profile-uc-follow-button {
  background: #F4B886 !important;
  border: 2px dashed #A18276;
}
.profile-uc-follow-text {
  font-size: 0;
  width: auto;
}
.profile-uc-follow-text::after {
  content: "Shop the Market?";
  font-size: 1rem;
  font-family: 'Lobster';
  color: #A18276;
    text-shadow: 1px 1px 0px #ffffff;
}
.profile-uc-follow-button[data-following="true"] .profile-uc-follow-text::after {
  content: "Leave the Market?";
}

.dropdown details {
  border-radius: 1rem;
  background: #ffffff;
    box-shadow: 0 1px 0px #A18276;
}

.dropdown {
  margin: 25px 0;
  width: 100%;
  max-width: 600px;
}
.dropdown summary {
  display: flex;
  align-items: center;
   padding: 12px 24px;
  background-color: #FCDFA6;
    border: 2px solid #A18276;
  border-radius: 12px;

  cursor: pointer;
  list-style: none;
  position: relative;
}
.market-avatar-container:hover {
  transform: translateY(-2px);
}

.dropdown summary::-webkit-details-marker {
  display: none;
}

.title-text {
  font-weight: 700;
  font-size: 1.5rem;
  color: #A18276 !important;
  font-family: 'Lobster', sans-serif;
  text-shadow: 2px 2px 0px #ffffff;
  letter-spacing: 0.5px;
}

.market-avatar-container {
  width: 75px;
  height: 75px;
  border: 3px dashed #A18276;
  border-radius: 50%;
    display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: -12px;
}

.market-avatar-img {
  object-fit: cover;
  border-radius: 50%;}

.content {
  padding: 10px;
  margin-top: 8px;
  border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
  color: #A18276;
  font-size: 1rem;
  line-height: 1.6;
}

.dropdown:nth-child(2n) summary {
  justify-content: flex-start;
  flex-direction: row-reverse;
}

.dropdown:nth-child(2n) .title-text {
  text-align: right;
}

.dropdown:nth-child(2n) .market-avatar-container {
  right: auto;
  left: -10px;
}

.dropdown:nth-child(2n) .content {
  text-align: right;
}

.scroll {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  box-sizing: border-box;
  overflow-x: auto;
  align-content: start;
  margin-bottom: 25px;
}

.scroll::-webkit-scrollbar-thumb {
  background: #FCDFA6;
  border-radius: 10px;
  border: 2px solid #fdfcf7;
}


.friends-heading {
  font-family: 'Lobster';
  font-size: 2em;
  border-bottom: 2px dashed #A18276;
  letter-spacing: 1px;
  color: #fff8eb;
  -webkit-text-stroke: .5px #A18276;
}

.creator-bunny {
  flex: 0 0 auto;
  width: 220px;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  }

.creator-bunny a {
  position: relative;
  width: 200px;
  height: 200px;
  display: block;
    top: 20px;
}

.creator-bunny .bunny-ears {
  position: absolute;
  width: 60%;
  height: 45%;
  left: 15%;
  transform: rotate(5deg);
  top: -45px   !important ;
  z-index: 3;
  pointer-events: none;
}


.creator-bunny:hover, .bunny-ears:hover {
  transform: translate(0px, -10px);
}

.creator-bunny .avatar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 50%;
 border: 3.5px solid #a29281;
  background: #d2b6bd;
  box-shadow: 0 8px 0px rgba(185, 145, 106, 0.2);
  z-index: 2;
 }

.creator-title {
  font-size: 1.5rem;
  text-align: center;
  font-family: 'Lobster', sans-serif;
  -webkit-text-stroke: 0.5px #A18276;
    color: #fdfcf7;
}

.css-0 {
  background: rgba(1, 1, 1, 0) !important;
}

.buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  height: auto;
}

.btn-link {
  text-align: center;
  height: 40px;
  padding: 0 35px;
   background: #AAC0AA;
  color: #ffffff;
  border: 2px dashed #A18276;
  border-radius: 10px;
  text-transform: uppercase;
  font-family: "Montserrat";
    font-weight: bold;
  transition: all 600ms ease;
  position: relative;
  align-content: center;
}
.btn-link:hover {
  transform: translateY(-5px);
  color: #A18276;
}


  .pp-mnb-wrapper {
    background: repeating-linear-gradient(
    45deg,
    #AAC0AA,
    #AAC0AA 25px,
    #fff8eb 25px,
    #fff8eb 50px );
  box-shadow: none;
  border-top: 2px dashed #A18276;
}

  .pp-mnb-item-icon {
  color: #667a66;
}

#profile-tabs::before {
    content: 'Welcome to the Market';
      border-bottom: 2px solid #e08b69;
      font-family: 'Lobster';
  font-size: 3.5rem;
    width: 100%;
    display: block;
  color: #e08b69;
  -webkit-text-stroke: .5px #fff8eb;
    text-shadow: 1px 1px 0px #FCDFA6;

}
  .profile-character-search-input {
     font-family: 'Montserrat';
      border-radius: 5px;
  color: #ffffff;
  caret-color: #AAC0AA;
      border: 2px dashed #AAC0AA ;
}

  .profile-character-search-input,
.profile-character-search-input:is(:hover, :focus) {
  box-shadow: none;
  border: 2px dashed #AAC0AA;
}
.profile-character-search-input::placeholder {
  color: #ffffff;
     font-family: 'Montserrat';
}
.css-1n2in4t svg {
    fill: #ffffff;
}
.pp-fl-filter-button, .pp-fl-filter-button:hover {
  border: 2px dashed #AAC0AA;
  border-radius: 0;
}
.profile-filter-button svg {
  color: #ffffff;
}

#root .react-select__control {
   border: 2px dashed #AAC0AA;
  border-radius: 0px !important;
}
#root .react-select__single-value {
  color: #ffffff;
  font-family: Montserrat;
  font-weight: 500;
}
#root .react-select__indicator-separator {
  display: none;
}
#root .react-select__dropdown-indicator svg {
  color: #ffffff;
  transition: 500ms;
}
#root .react-select__control--menu-is-open svg {
  transform: rotateX(180deg);
}
#root .react-select__menu {
  background: transparent;
  border: 2px dashed #AAC0AA;
  border-bottom: none;
}
#root .react-select__menu-list {
  padding: 0;
}
#root .react-select__option {
  color: #ffffff;
  font-family: Montserrat;
  font-weight: 500;
  border-bottom: 2px dashed #AAC0AA;
}
#root .react-select__option:hover, #root .react-select__option--is-focused {
  background: #FCDFA6;
    color: #6f8b6f;
}
#root .react-select__option--is-selected {
  background: #e1c3ad;
   color: #6f8b6f;
  transition: 500ms;
}
#root ~ *:has(> .profile-filter-modal-modal-overlay) [data-focus-lock-disabled] > * > * {
  background: #AAC0AA;
  border: 3px solid #7b5d51;
  border-radius: 0;
  box-shadow: none;
}

.profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] > * > * > header {
  font-family: 'Lobster';
  font-size: 3rem;
color: #A18276   ;
    text-shadow: 1px 1px 0px #FCDFA6;
}

    .profile-filter-modal-body-tags-flex-box-heading {
      font-family: 'Montserrat';
color: #fff8eb   ;
  }
.profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] > * > * > button {
  border-radius: 50%;
  color: #FCDFA6;
}
.profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] > * > * > button:is(:hover, :focus, :active) {
  background: #EB4C8140;
}
*:has(> [class*="_tagsContainer_"]) {
  margin: 0;
  padding: 0;
  gap: 1rem;
  flex-flow: column;
  align-items: center;
}
[class*="_filterButton_"] {
  display: none;
}

[class*="_expandButton_"] {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  gap: 0.5rem;
  width: auto;
  border-radius: 0;
  border: 2px dashed;
  background: transparent;
  color: #fff8eb;
  transition: background 500ms, color 500ms, border 500ms;
}
[class*="_expandButton_"] *:is(svg, path) {
  stroke: currentColor !important;
}
[class*="_expandButton_"]::before {
  content: "Show All Tags";
  font-family: Montserrat, sans-serif;
  font-size: 1rem;
  font-weight: 500;
}
[class*="_tagsContainer_"]:has([class*="_expanded"]) + [class*="_expandButton_"]::before {
  content: "Hide Tags";
}
[class*="_expandButton_"]:is(:hover, :focus, :active) {
  background: #6f8b6f;
}

[class*="_tagsContainer_"] {
  width: 100%;
  padding: 0.5rem;
   border-radius: 0;
  transition: border-radius 500ms;
}
[class*="_gradientLeft_"] {
   background: transparent;
}
[class*="_gradientRight_"] {
  right: 0 !important;
  background: transparent;
}
[class*="_collapsedContainer_"][class*="_expanded_"] {
  justify-content: center;
}
[class*="_collapsedContainer_"] [class*="_motionDiv_"] { margin: 0; }

[class*="_navigationButton"] {
  padding: 0;
  border-radius: 50%;
  background: #fff8eb;
  border: 1px solid;
  color: #6f8b6f;
  transition: background 500ms, color 500ms, border 500ms;
}

[class*="_navigationButton"] path { opacity: 1; stroke: currentColor; }
[class*="_navigationButton"] svg { position: relative; top: -1px; }
[class*="_navigationButtonLeft"] svg { left: -2px; }
[class*="_navigationButton"]:is(:hover, :focus, :active) {
  background: #FCDFA6;
}

[class*="_collapsedContainer_"] [class*="_tag_"] {
  border: 2px dashed #fff8eb;
  display: inline-block;
  font-size: 0;
  border-radius: 50%;
  transition: 500ms;
}
[class*="_collapsedContainer_"] [class*="_tag_"]::first-letter {
  font-size: 0.9rem;
}
[class*="_collapsedContainer_"] [class*="_tagSelected_"] {
  background: #6f8b6f;
  box-shadow: unset !important;
}
[class*="_collapsedContainer_"] [class*="_tag_"]:not([class*="_tagSelected_"]):hover {
  background: #FCDFA6;
}
[class*="_collapsedContainer_"] [class*="_tag_"]:active {
  transform: scale(0.95);
}
[class*="_motionDiv_"][class*="_divider_"] {
  color: #6f8b6f;
}
.profile-badge-flex-outer {
  color: #fff8eb ;
  box-shadow: none;
  text-shadow: none;
  border: 2px dashed #A18276 ;
    background: #fff6e5;
  border-radius: 5px;
    font-family: 'Montserrat';
}
.profile-badge-flex-outer:before {
  display: none;
}
.profile-badge-flex-outer:hover {
  text-shadow: none;
}

 .pp-pg-total p {
    font-size: 0;
    width: 100%;
    text-align: center;
    font-family: 'Montserrat';
}
.Btn2-purple strong {
    font-family: 'Montserrat';
    color: #A18276;
}

.pp-pg-total p:after {
    content: "produce for sale";
    font-weight: bold;
    color: #A18276;
    width: 100%;
    font-size: .9rem;
}


.pp-tabs-wrapper, .pp-tabs-button, .pp-tabs-indicator {
  visibility: hidden;
}

div:has(> .css-1s5evre),
div:has(~ .css-1s5evre) {
  background: transparent !important;
}

.css-0, .css-1henxb, .css-effh3d {
  background: transparent !important;
}

.pp-cc-wrapper:hover {
  transform: scale(1.03) rotate(-0.5deg);
   box-shadow: none;
}

  @media screen and (max-width: 365px) {

  }
.pp-cc-list-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 2rem;
}

.pp-cc-wrapper {
  flex: 0 1 400px;
  margin: 10px;
  width: 320px;
  height: 310px;
  overflow: visible;
  transition: all 500ms ease;
  background: transparent !important;

}
.css-13wmn96:has(.css-nip9dx ){
  background: transparent !important;
  }

.css-1s5evre {
    overflow: visible;
  display: grid;
    grid-template-columns: 45% 55%;
  grid-template-rows: 160px 90px;
  position: relative;
  gap: 0rem;
  background: #d5bdaa;
  background-image:
   linear-gradient(90deg, rgba(205, 185, 167, 0.4) 50%, transparent 50%),
    linear-gradient(rgba(236, 226, 218, 0.4) 50%, transparent 50%);
  background-size: 16px 16px;
   border-radius: 12px 12px 60px 60px;
  border: 5px solid #70553e;
  padding: 10px;
  margin-top: 20px;
  height: 290px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}


.css-1s5evre:before {
  content: "";
  position: absolute;
  inset: 6px;
 border-radius: 12px 12px 60px 60px;
  border: 2px dashed #b5a48c;
  z-index: 0;

}


.css-1s5evre:after {
  content: "";
  position: absolute;
  inset: 15px;
  border-radius: 12px;
  border: 1px dashed #b5a48c60;
  z-index: 0;
  left: 45%;
}


.css-1q7rmf0 {
  grid-area: 1 / 1 / 2 / 2;
  position: relative;
  overflow: visible;
  margin: 8px;
  z-index: 2;
}

.pp-cc-avatar {
  border-radius: 12px;
  border: 3px solid #b5a48c;
  object-position: 0 30%;
}

.css-nlxhw4 {
  position: absolute;
  top: -50px;
  height: 55px;
  left: 20%;
  width: 60%;
  border-radius: 50% 50% 0 0;
  border-top: 14px solid #70553e;
  border-left: 14px solid #70553e;
  border-right: 14px solid #70553e;
  border-bottom: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  box-shadow: none;
}

.css-nlxhw4 > div {
  background: #9bb0a5;
  border: 2px solid #789787;
  border-radius: 5px;
  top: 10px;
  padding: 3px 12px;
  white-space: nowrap;
  font-size: 1.2rem;
  font-weight: 700;
  z-index: 4;
  position: relative;
  color: #fff8eb;
  font-family: Montserrat, sans-serif;
}


.css-nlxhw4::before {
  content: "🥕";
  position: absolute;
  top: -50px;
  left: 180px;
  font-size: 100px;
  z-index: -1;
  filter: hue-rotate(40deg) saturate(0.) brightness(0.9);
  pointer-events: none;
}

.profile-character-card-description-box:before {
  content: "Fresh Produce";
  color: #8c6d53;
  font-family: 'Petit Formal Script', serif;
  font-weight: bold;
  letter-spacing: 0px;
  border-radius: 20px;
  font-size: .85em;
  border: 1.5px dashed #b5a48c;
  padding: 0 12px;
  background: #fff8eb;
}

.profile-character-card-description-box {
  grid-area: 1 / 2 / 2 / 3;
  padding-top: 15px;
  z-index: 2;
}

.pp-cc-description {
  max-height: 120px;
  height: 100%;
  overflow: visible;
  padding: 8px;
  margin-bottom: 5px;
}


.profile-character-card-description-box:after {
  content: "Locally Grown";
  color: #8c6d53;
  font-family: 'Petit Formal Script', serif;
  font-weight: bold;
  letter-spacing: 0px;
  border-radius: 20px;
  font-size: .85em;
  border: 1.5px dashed #b5a48c;
  padding: 0 12px;
  background: #fff8eb;
}


.pp-cc-tags {
  grid-area: 2 / 1 / 3 / 2;
  height: 100%;
  max-height: 90px;
  z-index: 2;
  margin: 5px;
}

.css-1s5evre * {
  color: #70553e;
  font-family: Montserrat, sans-serif;
}
.profile-character-card-tags {
  overflow-y: auto;
}
.profile-character-card-tags ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.profile-character-card-tags li {
  width: auto;
  flex: 0 0 auto;
}
.pp-cc-tags-regular, .pp-cc-tags-custom {
  border: 1px solid #c9bca7;
  border-radius: 8px;
  color: #8c6d53;
  background: #fff;
  font-size: .75em;
  padding: 2px 6px;
  transition: 300ms ease;
}

.pp-cc-tags-regular:hover, .pp-cc-tags-custom:hover {
  background: #9bb0a530;
  border: 1px solid #9bb0a5;
  color: #4a5c51;
}
.pp-cc-description p:not(:first-child), .pp-cc-description hr {
  display: none;
}

  .pp-cc-description * {
  color: #8c6d53 !important;
  background: transparent !important;
  line-height: 1.2 !important;
  font-size: 0.8rem;

}


.css-123m5uu {
  margin: 0;
  flex: 1 1 100%;
}
  .pp-cc-ribbon-wrap {
      clip-path: unset;
    background:none;
      box-shadow: none;
  }


.pp-tag-limitless {
  background: #9bb0a5;
  border: 2px solid #8ba195;
  border-radius: 20px;
  width: 100%;
  padding: 2px 0;
  color: #fff8eb;
  font-family: 'Petit Formal Script', serif !important;
  font-weight: bold;
  font-size: 0.9rem;
  transition: all 400ms ease;
}

.pp-tag-limitless:hover {
  background: #8ba195;
  color: #fff;
}

.pp-tag-limitless {
  font-size: 0 !important;
}
.pp-tag-limitless::before {
  content: "Fresh Picked";
  font-size: 0.85rem;
}
.pp-tag-limitless:hover::before {
  content: "Take Me Home?";
}


.profile-character-card-stats-box, .pp-cc-ribbon {
  justify-content: center;
  top: -12px;
  width: 100%;
  height: 100%;
  z-index: 5;
}
.pp-cc-chats {
  position: absolute;
  left: 1px;
  z-index: 5;
  background: #fff8eb;
  border: 2px solid #b5a48c;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pp-cc-star-line {
visibility: hidden;
}


.css-1c9wmts {
visibility: hidden;
}


.css-1uodvt1 {
  padding-top: 0px;
  flex-direction: column;
  justify-items: center;
  text-align: center;
}

.pp-pg-prev-button svg,
.pp-pg-next-button svg{
 font-size: 1rem;
  color: #AAC0AA;
}
</style>