<section class="yael-status">
  <h2>STATUS</h2>
  <div class="yael-status-inner">
   <p>Hi this is your status area!
     lorem ipsum dolor sit amet consectetur adipiscing elit excepteur anim id excepteur fugiat minus qui labore mollit in dolore accusamus qui id ea optio nisi quas pariatur et quo cum animi dolor dolor non iusto fugiat assumenda incididunt at eligendi dolor magna nostrud consectetur culpa repellendus adipiscing consequat dolor facilis
   </p>
  </div>
  </section>

<section class="yael-links">
  <a href="#">
  <div class="potion-link-upper">
    <div class="potion-link-bottom">
      <img src="https://www.svgrepo.com/show/506463/discord.svg">
  </div>
    </div>
    </a>
   <a href="#">
  <div class="potion-link-upper">
    <div class="potion-link-bottom">
      <img src="https://www.svgrepo.com/show/508884/pinterest.svg">
  </div>
    </div>
   </a>
   <a href="#">
  <div class="potion-link-upper">
    <div class="potion-link-bottom">
      <img src="https://www.svgrepo.com/show/330802/kofi.svg">
  </div>
    </div>
   </a>
</section>

<section class="yael-dropdowns">
        <nav class="yael-list">
          <details class="yael-dropdown" name="yael-menu">
        <summary class="yael-dropdown-text">
          <span class="yael-dropdown-summary">DROPDOWN</span>
        </summary>
        <div class="yael-dropdown-content">
           Lorem ipsum dolor sit amet consectetur adipiscing elit excepteur anim id excepteur fugiat minus qui labore mollit in dolore accusamus qui id ea optio nisi quas pariatur et quo cum animi dolor dolor non iusto fugiat assumenda incididunt at eligendi dolor.
        </div>
      </details>
         <details class="yael-dropdown" name="yael-menu">
        <summary class="yael-dropdown-text">
          <span class="yael-dropdown-summary">DROPDOWN</span>
        </summary>
        <div class="yael-dropdown-content">
           Lorem ipsum dolor sit amet consectetur adipiscing elit excepteur anim id excepteur fugiat minus qui labore mollit in dolore accusamus qui id ea optio nisi quas pariatur et quo cum animi dolor dolor non iusto fugiat assumenda incididunt at eligendi dolor.
        </div>
      </details>
          <details class="yael-dropdown" name="yael-menu">
        <summary class="yael-dropdown-text">
          <span class="yael-dropdown-summary">DROPDOWN</span>
        </summary>
        <div class="yael-dropdown-content">
           Lorem ipsum dolor sit amet consectetur adipiscing elit excepteur anim id excepteur fugiat minus qui labore mollit in dolore accusamus qui id ea optio nisi quas pariatur et quo cum animi dolor dolor non iusto fugiat assumenda incididunt at eligendi dolor.
        </div>
      </details>
          <details class="yael-dropdown" name="yael-menu">
        <summary class="yael-dropdown-text">
          <span class="yael-dropdown-summary">DROPDOWN</span>
        </summary>
        <div class="yael-dropdown-content">
          Lorem ipsum dolor sit amet consectetur adipiscing elit excepteur anim id excepteur fugiat minus qui labore mollit in dolore accusamus qui id ea optio nisi quas pariatur et quo cum animi dolor dolor non iusto fugiat assumenda incididunt at eligendi dolor.
        </div>
      </details>
        </nav>
</section>
<section class="yael-friends">
  <a href="#">
 <div class="yael-friend">
   <img src="https://ella.janitorai.com/media-approved/Ac71QtxUQFQeUjbvvSKjg.webp">
   <div class="friend-desc">
     <h2>FRIEND NAME</h2>
     <p> This is your friend's description! Write whatever you wanna say about them !!</p>
 </div>
 </div>
   </a>
   <a href="#">
 <div class="yael-friend">
   <img src="https://ella.janitorai.com/media-approved/Ac71QtxUQFQeUjbvvSKjg.webp">
   <div class="friend-desc">
     <h2>FRIEND NAME</h2>
     <p> This is your friend's description! Write whatever you wanna say about them !!</p>
 </div>
 </div>
   </a>
     <a href="#">
 <div class="yael-friend">
   <img src="https://ella.janitorai.com/media-approved/Ac71QtxUQFQeUjbvvSKjg.webp">
   <div class="friend-desc">
     <h2>FRIEND NAME</h2>
     <p> This is your friend's description! Write whatever you wanna say about them !!</p>
 </div>
 </div>
   </a>
  <a href="#">
 <div class="yael-friend">
   <img src="https://ella.janitorai.com/media-approved/Ac71QtxUQFQeUjbvvSKjg.webp">
   <div class="friend-desc">
     <h2>FRIEND NAME</h2>
     <p> This is your friend's description! Write whatever you wanna say about them !!</p>
 </div>
 </div>
   </a>
  <a href="#">
 <div class="yael-friend">
   <img src="https://ella.janitorai.com/media-approved/Ac71QtxUQFQeUjbvvSKjg.webp">
   <div class="friend-desc">
     <h2>FRIEND NAME</h2>
     <p> This is your friend's description! Write whatever you wanna say about them !!</p>
 </div>
 </div>
   </a>
  <a href="#">
 <div class="yael-friend">
   <img src="https://ella.janitorai.com/media-approved/Ac71QtxUQFQeUjbvvSKjg.webp">
   <div class="friend-desc">
     <h2>FRIEND NAME</h2>
     <p> This is your friend's description! Write whatever you wanna say about them !!</p>
 </div>
 </div>
   </a>
  <a href="#">
 <div class="yael-friend">
   <img src="https://ella.janitorai.com/media-approved/Ac71QtxUQFQeUjbvvSKjg.webp">
   <div class="friend-desc">
     <h2>FRIEND NAME</h2>
     <p> This is your friend's description! Write whatever you wanna say about them !!</p>
 </div>
 </div>
   </a>
  <a href="#">
 <div class="yael-friend">
   <img src="https://ella.janitorai.com/media-approved/Ac71QtxUQFQeUjbvvSKjg.webp">
   <div class="friend-desc">
     <h2>FRIEND NAME</h2>
     <p> This is your friend's description! Write whatever you wanna say about them !!</p>
 </div>
 </div>
   </a>
  <a href="#">
 <div class="yael-friend">
   <img src="https://ella.janitorai.com/media-approved/Ac71QtxUQFQeUjbvvSKjg.webp">
   <div class="friend-desc">
     <h2>FRIEND NAME</h2>
     <p> This is your friend's description! Write whatever you wanna say about them !!</p>
 </div>
 </div>
   </a>
</section>

<div class="yael-banner">
  <img src="https://ella.janitorai.com/media-approved/gwcS8NbuHz3csvpoTVMXC.webp">
</div>

<div class="yael-sona">
  <img src="https://ella.janitorai.com/media-approved/Ac71QtxUQFQeUjbvvSKjg.webp">
</div>

<div class="yael-bat">
  <img src="https://ella.janitorai.com/media-approved/xkiGIozGY7fNaT0SBMGLP.webp">
</div>


<style>
  /* ============================== */
  /* GENERAL PAGE FIXES */
  /* Main page background, lowering the brightness by just a bit due to personal preference LOL */
  .pp-page-background {
    filter: brightness(0.7);
  }

  /* putting bots underneath the profile page on PC */
  .profile-page-flex {
    flex-direction: column;
    align-items: center;
  }
  /* removing some side padding */
  [class*="main"] { 
    padding: 0;
  }
  /* tooltips */
  .css-jdhqy4 > div {
    background: #24132c;
    border-radius: 0;
    font-family: 'fraunces';
    color: #fff; box-shadow: none;
    outline: 1px solid #eecdef;
    outline-offset: -5px;
    padding: 10px;
  }
  /* for selected/highlighted items */
  ::selection {
    background: #eecdefaa;
    color: #000;
  }
  /* ============================== */
  /* PC HEADER */
/* PC and mobile header styling */
  .pp-top-bar, .pp-mnb-container {
    background: #000;
    box-shadow: none;
    outline: 2px solid #24132c;
    outline-offset: -5px;
    flex-direction: row-reverse; /* putting them all at the end */
    display: flex; 
  }
  .pp-top-bar-tabs a{ /* changing the header text name */
    font-size: 0;
  }
  .pp-top-bar-tabs a:before {
    content: 'HAPPY HALLOWEEN!'; /* new header name */
    font-size: 1.85rem;
    font-family: 'lacquer';
    color: #eedcef;
    transition: all 0.25s;
  }
  .pp-top-bar-tabs a:hover:before {
    color: #59438d;
  }
.profile-top-bar-search-wrapper { /* putting the search bar before the notifications, user menu icon, and logo text */
  order: 1;
}
   /* ============================== */
  /* PC SEARCH BAR */
  .pp-top-bar-search { /* PC header styling */
    background: #59438d;
    font-family: 'fraunces';
    color: #eedcef;
    padding: 0 50px;
    outline: 1px solid #24132c;
    outline-offset: -2px;
  }
  [class*="searchIcon"] /* the magnifying glass icon */
  { opacity: 1; 
    color: #59438d;
  }
  .pp-top-bar-search-icon { /* background of the magnifying glass icon */
    background: #eedcef;
    border-radius: 10px 0 0 10px;
  }
  .pp-top-bar-search-shortcut { /* cmd K shortcut button */
    background: #ba7e94;
    font-family: 'fraunces';
    color: #24132c;
  }
   /* ============================== */
  /* USER MENU */
  .pp-top-bar-app-menu img { /* user menu image */
    border-radius: 0;
    border: 1px solid #eedcef;
    aspect-ratio: 1;
  }
  .pp-top-bar-app-menu-list { /* user menu bg */
    transform: unset !important;
    background: #ba7e94;
    box-shadow: none;
    border-radius: 0;
    border: 1px solid #eedcef;
  }
  .pp-top-bar-app-menu-list a { /* the actual user menu options */
    font-family: 'fraunces';
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    outline: 1px solid #eedcef;
    outline-offset: -3px;
  }
  .pp-top-bar-app-menu-list a:hover { /* changing backgrounds on hover */
    background: #723d51;
  }
   /* ============================== */
  /* NOTIFICATIONS MENU */
 .pp-top-bar-notifications-badge { /* notifications number, making it big enough to cover the icon so there's emphasis on it */
   aspect-ratio: 1;
   width: 35px;
   padding: 2px;
   align-content: center;
   background: #eedcef;
   border-radius: 50% 50% 0 0; /* making it look like a tombstone #thiswastotallynotintentionalandtotallydidntbullshitthisandendedupliking it */
   border: 4px double #24132c;
   color: #24132c;
   font-family: 'lacquer';
   box-shadow: none;
   white-space: nowrap;
 }
  .pp-top-bar-notifications-button:is(:hover, :active) { /* removing the transparent bg on hover and click */
    background: #0000;
  } 
  .pp-top-bar-notifications-popover { /* main container for the notifications menu */
    background: #59438d;
    border-radius: 0;
    box-shadow: none;
    transform: none !important;
  }
  .pp-top-bar-notifications-popover:before { content: unset;} /* removing that stupid FUCKING gradient */
  .pp-top-bar-notifications-popover-header { /* notifications header portion */
    background: #000;
    padding: 0 10px;
  }
  .pp-top-bar-notifications-popover-title { /* header title */
    font-family: 'pirata one';
    color: #eedcef;
    font-size: 0;
    position: relative;
  }
  .pp-top-bar-notifications-popover-title:before {
    content: 'Spooky mail!'; /* changing header title */
    font-size: 1.85rem;
  }
  .pp-top-bar-notifications-popover-title:after {
    content: 'boo!'; /* small text for aesthetic purposes I lowkenuinely have 0 idea either */
    font-size: 1.5rem;
    color: #59438d;
    position: absolute;
    font-family: 'lacquer';
    right: 20px;
    top: 15px;
    text-shadow: 2px 2px 5px #000;
  }
  .pp-top-bar-notifications-popover-actions button, .pp-top-bar-notifications-item-archive { /* header buttons + archive button styling because I'm a lazy chud OKAY I GET IT */
    background: #eedcef;
    border-radius: 5px;
    color: #59438d;
  }
  .pp-top-bar-notifications-popover-actions button:hover, .pp-top-bar-notifications-item-archive:hover { /* changing their backgrounds on hover */
    background: #ba7e94;
    box-shadow: none;
    border: 0;
    color: #000;
  }
  .pp-top-bar-notifications-item:nth-of-type(even){ /* for all even notifications, they reverse contents */
    flex-direction: row-reverse;
  }
  .pp-top-bar-notifications-item { /* putting a border on top of each notification item */
    border-top: 4px double #24132c;
  }
  .pp-top-bar-notifications-item-avatar { /* bot pic */
    aspect-ratio: 1;
    width: 150px;
  }
  .pp-top-bar-notifications-item-avatar img{ /* also bot pic */
  box-shadow: none !important;
    border: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: 1px solid #eecdef;
    transform: none !important;
  }
  .pp-top-bar-notifications-item-content-wrapper { /* notifications content wrapper */
    background: #24132c !important;
    border-radius: 0 0 20px 20px;
  }
  .pp-top-bar-notifications-item-content-wrapper * { /* targetting all elements under the content wrapper and changing all their fonts and colors too I GUESS */
    font-family: 'fraunces';
    color: #fff;
    font-weight: normal;
  }
  [class*="highlight"] { /* targetting all elements with the class "highlight" in them in the notifications */
    background: #eecdef;
    border-radius: 20px;
    color: #24132c;
    padding: 0 5px;
    font-family: 'pirata one';
  }
  .pp-top-bar-notifications-item-unread { /* unread indicator */
    background: #fff;
    box-shadow: none;
    border-radius: 0;
    width: 10px;
  }
  .pp-top-bar-notifications-item:nth-of-type(even) .pp-top-bar-notifications-item-unread{ /* putting unread indicator on the right for even notifications */
   left: unset;
  }
   /* ============================== */
  /* PROFILE PAGE */
  /* removing stuff from their layout and making my life easier */
  .profile-info-hstack, .pp-uc-about-me, .css-0, .profile-character-card-stack a, .profile-info-stack-inner, .pp-uc-options-menu svg {
    display: contents;
  }
  .pp-uc-background, .pp-uc-background >* { /* removing background layers and overriding annoying stuff */
    background: #0000 !important;
    box-shadow: none !important;
  }
/* making the profile page loooong */
  .pp-uc-background {
    max-width: 1500px;
    width: 100%;
    padding: 0;
  }
  /* setting up the grid !! */
  .profile-info-stack {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: 1fr 1fr;
  gap: 0;
}


  /* my trashcan lel */
  .pp-uc-avatar-container, .pp-uc-member-since, .pp-uc-member-since ~ button, .pp-uc-follow-button:before, .pp-top-bar-logo img, .profile-top-bar-logo-box, a[href^="/plus"], .pp-top-bar-create-char, .pp-top-bar-notifications-view-all, .pp-cc-star, .pp-cc-star-line, .pp-cc-creator-name, .profile-character-card-box ~ div, summary::-webkit-details-marker,.pp-cc-description p:not(:first-child), .pp-cc-description hr, .profile-character-card-box, .pp-tabs-wrapper, [class*="gradientRight"], .pp-fl-tags-scroll-right, .pp-fl-tags-expand, .pp-cc-creator-name span, .pp-top-bar-title, footer{ display: none;}

  .yael-sona { /* the main sona image */
    grid-area: 1/1/4/3;
    aspect-ratio: 1/1.5;
    max-width: 350px;
    position: relative;
    justify-self: center;
    z-index: 1;
    padding: 10px;
     filter: drop-shadow(4px 0 #24132c);
  }
  .yael-sona:before { /* coffin behind the sona image */
    content: '';
    position: absolute;
    inset: -10px -10px 10px;
    clip-path: polygon(
    30% 0%,  
    70% 0%,  
    100% 20%,
    85% 100%, 
    15% 100%, 
    0% 20%   
  );
     background: linear-gradient(to top, #59438d 350px, #723d51 420px, #24132c 450px);
    z-index: -1;
  }
  .yael-sona:after { /* the inner coffin */
    content: '';
    position: absolute;
    inset: 15px;
    clip-path: polygon(
    30% 0%,  
    70% 0%,  
    100% 20%,
    85% 100%, 
    15% 100%, 
    0% 20%   
  );
     background: linear-gradient(#24132c, #0000); /* fading at the bottom effect, if you want to change the color, chage #24132c */
    z-index: -1;
  }
  .yael-sona img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 5px;
    position: relative;
    bottom: -10px;
    filter: drop-shadow(4px 3px #24132c); /* adding some shadows on the sona image so it doesn't look flat idk */
  }
  .profile-info-stack-inner-flex { /* username container */
     grid-area: 1/1/3/3;
    z-index: 3;
    align-self: start;
    justify-self: center;
    margin: unset;
    overflow: visible;
  }

  .pp-uc-title {
    font-family: 'pirata one';
    font-size: 0;
    position: relative;
    top: -10px;
    overflow: visible;
    color: #fff;
    text-shadow: #000 2px 0px 0px, #000 1.75517px 0.958851px 0px, #000 1.0806px 1.68294px 0px, #000 0.141474px 1.99499px 0px, #000 -0.832294px 1.81859px 0px, #000 -1.60229px 1.19694px 0px, #000 -1.97998px 0.28224px 0px, #000 -1.87291px -0.701566px 0px, #000 -1.30729px -1.5136px 0px, #000 -0.421592px -1.95506px 0px, #000 0.567324px -1.91785px 0px, #000 1.41734px -1.41108px 0px, #000 1.92034px -0.558831px 0px, #723d51 0 0 20px;
  }
  .pp-uc-title:before {
    content: 'USERNAME'; /* change with your preferred username */
    font-size: 3.75rem; /*adjust if needed !! */
  }
  .yael-bat { /* the bat on top of the username */
    grid-area: 1/1/3/3;
    align-self: start;
    justify-self: center;
    position: relative;
    z-index: 2;
    transform: translateY(-165px) scaleY(0.75);
    width: 380px;
    filter: brightness(0) saturate(100%) invert(7%) sepia(13%) saturate(4684%) hue-rotate(246deg) brightness(95%) contrast(95%) drop-shadow(1px 1px #eedcef) drop-shadow(-1px -1px #eedcef) drop-shadow(1px -1px #eedcef) drop-shadow(-1px 1px #eedcef); /* outline !! */
  }
  .yael-banner { /* image banner */
    grid-area: 1/2/1/7;
    position: relative;
    height: 280px;
  }
  .yael-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    border: 2px solid #59438d;
  mask:
    70px 0 /40px 40px radial-gradient(#000 70%, #0000 72%),
    0 60px /40px 40px radial-gradient(#000 70%, #0000 72%),
    radial-gradient(30px at 0 0, #0000 99%, #000 calc(100% + 1px)) 40px 30px,
    conic-gradient(at 20px 20px, #000 75%, #0000 0) 70px 0,
    conic-gradient(at 20px 20px, #000 75%, #0000 0) 0 60px;
  mask-repeat: no-repeat; /* inverting the borders */
  }
  .pp-uc-followers-count { /* followers count positioning */
    grid-area: 1/2/1/7;
    align-self: end;
    top: 50px;
    position: relative;
    font-family: 'fraunces';
    color: #eedcef;
    font-size: 2rem;
    display: flex;
    gap: 10px;
    align-items: center;
    text-shadow: 2px 2px #24132c;
  }
  .pp-uc-followers-count:before { /* the long line on the left */
    content: '';
    flex: 1;
    background: linear-gradient(to left,#0000, #59438d, #723d51, #24132c, #0000);
    height: 30px;
    outline: 2px solid #24132c;
    outline-offset: -3px;
  }
  .pp-uc-followers-count span:nth-of-type(2) {
    font-size: 0;
  }
   .pp-uc-followers-count span:nth-of-type(2):before {
     content: 'GHOULS'; /* changing the followers text */
     font-size: 2rem;
   }
  .profile-badges { /* badges */
    grid-area: 1/2/1/6;
    z-index: 2;
    align-self: end;
    position: relative;
    top: 40px;
    justify-self: end;
    margin-right: 50px;
    gap: 20px;
  }
  .profile-badge {
    background: #24132c;
    transform: rotate(45deg); /* rotating so they look like diamonds !! */
    border: 1px solid #eedcef;
  }

  /* FOLLOW BUTTON + OPTIONS MENU POSITIONING */
  .pp-uc-about-me + div {
    grid-area: 1/1/4/3;
    z-index: 9;
    align-self: end;
  }
  .pp-uc-about-me + div > div { /* centering and adding a small gap in between them */
    justify-content: center;
    gap: 2px;
  }
  .pp-uc-follow-button, .pp-uc-options-menu { /* follow and options button styling */
    background: #eedcef;
    border-radius: 0;
    font-family: 'fraunces';
    color: #24132c;
    text-transform: uppercase;
    font-weight: bold;
    width: 9.5rem;
    border: 2px solid #24132c;
    transition: all 0.2s;
  }
   .pp-uc-follow-button:hover, .pp-uc-options-menu:hover { /* changing background and border color on hover */
background:    #24132c;
     color: #eedcef;
     border-color: #eedcef;
   }
  .pp-uc-follow-button:hover .pp-uc-follow-text {
     color: #eedcef;
  }
  .pp-uc-follow-text { /* changing the font and color of the follow button text */
    font-family: 'fraunces';
    color: #24132c;
  }
 /* ============================== */
  /* PROFILE PAGE ELEMENTS */
   .yael-status { /* status area */
    grid-area: 2/3/4/7;
    margin-top: 4rem;
    background: #59438d;
    border-radius: 30px;
    border: 4px solid #eedcef;
    position: relative;
    padding: 20px;
    display: grid;
    grid-auto-columns: 20% 80%;
    z-index: 1;
  }
.yael-status:after {
  content: '';
  position: absolute;
  background: linear-gradient(#24132c, #0000);
  inset: 20px;
  border-radius: 20px;
  z-index: -1;
}
  .yael-status h2 { 
    z-index: 1;
    font-family: 'lacquer';
    font-size: 2.85rem;
    left: 50px;
    top: -30px;
    text-shadow: -2px 0 #eedcef;
    color: #24132c;
    letter-spacing: -4px;
    position: relative;
    white-space: nowrap;
  }
  .yael-status:before { /* drip effect */
    content: '';
    position: absolute;
    background: #eedcef;
    height: 200px;
    width: 230px;
    transform: scaleY(-1);
    left: 20px;
    top: -2px;
     clip-path: shape(from 0% 95.202%,curve by 2.663% -7.771% with 0% -5.563%/0.164% -6.03%,curve by 3.748% -6.879% with 1.808% -1.316%/2.794% -3.1%,curve by 5.917% -5.011% with 0.953% -3.864%/3.09% -5.69%,curve by 4.175% 4.671% with 1.479% 0.382%/3.287% 2.42%,curve by 3.222% 3.652% with 1.052% 2.76%/1.841% 3.652%,curve by 5.161% -13.163% with 3.057% 0%/4.832% -4.501%,curve by -0.822% -10.403% with 0.164% -4.459%/0.099% -5.393%,curve by -1.019% -10.955% with -1.381% -7.431%/-1.479% -8.662%,curve by 5.983% -4.459% with 0.69% -3.694%/3.254% -5.563%,curve by 2.038% 12.484% with 2.531% 1.019%/3.024% 4.076%,curve by -0.493% 8.238% with -0.263% 2.293%/-0.493% 6.03%,curve by 0.789% 6.2% with 0% 3.355%/0.131% 4.416%,curve by 4.668% 4.331% with 1.019% 2.803%/2.4% 4.076%,curve by 8.679% -8.238% with 3.419% 0.382%/7.232% -3.27%,curve by 1.446% -20.34% with 1.183% -4.119%/1.446% -7.898%,curve by -2.137% -34.055% with 0% -15.584%/-0.526% -24.204%,curve by 0.164% -9.299% with -0.822% -5.096%/-0.789% -6.667%,curve by 5.194% -4.204% with 1.118% -3.142%/2.433% -4.204%,curve by 4.799% 3.609% with 2.63% 0%/3.682% 0.807%,curve by -0.066% 11.083% with 0.92% 2.378%/0.92% 3.567%,curve by -1.677% 33.503% with -1.414% 10.531%/-1.644% 15.711%,curve by 0.592% 18.981% with 0% 15.117%/0.066% 16.985%,curve by 6.246% 6.497% with 0.92% 3.397%/3.912% 6.497%,curve by 2.728% -2.887% with 1.282% 0%/2.433% -1.189%,curve by 1.775% -5.69% with 0.625% -3.609%/0.92% -4.586%,curve by 3.748% -0.297% with 1.118% -1.444%/2.498% -1.571%,curve by 2.202% 9.002% with 1.545% 1.571%/1.94% 3.142%,curve by 2.597% 8.875% with 0.296% 6.157%/0.723% 7.686%,curve by 7.133% -2.548% with 2.4% 1.571%/5.556% 0.425%,curve by 0.953% -11.55% with 1.315% -2.59%/1.578% -5.563%,curve by 0.197% -12.314% with -0.756% -7.304%/-0.69% -9.979%,curve by 9.402% 2.633% with 2.4% -6.115%/8.941% -4.289%,curve by -0.427% 5.86% with 0.066% 1.274%/-0.099% 3.907%,curve by -0.723% 10.446% with -0.296% 1.996%/-0.625% 6.667%,curve by 0.46% 8.705% with -0.164% 6.157%/-0.131% 6.964%,curve by 4.964% 6.369% with 1.019% 2.93%/2.531% 4.883%,curve by 5.49% 8.153% with 3.386% 1.996%/4.964% 4.374%,line by 0.23% 1.571%,line by -50% 0%,line by -50% 0%,line by 0% -4.798%,close);
  }
  .yael-status-inner { /* inner status container, this is where the actual status text is stored */
    grid-column: 2;
    height: 100%;
    border-radius: 20px;
    padding: 20px;
    color: #fff;
    font-family: 'fraunces';
    font-size: 1.65rem;
    display: flex;
    justify-content: end;
  }
  .yael-status-inner p { /* the actual text */
    grid-column: 2;
    max-width: 35ch;
    text-align: right;
    justify-self: end;
    max-height: 130px;
    overflow: hidden auto;
    line-height: 1;
    z-index: 1;
   text-shadow: rgb(0, 0, 0) 2px 0px 0px, rgb(0, 0, 0) 1.755165px 0.958851px 0px, rgb(0, 0, 0) 1.080605px 1.682942px 0px, rgb(0, 0, 0) 0.141474px 1.99499px 0px, rgb(0, 0, 0) -0.832294px 1.818595px 0px, rgb(0, 0, 0) -1.602287px 1.196944px 0px, rgb(0, 0, 0) -1.979985px 0.28224px 0px, rgb(0, 0, 0) -1.872913px -0.701566px 0px, rgb(0, 0, 0) -1.307287px -1.513605px 0px, rgb(0, 0, 0) -0.421592px -1.95506px 0px, rgb(0, 0, 0) 0.567324px -1.917849px 0px, rgb(0, 0, 0) 1.41734px -1.411081px 0px, rgb(0, 0, 0) 1.920341px -0.558831px 0px, 0 0 10px #59438d, 0 0 10px #59438d,0 0 10px #59438d;
  }
 .yael-links { /* the potion links !! */
   grid-area: 4/1/5/3; 
   position: relative;
   z-index: 3;
   display: flex; 
    gap: 6rem;
   justify-content: center;
   padding: 10px;
   flex-wrap: wrap;
   height: fit-content;
 }
  .potion-link-upper { /* potion cap */
    width: 30px;
    height: 45px;
    position: relative;
    border-radius: 5px;
    border: 2px solid #fff;
    transform: rotate(20deg);
    background: #24132c;
    border-bottom-color: #24132c;
    z-index: 3;
  }
  .potion-link-upper:before { /* additional cap details I don't fucking know what this is called im so sorry */
    content: '';
    position: absolute;
    height: 20px;
    width: 50px;
    border: 2px solid #fff;
    left: -15px;
    background: #24132c;
    border-radius: 5px;
    top: 10px;
  }
  .potion-link-bottom { /* the potion container thing */
    border-radius: 50%;
    border: 2px solid #fff;
    height: 95px;
    width: 100px;
    background: #24132c;
    position: absolute;
    top: 38px;
    left: -38px;
  }
  .potion-link-bottom img { /* link logo image! You can use kofi, disc, and some others blah blah */
    filter: invert(1); 
    height: 100%; 
    width: 100%;
    transform: scale(0.6);
  }
  .potion-link-bottom:before { /* the potion effect, on hover it rises :) */
    content: '';
    inset: 0;
  background: linear-gradient(#24132c 50%, #59438d 50%);
  background-size: 100% 200%;
  background-repeat: no-repeat;
  background-position: 0 55%;   
  transition: background-position 0.75s ease;
    position: absolute;
    border-radius: 50%;
    border: 8px solid #24132c;
    transition: all 0.5s;
  }
  .potion-link-bottom:after {
    content: '';
    height: 20px;
    width: 26px;
    background: #24132c;
    position: absolute;
    top: -5px;
    right: 34px;
  }
  html:not(:has([class="mya-credit"])) .css-0::after {
    content: "Pls put credit back, thank you!"; position: fixed; pointer-events: none; inset: 0; z-index: 20000; background: #000; text-align: center; font-family: 'poppins'; color: #fff; font-size: 2.5rem; align-content: center;}
   .pp-uc-about-me + div > div { /* removing gaps and placing margins */
     gap: 0; 
     margin: 5px 0;
     }
  .potion-link-upper:hover .potion-link-bottom:before {
  background-position: 0 90%;  /* the potion rising effect */
}
  .yael-friends { /* friends/creators area !! */
    grid-area: 4/3/6/7;
    display: grid;
   grid-template-rows: repeat(2, 1fr); 
  grid-auto-flow: column;              
  grid-auto-columns: 180px;            
  overflow: auto hidden;
    margin-top: 2rem;
    gap: 10px 30px;
  }
  .yael-friends::-webkit-scrollbar-thumb, .yael-status-inner p::-webkit-scrollbar-thumb { /* decorative scrollbar effect */
    background: #59438d;
    border-radius: 0;
    border: 2px solid #eedcef;
  }
.yael-friend{ /* each individual friend card */
  height: 300px;
  width: 200px;
  display:flex;
  flex-direction:column;
  position:relative;
  transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  border-radius: 5px;
  overflow:hidden;
  border: 2px solid #24132c;
   background:
    radial-gradient(#eedcef 14%, #ba7e94 15% 30%, #eedcef 31% 44%, #ba7e94 45% 60%, #0000 61%),
    linear-gradient( 45deg, #0000 46%, #ba7e94 0 54%, #0000 0),
    linear-gradient(-45deg, #0000 46%, #ba7e94 0 54%, #0000 0) #eedcef;
  background-size: 99px 90px;
}
.yael-friend img { /* adding a small drop shadow effect for those with transparent backgrounds */
  filter: drop-shadow(0 6px #24132c);
  object-fit: cover;
}
.friend-desc{ /* on hover, a description appears ! */
  background: #eedcef;
  height:35px;
  width:100%;
  position:absolute;
  bottom: 0;
  transition:all 0.9s cubic-bezier(0.645, 0.045, 0.355, 1);
  color: #000;
  font-family: 'pirata one';
  font-size: 1.75rem;
   background:#723d51aa;
}
  .yael-friend h2 { /* friend name */
    background: #fff;
    border-bottom: 2px solid #24132c;
    font-family: 'pirata one';
    padding: 0 10px;
  }
.yael-friend:hover .friend-desc
{
  height:100%; /* the desc appears on hover */
}
.yael-friend p { /* friend desc text styling */
  background: #eedcef;
  font-family: 'fraunces';
  font-size: 1.15rem;
  line-height: 1;
  color: #24132c;
  height: 220px;
  padding: 10px;
  margin: 15px 10px;
  position: relative;
  bottom: 0px;
  border-radius: 10px;
  outline: 2px solid #ba7e94;
  outline-offset: -5px;
}
  /* DROPDOWNS */
  .yael-dropdowns {
    grid-area: 5/1/6/3;
    position: relative;
  }

  /* putting the menu in a column */
    .yael-dropdown {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.4s ease;
      gap: 1.85rem;
    }

    .yael-dropdown::-webkit-details-marker { /* rmemoving that stupid triangle */
      display: none;
    }

    .yael-dropdown-text { /* actual dropdown styling */
      position: relative;
      width: 100%;
      padding: 10px;
      display: flex;
      align-items: center;
      background: #ba7e94;
      outline: 2px solid #723d51;
      outline-offset: -5px;
      justify-content: center;
      list-style: none;
      user-select: none;
      transition: all 0.5s;
      text-shadow: 
        #723d51 2px 0px 0px, 
        #723d51 1.75517px 0.958851px 0px, 
        #723d51 1.0806px 1.68294px 0px, 
        #723d51 0.141474px 1.99499px 0px, 
        #723d51 -0.832294px 1.81859px 0px, 
        #723d51 -1.60229px 1.19694px 0px, 
        #723d51 -1.97998px 0.28224px 0px, 
        #723d51 -1.87291px -0.701566px 0px, 
        #723d51 -1.30729px -1.5136px 0px, 
        #723d51 -0.421592px -1.95506px 0px, 
        #723d51 0.567324px -1.91785px 0px, 
        #723d51 1.41734px -1.41108px 0px, 
        #723d51 1.92034px -0.558831px 0px;
    }

    .yael-dropdown-summary { /* dropdown text */
      position: relative;
      z-index: 2;
      font-family: 'Fraunces';
      font-size: 1.75rem;
      font-weight: 900;
      color: #fff;
      transition: all 0.5s;
    }

    /* Hover State */
    .yael-dropdown-text:hover {
      background: #59438d;
      outline-color: #eedcef;
      text-shadow: none;
    }

body:before { /* the dark background that appears when a dropdown is opened */
  content: '';
  position: fixed;
  inset: 0;
  background: #000a;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: all 0.5s;
  backdrop-filter: blur(4px);
}
    .yael-dropdown[open] { /* when the dropdown opens, it goes up and enlargens a bit */
      transform: translateY(-95px) scale(1.04);
      z-index: 20; /* make sure it's on top of the backdrop effect */
    }
body:has(.yael-dropdown[open]):before { /* when opened, the backdrop filter is in motion */
  opacity: 1;
}
    /* Change button color when open */
    .yael-dropdown[open] .yael-dropdown-text {
      background: #59438d;
      outline-color: #eedcef;
      text-shadow: none;
    }
  .yael-list:has(.yael-dropdown[open]) .yael-dropdown:not([open]) { /* other options go slightly transparent when there's an active dropdown */
      transform: translateY(40px) scale(0.95);
      opacity: 0.75;
      pointer-events: none;
    filter: brightness(0.8);
    }

.yael-dropdown-content { /* dropdown information panel */
      position: absolute;
      top: 68px;
      width: 100%;
      max-height: 380px; 
      background: #24132c;
      border: 2px solid #59438d;
      border-radius: 10px;
      padding: 15px;
      text-align: center;
      left: 0;
      font-family: 'Fraunces';
      font-size: 1.1rem;
      color: #eecdef;
      line-height: 1.2;
      overflow-y: auto; 
      z-index: 10; 
    }

    /* Animate the panel popping in since <details> display toggles instantly */
    .yael-dropdown[open] .yael-dropdown-content {
      animation: panelPopIn 0.4s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
    }

    @keyframes panelPopIn {
      0% {
        opacity: 0;
        transform: translateY(15px) scale(0.95);
      }
      100% { opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
   /* ============================== */
  /* BOT PAGE PORTION */
  .profile-filters-flex-inner, .profile-filters-flex-outer { /* remove excess layers */
    display: contents;
  }
  .profile-filters-flex-inner-hassearchfilter { /* making the search bar loooong */
    flex: 1;
  }

  /* additional decorative gradient text! You can change the drop dead gorgeous text into whatever you want ! */
  #profile-tabs::before {
  content: 'DROP DEAD GORGEOUS!';
  display: block;
  font-size: clamp(3.25rem, 7vw, 4rem);
  font-family: 'fraunces';
  line-height: 0.8;     
  background: linear-gradient(#59438d, #ba7e94);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
    font-weight: bold;
    font-style: italic;
    padding: 0 10px;
    margin-bottom: -10px;
    -webkit-text-stroke: 2px #24132c;
    letter-spacing: -2px
}
  /* total characters */
  .pp-pg-total {
    background: #59438d;
    border-radius: 0;
    box-shadow: none;
    border: 1px solid #24132c;
    font-family: 'fraunces';
    text-shadow: none;
    color: #eecdef;
    text-transform: uppercase;
    height: 40px;
  }
  .pp-fl-search-input { /* bot searchbar */
    background: 
    linear-gradient(to right, #24132c, #ba7e94) padding-box,
    linear-gradient(#000, #24132c) border-box;
    border-radius: 0;
    border-color: #24132c;
    font-family: 'fraunces';
    color: #eecdef;
  }
  .pp-fl-search-input:is(:hover, :focus) { /* on hover and on click, the border color changes */
    border-color: #59438d;
    box-shadow: none;
  }
  .pp-fl-filter-button { /* filter button */
    background: #59438d;
    border-radius: 0;
    border-color: #24132c;
  }
  .pp-fl-filter-button svg { fill: #eecdef;} /* changing the icon color of the filter button */
  .pp-fl-filter-button:hover { /* changing backgrounds on hover */
    background: #723d51;
  }
 /* ============================== */
  /* FILTER MENU */
  .pp-fl-modal { /* main container */
    background: #ba7e94 !important;
    border-radius: 0;
    padding: 0;
    border: 8px double #24132c;
    box-shadow: none;
  }
  .pp-fl-modal-header { /* the "Filter" text */
    font-family: 'pirata one';
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    color: #eecdef;
    line-height: 0;
    -webkit-text-stroke: 0.5px #24132c;
    font-weight: bold;
  }
.pp-fl-tags-heading { /* "Tags" text */
  font-family: 'lacquer';
  color: #723d51;
  font-size: 2rem;
}
  .pp-fl-modal-close { /* close button */
    right: 20px;
    color: #723d51;
    font-size: 1.2rem;
    background: #eecdef;
    border-radius: 20px;
  }
  .profile-filter-modal-body-flex  { /* removing any sort of gaps between the header text and the actual tags */
    gap: 0;
  }
  .pp-fl-tags-list { /* tags container */
    background: #eee;
    border-radius: 20px;
    border: 1px solid #24132c;
    justify-content: center;
  }
  .pp-fl-tags-scroll { /* making them all dropdown so that you don't have to click excess buttons to open them */
    flex-wrap: wrap;
    padding: 5px;
  }
  .pp-fl-tags-scroll button { /* actual tags */
    background: #24132c;
    border-radius: 0;
    font-family: 'fraunces';
    color: #eecdef !important;
    box-shadow: none !important;
    text-shadow: none !important; /* this is me overriding styling elements when it comes to tags being selected because I'm lazy....... */
  }
   /* ============================== */
  /* Latest menu */
   #root .react-select__control { /* main container */
    background: #ba7e94;
    border-radius: 0;
    border-color: #24132c;
    font-family: 'fraunces';
  }
  #root .react-select__control:hover { /* changes backgrounds on hover */
    background: #723d51;
  }
 #root .react-select__single-value { /* the active value, the "latest" text */
    color: #24132c;
   font-weight: normal;
  }
   #root .react-select__control svg { /* the dropdown arrow svg */
     color: #24132c;
   }
   #root .react-select__menu { /* dropdown container styling */
    background: #24132c;
    border-radius: 0;
    background: 1px solid #eecdef;
  }
  #root .react-select__menu-list { /* remove unecessary padding */
    padding: 0;
    font-family: 'fraunces';
    font-weight: normal;
  }
  #root .react-select__option:hover { /* on hover, change backgrounds !! */
    background: #eecdef;
    color: #24132c;
  }
  #root .react-select__option { line-height: 1;} /* making them squish togetherrrr... */
   /* ============================== */
  /* BOT CARDS */
 .pp-cc-wrapper, .pp-cc-wrapper >*{ /* remove all gradient layers */
  background: #0000 !important;
   box-shadow: none !important; /* and box shadow aha, again this is me being lazy */
}

  .pp-cc-list-container { /* main container */
    display: flex;
    flex-wrap: wrap; /* so the botcards don't stick to each other */
    justify-content: center;
    gap: 4.5rem;
  }
.pp-cc-wrapper { /* main botcard container, adjusting it's sizing */
  flex: 0 1 370px;
  position: relative;
  overflow: visible;
}

.profile-character-card-avatar-aspect-ratio { /* bot pfp */
  max-width: 300px;
  width: 100%;
  position: relative;
  left: 12px;
  border-radius: 150px 150px 0 0;
  height: 380px;
  background: 
    linear-gradient(#24132c, #723d51) padding-box,
    linear-gradient(#000, #24132c) border-box;
  border: 30px solid transparent;
   box-shadow:  0 8px 10px #0003;
  outline: 1px solid #24132c;
}

  .pp-cc-avatar { /* bot img, so there's a tombstone arch */
      border-radius: 150px 150px 0 0;
    border: 5px double #723d51;
    filter: grayscale(0.3) sepia(0.1) brightness(0.9);
  }

  .pp-cc-wrapper::before { /* tombstone bottom! */
   content: '';
position: absolute;
height: 25%;
width: 222%;
left: -172px;
bottom: -40px;
    z-index: -1;
background: linear-gradient(#24132c 60%, #000);
transform: scale(0.86);
clip-path: path('M189.7807 33.2791c-.8994 0-9.8938 0-23.3853 0l-20.3273 0-1.0793 15.6501c-1.0793 17.8088-.1799 16.7295-27.1629 37.0567l-13.6714 10.4335 0 15.1105 0 15.2904 216.7637 0 216.7637 0 0-16.1898c0-14.7507-.3597-16.1898-3.9575-18.1686-5.9363-3.058-32.5595-23.2054-35.0779-26.4433-1.4391-1.7989-2.3386-8.2748-2.3386-16.7295 0-7.7352-.7196-14.3909-1.619-14.9307-.8994-.5397-10.9731-1.0793-22.4859-1.2592l-21.0467-.3597z');
}

 .pp-cc-description { /* bot description, appears on hover */
  position: absolute;
  z-index: 2;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  font-size: 0.8rem;
  bottom: -80px;
   left: -20px;
  width: 100%;
  padding: 80px;
  box-sizing: border-box;
   pointer-events: none;
   max-height: 250px;
   overflow: hidden;
}

.pp-cc-tags { /* bot tags, appears on hover */
  position: absolute;
  opacity: 0;
  z-index: 3;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  transform: translateY(50px);
  bottom: 150px;
  padding: 10px 20px;
  width: 280px;
  left: 20px;
  pointer-events: none;
}

.pp-cc-wrapper:hover .pp-cc-description { 
  opacity: 1;
  transform: translateY(-80px);
}

.pp-cc-wrapper:hover .pp-cc-tags {
  opacity: 1;
  transform: translateY(-40px);
}

.profile-character-card-avatar-aspect-ratio::before { /* the new background of the descriptiona nd tags */
  background: #111;
  border-radius: 0;
  opacity: 0;
  content: '';
  position: absolute;
  height: 60%;
  bottom: -150px;
  transform: translateY(50px);
  width: 100%;
  z-index: 1;
  transition: all 0.4s;
}
.pp-cc-wrapper:hover .profile-character-card-avatar-aspect-ratio::before, .pp-cc-wrapper:hover .profile-character-card-avatar-aspect-ratio::after {
  opacity: 1;
  transform: translateY(-80px);
}

.pp-cc-description { /* changing font and color of the description, if this doesn't work try using .pp-cc-description * and then use !important to override things. */
  color: #eee;
  font-family: 'fraunces';
  text-align: center;
  font-size: 0.9rem;
}

.profile-character-card-stack::before { /* bat. */
content: '';
background: linear-gradient(#241b3a,#723d51);
height: 120px;
  width: 150px;
position: absolute;
  clip-path: shape(from 15.927% 99.923%,curve by 0.432% -0.806% with 0% -0.054%/0.19% -0.43%,curve by 1.261% -5.751% with 0.898% -1.505%/1.174% -2.759%,curve by -7.062% -20.963% with 0.207% -8.278%/-2.417% -16.054%,curve by -9.825% -6.414% with -3.022% -3.189%/-5.301% -4.676%,curve by -0.691% -0.448% with -0.553% -0.215%/-0.846% -0.394%,curve by 1.727% -0.555% with 0.138% -0.054%/0.915% -0.305%,curve by 4.938% -3.207% with 1.986% -0.627%/3.419% -1.541%,curve by 6.389% -13.76% with 3.004% -3.261%/5.111% -7.794%,curve by 0.483% -4.82% with 0.397% -1.845%/0.483% -2.67%,curve by -0.397% -3.763% with 0.017% -2.275%/-0.035% -2.741%,curve by -2.521% -4.121% with -0.553% -1.613%/-1.381% -2.974%,curve by -0.95% -1.111% with -0.518% -0.538%/-0.95% -1.039%,curve by 1.882% 0.86% with 0% -0.09%/0.846% 0.305%,curve by 7.028% 1.362% with 2.521% 1.344%/4.058% 1.63%,curve by 5.595% -1.559% with 2.297% -0.233%/3.902% -0.663%,curve by 10.274% -10.517% with 4.489% -2.365%/8.426% -6.378%,curve by 0.95% -3.852% with 0.691% -1.577%/0.932% -2.562%,curve by 0.656% -1.29% with 0% -1.326%/0.104% -1.505%,curve by 10.205% -3.888% with 3.039% 1.2%/7.235% -0.394%,curve by 5.456% -12.703% with 2.763% -3.225%/4.248% -6.719%,curve by 0.846% -2.132% with 0.553% -2.759%/0.691% -3.082%,curve by 1.83% 5.931% with 0.259% 1.505%/1.209% 4.533%,curve by 12.381% 11.718% with 2.469% 5.501%/8.236% 10.965%,curve by 2.02% -0.179% with 0.881% 0.161%/1.157% 0.143%,curve by 0.898% -0.072% with 0.863% -0.305%/0.984% -0.323%,curve by -0.363% 1.774% with -0.069% 0.143%/-0.224% 0.95%,curve by 4.282% 10.768% with -0.639% 3.852%/0.656% 7.131%,curve by 12.381% 6.056% with 3.453% 3.476%/7.718% 5.554%,curve by 5.974% -0.968% with 1.571% 0.161%/3.661% -0.179%,curve by 1.968% -0.663% with 1.088% -0.376%/1.968% -0.681%,curve by -1.381% 1.523% with 0% 0.036%/-0.622% 0.717%,curve by -4.317% 12.488% with -3.039% 3.243%/-4.317% 6.916%,curve by 1.986% 8.779% with 0% 3.279%/0.501% 5.483%,curve by 8.236% 8.654% with 1.796% 3.978%/3.989% 6.289%,curve by 0.414% 1.595% with 1.917% 1.075%/1.934% 1.147%,curve by -11.966% 10.177% with -4.766% 1.451%/-9.687% 5.626%,curve by -2.538% 12.345% with -1.744% 3.458%/-2.538% 7.382%,curve by 0.466% 4.802% with 0% 2.974%/0.052% 3.351%,curve by 0.984% 2.759% with 0.259% 0.86%/0.708% 2.096%,curve by -1.347% 1.38% with 0.829% 1.899%/0.725% 2.007%,curve by -6.32% -3.368% with -1.882% -0.573%/-3.712% -1.541%,curve by -10.464% -11.718% with -5.733% -4.013%/-8.495% -7.095%,curve by -1.554% -13.384% with -2.038% -4.748%/-2.176% -5.931%,curve by 0.294% -8.779% with 0.311% -3.781%/0.363% -5.429%,curve by -3.557% -13.277% with -0.155% -7.31%/-1.14% -10.929%,curve by -2.297% -1.684% with -0.725% -0.681%/-2.072% -1.684%,curve by -0.173% 5.16% with -0.052% 0%/-0.138% 2.311%,curve by -0.397% 5.859% with -0.052% 4.712%/-0.086% 5.196%,curve by -3.816% -2.705% with -0.794% 1.648%/-2.193% 0.663%,line by -1.001% -2.043%,line by -1.658% 0%,curve by -2.676% -0.197% with -0.915% 0%/-2.124% -0.09%,curve by -1.071% -0.036% with -0.604% -0.108%/-1.053% -0.125%,curve by -3.816% 5.859% with -0.138% 0.412%/-3.488% 5.554%,curve by -1.502% -0.842% with -0.639% 0.573%/-1.191% 0.269%,curve by -0.155% -12.614% with -0.742% -2.723%/-0.829% -8.887%,line by 0.121% -0.645%,line by -0.742% 0.108%,curve by -2.227% 0.86% with -0.414% 0.054%/-1.416% 0.448%,curve by -2.97% 2.293% with -1.191% 0.609%/-1.779% 1.057%,curve by -3.471% 5.68% with -1.692% 1.756%/-2.676% 3.368%,curve by -0.57% 3.745% with -0.518% 1.451%/-0.553% 1.792%,curve by 0.553% 4.658% with 0% 1.792%/0.086% 2.58%,curve by 0.829% 16.036% with 1.191% 5.447%/1.571% 12.614%,curve by -2.884% 6.163% with -0.363% 1.702%/-1.692% 4.551%,curve by -9.152% 9.98% with -1.036% 1.433%/-7.511% 8.493%,curve by -5.94% 4.766% with -1.399% 1.29%/-4.818% 4.031%,curve by -1.968% 0.699% with -0.812% 0.555%/-1.968% 0.95%,close);
  z-index: 2;
  transform: scaleY(-1) translate(-30px, -320px) rotate(10deg);
}

  .profile-character-card-stack-link-component-box { /* bot name */
    position: absolute;
    bottom: -20px;
    left: 40%;
    transform: translateX(-45%);
    z-index: 2;
    max-width: 250px;
    width: 100%;
    padding: 0;
    text-align: center;
  }

  .pp-cc-name { /* bot name styling */
    font-family: 'fraunces';
    text-transform: uppercase;
    text-shadow: none;
    color: #eee;
    font-size: 1.15rem;
    text-wrap: wrap;
    line-height: 1;
    text-shadow: 2px 2px 4px #24132c;
  }

  .pp-cc-tags ul { /* centering the bot tags */
  justify-content: center;
  padding-bottom: 10px;
}
.pp-cc-tags-wrap:has(.pp-tag-limitless), .pp-tag-limitless { /* putting the limitless tag on top of the other tags */
  flex: 1 1 100%;
}
  .pp-cc-tags-wrap { 
  padding-top: 2px;
  padding-bottom: 2px;
}

  .pp-tag-limitless { 
  border: none;
  font-size: 0;
  background: transparent;
}

  .pp-tag-limitless::before { /* styling the new limitless tag, and changing the text */
  font-size: 1.85rem;
  font-family: 'pirata one';
  font-weight: bold;
  color: #e0e0e0;
  text-align: center;
  position: absolute;
}
.pp-tag-limitless::before { 
  content: "BEWITCHED"; /* new limitless tag text */
}
  .pp-cc-tags-regular { /* making regular tags emojis only !! */
  font-size: 0;
  display: inline;
  border: none !important;
    width: 30px;
}
.pp-cc-tags-regular::first-letter { 
  font-size: 0.9rem;
}
.pp-cc-tags-custom { /* custom tags have their own styling */
  background: #eecdef;
  border-radius: 50px;
  color: #000;
  font-family: 'fraunces';
}
  .profile-character-card-stats-box { /* chat count positioning */
    right: 48%;
    display: flex;
    top:5px;
    transform: translateX(-45%);
}

  .pp-cc-chats-count { /* chat count styling */
    font-family: 'fraunces';
    text-shadow: none;
    color: #e0e0e0;
    font-size: 0.85rem;
  }

  .pp-cc-chats-count::before { /* replacing the svg */
    content: '݁ᛪ༙ ';
    color: #eecdef;
    font-size: 1rem;
  }
  .pp-cc-chats svg {
    display: none;
  }
.pp-cc-ribbon { 
    filter: none;
    position: relative;
    inset: auto;
}
.pp-cc-ribbon-wrap {
    clip-path: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
}
  /* mobile compstibility stuff, mq HELL */
  @media (max-width: 920px) {
  .profile-info-stack {
    grid-template-columns: 1fr;
    grid-auto-rows: auto auto 1fr auto;
    height: 2100px
  }
  .yael-sona, .profile-info-stack-inner-flex, .yael-bat, .pp-uc-about-me + div{
    grid-area: 1/1;
    margin-top: 7rem;
  }
  .yael-banner {
    grid-area: 1/1;
  }
  .profile-badges, .pp-uc-followers-count, .yael-links {
    grid-area: 2/1;
  }
 .profile-badges {
   grid-area: 3/1;
   justify-self: center;
   margin: 10px;
 }
  .yael-status {
    grid-area: 3/1;
  }
  .yael-friends {
    grid-area: 4/1;
  }
  .yael-dropdowns {
    grid-area: 5/1;
  }
}
  @media (max-width: 768px) {
    .pp-top-bar {
      flex-direction: row;
    }
    .pp-cc-wrapper {
      margin-right: -3rem;
    }
  }
  .pp-top-bar-back-button { /* the back button */
    font-family: 'fraunces';
  }
  .pp-top-bar-back-button svg, .pp-mnb-container svg { fill: #eecdef;} /* the colors of the icons on the footer and back button */
</style>
<style>
  .mya-credit { position: fixed;  z-index: 3000; bottom: 0; width: 100%;color: #fff !Important; padding:  10px; font-family: 'poppins'; display: flex; align-items: center; gap: 10px;  pointer-events: none; left: 0;}
  .mya-credit a {pointer-events: auto; color: #000 !Important; background: #fff !important; padding: 0 10px; border-radius: 20px; position: absolute; font-size: 0.95rem; top: 0; left: 32px; filter: drop-shadow(1px 1px #000) drop-shadow(-1px -1px #000) drop-shadow(1px -1px #000) drop-shadow(-1px 1px #000);}
  .mya-credit a:before {
    content: "";
  width: 0;
  height: 0;
  position: absolute;
  border-left: 20px solid #fff;
  border-right: 2px solid #0000;
  border-top: 2px solid #fff;
  border-bottom: 15px solid #0000;
  left: 32px;
  bottom: -15px;
  }
  .mya-credit img { width: 70px; border-radius: 50%; overflow: hidden;  border: 2px solid #000; }
  .mya-credit:before {
    content: '';
    width: 70px; 
  aspect-ratio: 1;
   clip-path: polygon(100% 50%,79.13% 57.18%,94.27% 73.24%,72.46% 69.89%,78.4% 91.15%,60.64% 78.05%,56.03% 99.64%,46.38% 79.78%,32.27% 96.75%,32.96% 74.69%,12.57% 83.16%,23.44% 63.94%,1.45% 61.97%,20% 50%,1.45% 38.03%,23.44% 36.06%,12.57% 16.84%,32.96% 25.31%,32.27% 3.25%,46.38% 20.22%,56.03% 0.36%,60.64% 21.95%,78.4% 8.85%,72.46% 30.11%,94.27% 26.76%,79.13% 42.82%);
position: absolute;
    background: #FFD1DC; z-index: -1; left: 35px;
  }
  @media (max-width: 768px) {
    .mya-credit {
      bottom: 50px;
    }
  }
</style>

 <div class="mya-credit"><img src="https://ella.janitorai.com/media-approved/TScFiPDudpZuBW5MGXaU9.webp"><a href="https://janitorai.com/profiles/7115d851-9820-4feb-842e-ff02111a7043_profile-of-miauskii">css by miauskii!</a></div>