<div class="mya-status">
  template in progress hi hello... thank u micah for the chibis <a href="#">link example</a>
</div>

<section class="info-stuff">
  <section class="halftone"></section>
<div class="mya-book">
  <div class="inner">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride</p>
  </div>
  <div class="cover">
    <p>OPEN ME!</p>
  </div>
</div>
   <img src="https://file.garden/acB8lDTe9VWqLsXg/mmm.png">
  <section class="mya-links">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </section>
  </section>

<section class="info-box">
  <p>More info here!
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled it to make dummy text for Letraset's Body Type sheets. It has survived not only many decades, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised thanks to these sheets and more recently with desktop publishing software like Aldus PageMaker and Microsoft Word including versions of Lorem Ipsum.</p>
  <div class="mya-friends">
    <a href="link">
  <div class="friend">
      <p>friend name</p>
      <img src="https://file.garden/acB8lDTe9VWqLsXg/mmm.png">
  </div>
      </a>
    <a href="link">
  <div class="friend">
      <p>friend name</p>
      <img src="https://file.garden/acB8lDTe9VWqLsXg/mmm.png">
  </div>
      </a>
     <a href="link">
  <div class="friend">
      <p>friend name</p>
      <img src="https://file.garden/acB8lDTe9VWqLsXg/mmm.png">
  </div>
      </a>
     <a href="link">
  <div class="friend">
      <p>friend name</p>
      <img src="https://file.garden/acB8lDTe9VWqLsXg/mmm.png">
  </div>
      </a>
     <a href="link">
  <div class="friend">
      <p>friend name</p>
      <img src="https://file.garden/acB8lDTe9VWqLsXg/mmm.png">
  </div>
      </a>
  </div>
  <p>Add more info here if needed!</p>
  <img src="https://i.pinimg.com/1200x/ab/3e/9b/ab3e9b3acd96eeb6507e56f0f109e45f.jpg">
</section>

<div class="mya-banner">
  <img src="https://file.garden/acB8lDTe9VWqLsXg/wwrh">
</div>

<style>
  /* change page background to solid black, remove or change if needed */
  .pp-page-background {background: #000; }

  /* bane of my existence lowkenuinely */
  .css-0, .profile-character-card-stack a  {
    display: contents;
  }

  .css-jdhqy4 > div { 
    background: #333;
    overflow: hidden;
    color: #fff;
    font-family: 'Poppins';
    padding: 10px;
    border-radius: 50px;
    font-weight: 600;
  }
  /* trashcan!!! */
  .pp-uc-member-since, .profile-uc-follow-button:before, .pp-uc-options-menu span:last-child, .pp-cc-star, .pp-cc-star-line, .pp-cc-creator-name, .pp-cc-creator-name span, .pp-top-bar-logo-sub-name, .pp-top-bar-create-char, .profile-top-bar-notifications-popover:before, .pp-tabs-button, .pp-tabs-indicator, .profile-top-box-search-input-spacer-top, .profile-character-card-box ~ div, .pp-cc-description p:not(:first-child), .pp-cc-description hr, [class*="userAvatar"], a[href^="/plus"], .pp-cc-chats svg, .chakra-menu__icon-wrapper, .pp-top-bar-title, .react-select__option--is-selected, [class*="navigationButton"], .chakra-tooltip__arrow-wrapper, .profile-character-card-creator-name-link span, .profile-top-bar-logo-box{ 
    display: none;
  }
/* removing all background layers and making sure the main container's background is transparent */
  .pp-uc-background, .pp-uc-background >* { 
    background: #0000 !important;
    box-shadow: none !important;
  }
  /* ===== PC HEADER STYLING ====== */
  /* remove the width fixing the search bar */
   .profile-top-bar-search-wrapper { 
     max-width: unset; 
     width: 100%;
   }

  .pp-top-bar-search-box { /* remove side margins */
    max-width: unset; 
    margin: 0 -0.5rem 0 2rem;
  }

 .profile-top-bar-logo-box, .pp-top-bar-right > [class*="container"] { min-width: 0; } /* Remove fixed widths that cause lengthy issues */
  .pp-top-bar-right > [class*="container"] {
    gap: 5px;
    margin-right: 10px;
  }
  /* PC and mobile header styling */
  .pp-top-bar {
    padding: 0 25px;
    background: linear-gradient(to right,#444 20px, #222 20px 40px, #444 75%);
    box-shadow: none;
    border-bottom: 2px solid #444;
    display: flex;
    justify-content: end;
  }
.pp-top-bar-tabs { /* remove cut off on the new header text */
  overflow: visible;
  display: block
}
  .pp-top-bar-tabs a { /* "Janitor Text" */
    font-family: 'fraunces';
    color: #fff;
    text-shadow: none;
    font-size: 0;
     display: block; 
    padding: 0 5px;
    height: unset;
  }
  .pp-top-bar-tabs a:before {
    content: 'Ambience'; /* change logo name */
    font-size: 2rem;
  }
  .pp-top-bar-tabs a::first-letter { /* changing the style of the first letter only */
    color: #222;
    text-shadow: rgb(238, 238, 238) 1px 0px 0px, rgb(238, 238, 238) 0.540302px 0.841471px 0px, rgb(238, 238, 238) -0.416147px 0.909297px 0px, rgb(238, 238, 238) -0.989992px 0.14112px 0px, rgb(238, 238, 238) -0.653644px -0.756802px 0px, rgb(238, 238, 238) 0.283662px -0.958924px 0px, rgb(238, 238, 238) 0.96017px -0.279415px 0px;
    font-size: 2.5rem;
    font-style: italic;
  }

  .pp-top-bar-search { /* header searchbar */
    background: #5E5956;
    border-radius: 50px;
  }

  [class*="searchIcon"] { /* magnifying glass */
    opacity: 1;
    color: #aaa;
  }
  #search-input { /* search bar text font*/
    font-family: 'poppins';
    font-style: italic
  }
  /* ===== NOTIFICATIONS MENU ===== */
  .pp-top-bar-notifications-badge { /* notifications number */
    position: relative; /* putting it next to the icon rather than on top */
    inset: 0;
    box-shadow: none;
    font-family: 'poppins';
    color: #222;
    background: #fff;
    border: 1px solid #222;
  }
  .pp-top-bar-notifications-icon { /* changing the color and size of the notifs icon */
    font-size: 1.5rem;
    color: #fff;
  }
  .profile-top-bar-notifications-button:is(:hover, :focus) { /* on hover and click, there's a background */
    background: #555;
    border-radius: 50px;
  }
  .profile-top-bar-notifications-button { /* putting the icon on the left rather than right*/
    flex-direction: row-reverse;
  }
.profile-top-bar-notifications-popover { /* main notifications container */
  border-radius: 0;
  background: #222;
  border: 1px solid #fff;
  transform: unset !Important;
}
  .pp-top-bar-notifications-popover-header { /* notifications header */
    background: #000;
    padding: 4px;
    justify-content: center; 
    gap: 0.5rem;
  }
  .pp-top-bar-notifications-popover-header h4 { /* "notifications" text */
    font-family: 'fraunces';
    font-size: 2rem;
    display: flex;
    align-items: center;
  }
  .profile-top-bar-notifications-popover-actions { /* notifications buttons */
    background: #555;
    padding: 5px;
    border-radius: 50px;
    gap: 0.35rem;
  }
  .profile-top-bar-notifications-popover-actions button { /*decorating the buttons themselves */
    background: #000;
    box-shadow: none;
  }
   .profile-top-bar-notifications-popover-actions button:hover {
     background: #fff;
     color: #000;
     box-shadow: none;
   }
  .profile-top-bar-notifications-item { /* split notifications into 2 columns */
  display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    transition: all 0.2s;
  }
  .profile-top-bar-notifications-item:hover {
    background: none;
    border: 1px solid #aaa;
  }
  [class*="characterAvatar"] { /* bot pfp*/
    aspect-ratio: 1;
    width: auto;
    border-radius: 50%; 
    box-shadow: none;
    border: 1px solid #aaa;;
    mask: linear-gradient(200deg, #000 40%, #0000);
    transition: none;
  }
 .profile-top-bar-notifications-item:hover [class*="characterAvatar"] { /* remove these fuckass transitions */
   transform: unset;
  }
  .profile-top-bar-notifications-item-content-wrapper { /* main notifications content container */
    height: 100%;
    align-items: center;
    background: #0000 !important;
  }
  .profile-top-bar-notifications-item-content-wrapper * { /* changing font and color of every text that's contained inside the notifications */
    font-family: 'poppins';
    color: #fff;
  }
  [class*="highlight"] { /* highlighted text */
    background: #fff;
    border-radius: 20px; 
    padding: 0 5px;
    color: #000;
  }
  .pp-top-bar-notifications-item-unread { /* removing the purple unread gradient */
    background: #0000;
    box-shadow: none;
    width: 100%;
  }
  .pp-top-bar-notifications-item-unread:before { /* instead of the purple gradient, replaced with an exclamation point for unread indicator */
    content: '!';
    font-size: 5rem;
    position: absolute;
    bottom: 0;
    font-family: 'fraunces';
    transform: rotate(-15deg);
    left: 10px;
    z-index: 1;
  }
  .pp-top-bar-notifications-item button{ /* the archive/trashcan that appears on hover */
    background: #aaa;
    border-radius: 50px;
    color: #000;
    border: 0;
    outline: 1px solid #777;
    outline-offset: 3px;
  }
  .pp-top-bar-notifications-item button:hover{
    background: #000;
    color: #fff;
    outline-color: #000;
    box-shadow: none;
  }
/* =====USER MENU===== */
  .pp-top-bar-app-menu img{
    background: #fff;
    border-radius: 50px;
  }
   .profile-top-bar-app-menu:active, .profile-top-bar-app-menu[data-active] { 
     background: #0000;
   }
  .pp-top-bar-app-menu-list { /* container of the user menu */
    background: #0000;
    border-radius: 0;
    box-shadow: none;
    gap: 3px;
    display: flex;
    flex-direction: column;
   transform: unset !important; /* so it can just fade in normally */
  }
  .pp-top-bar-app-menu-list a { /* the options */
    background: #5E5956;
     border: 2px solid #000;
    font-family: 'fraunces';
    text-transform: uppercase;
    font-weight: bold;
    padding: 5px 15px;
    min-width: 5rem;
    color: #fff;
}
.pp-top-bar-app-menu-list a:hover {
  background: #444;
}
.pp-top-bar-app-menu-list-item[data-index="1"], .pp-top-bar-app-menu-list a:last-of-type { /* changing the first and last option's colors */
   background: #fff;
   color: #000;
 }
  .pp-top-bar-app-menu-list-item[data-index="1"]:hover, .pp-top-bar-app-menu-list a:last-of-type:hover {
    background: #aaa;
  }

  /* ===== PROFILE STYLIZATION ===== */
    /* info container */
  .profile-info-hstack { 
    margin: 6rem auto 0; /* lifting it a bit to overlap with the banner */
    z-index: 1; 
    order: -2; /* make sure it's underneath the banner */
  }
  /* username, followers, and badges container */
  .profile-info-stack-inner { 
    flex: unset; 
    gap: 3px; 
    overflow: visible; 
    margin-top: 3rem; /* push a little from the top */
  }

  /* removing margins and cut-offs in the username */
  .profile-info-stack-inner-flex { 
    margin: 0; 
    overflow: visible;
  }

  .profile-info-stack { container-type: inline-size;} /* registers elements depending on their widths because I'm lazy like that */

  .pp-uc-avatar { /* for those who  have transparent images for their pfp backgrounds ! */
    background: #eee;
     box-shadow: none; 
    border-radius: 50%; 
    border: 1px solid #eee;
  }
  /* username styling */
  .pp-uc-title { 
    font-family: 'dm serif text'; 
    font-size: 0; /* set font size to 0 so we can change the user to something else via pseudo-element */
    color: #5E5956; 
    font-style: italic; 
    font-weight: 1000; 
    text-transform: uppercase; 
    -webkit-text-stroke: 1px #5E5956; 
    text-shadow: rgb(238, 238, 238) 1px 0px 0px, rgb(238, 238, 238) 0.540302px 0.841471px 0px, rgb(238, 238, 238) -0.416147px 0.909297px 0px, rgb(238, 238, 238) -0.989992px 0.14112px 0px, rgb(238, 238, 238) -0.653644px -0.756802px 0px, rgb(238, 238, 238) 0.283662px -0.958924px 0px, rgb(238, 238, 238) 0.96017px -0.279415px 0px;
                 overflow: visible;}
  .pp-uc-title:before { /* change username here */
    content: 'username'; 
    font-size: 11cqw; /* adjust if needed */
    text-wrap: wrap;
    line-height: 1;
  }
  .mya-banner { /* the banner on top */
    height: 180px;
    width: 100%;
  padding: 20px;
  background: #eee;
  mask: 
    radial-gradient(50% 50%,#0000 66%,#000 67%) round 
     20px 20px/calc(2*20px) calc(2*20px), 
    conic-gradient(#000 0 0) content-box; /* the frame surrounding it */
    position: absolute; top: 0; 
  }
  .mya-banner img { 
    object-fit: cover; 
    height: 100%; 
    width: 100%; 
    object-position: 0 -25px; /* feel free to adjust if the image sizing isn't to your liking */
    padding: 8px;
  }

  .pp-uc-followers-count { /* followers count */
    position: relative; 
    top: -8px; 
    font-family: 'poppins'; 
    font-weight: 400; 
    display: flex; 
    gap: 5px; 
    align-items: center;
  }
  .pp-uc-followers-count:before { /* the line before the count */
    content: ''; 
    flex: 1; 
    height: 3px; 
    background: #dfdfdf;
  }
  .profile-badges { /* profile badges container*/
    position: relative; 
    top: -10px; /* adjust if needed */
  }
  .profile-badge { /* profile badges */
    background: #dfdfdf; 
    border-radius: 50px; 
    padding: 2px;
  }
  .profile-badges img { /* turn into a solid color */
    filter: brightness(0) saturate(100%) invert(33%) sepia(5%) saturate(593%) hue-rotate(339deg) brightness(97%) contrast(83%);
  }

  /* status area */
  .mya-status {
  position: relative;
  padding: 20px 35px;
  color: #000;
  background: #eee;
    font-family: 'poppins';
    line-height: 1.2;
    margin-top: -1rem;
}
   .pp-uc-about-me a:not(.mya-links a):not(.mya-friends a) { /* changing link appearances if you wanna insert them other than the actual links portion, so if you wanna put a link aside from the links part, than it'll look different! */
     background: #5E5956aa; 
     color: #fff; 
     padding: 0 5px; 
     border-radius: 20px;
   }
  /* adding a fold at the end, dont ask why I js felt aesthetic ok leave me alone */
  .mya-status:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 36px 36px 0;
  border-style: solid;
  border-color: #ccc #000; /* make sure the second color is the same as the background color for the fold effect */
}
  /* splitting the main information portion into two columns */
  .info-stuff {
  display: grid; 
  z-index: 2; 
  position: relative; 
  gap: 1rem; 
  justify-content: center; 
  border-top: 2px solid #d4d4d4; 
  margin-top: 9px; 
  grid-template-columns: 1fr 1.45fr; /* make sure the side of the sona pic is bigger! */
}
 .info-stuff img { /* the sona pic */
   width: 100%; 
   position: relative; 
   aspect-ratio: 1; 
   object-fit: cover; 
   height: 100%;
 } 

  /* book container */
  .mya-book {
  position: relative;
  width: 100%;
  height: 100%;
  background: #ccc;
    outline:5px solid #222;
    outline-offset: -5px;
  transform: preserve-3d;
  perspective: 600px;
  display: flex;
  color: #fff;
  transition-duration: 0.3s;
    z-index: 3; 
    transform: rotate(-3deg) scale(0.9); /* "mya that's so unethical" i dont guh uh fuhhh /j im sorry */
}

  /* inner and front book cover */
.cover,
.inner {
  top: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: all 0.5s;
  transform-origin: 0;
}
   .cover { /* book cover */
    background-image: linear-gradient(to right,#5E5956 48px, #5E5956 50px, transparent 50px); 
    background-color: #333;  
   }
.mya-book:hover .cover { /* on hover, cover folds */
  transition: all 0.3s;
  transform: rotatey(-70deg);
}

.mya-book:hover .inner { /* information text appears when on tap and hover */
  transition: all 0.3s;
  transform: rotateZ(10deg) rotateX(-3deg) rotateY(-10deg) translateX(140px);
}
.mya-book:hover { /* book rotates a bit */
  transform: rotateZ(-10deg);
}
  .mya-book:before{ /* extra book page for a 3d feel I have no idea */
    content: '';
    position: absolute;
 inset: 0;
  bottom: 0;
  right:-10px;
  background: #fff;
z-index: -1;
    border: 1px solid #444;
    transition: all 0.3s;
}
  .mya-book:hover:before{opacity: 0;}
  /* the two lines on the book cover */
  .cover:before{
    content: '';
  height: 3cqw;
  width: 30cqw; 
  left: 0;
  top: 20cqw; 
  background:#5E5956;
  border-radius: 20px;
  box-shadow: 0px 5cqw #5E5956;
    position: absolute;
}
  .inner{ /* text container */
    padding: 5px;
    background: #eee; 
    color: #000; 
    overflow: hidden;
     max-height: 300px; 
    overflow: hidden auto; 
  }
  .inner p { 
    text-align: justify; 
    font-family: 'poppins'; 
    font-size: 3cqw;
  }
  .cover p { /* "open me" text */
    position: absolute; 
    bottom: 15px;
    right: 25px; 
    font-family: 'dm serif text'; 
    transform: scaleX(1.5); 
    font-size: 0.95rem;
  }
/* halftone pattern on the back so it doesn't look boring aha I think!!! */
  .halftone {position: absolute; height: 100%;
    width: 100%;
    grid-column: 1/-1;
    grid-row: 1;
    background-image: linear-gradient(45deg, #444 25%, transparent 25%), linear-gradient(-45deg, #777 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #777 75%), linear-gradient(-45deg, transparent 75%, #444 75%);
    background-size: 4px 4px;
    background-position: 0 0, 2px 0, 2px -2px, 0 2px;
    padding-top: 62.5%;
    mask: radial-gradient(#000 30%, #0000 70%, #0000 90%);
    opacity: 0.75;
            }
.info-box { /* information container */
  border: 1px solid #777;
  padding: 10px;
  font-family: 'poppins';
  text-align: justify; position: relative;
  overflow: hidden;
}
  .info-box p { 
    margin-bottom: 15px; 
    padding: 5px; 
    line-height: 1.1;
    position: relative; 
    z-index: 1;
  }
  .info-box p::first-letter {/* changing the first letter into another font */
    font-family: 'fraunces';
    font-size: 2rem;
  }
  .info-box img:not(.friend img) { /* the bg image */
    position: absolute; 
    inset: 0; 
    opacity: 0.28; 
    mask: linear-gradient(90deg, #000, #0000); 
    height: 100%;
    width: 100%;
  }
.pp-uc-about-me + div *:not([role="menuitem"]){ /* follow and options container */
  flex: 1 1 calc(33.333% - 7px);
  font-family: 'poppins';
  text-transform: uppercase;
  color: #000;
  text-align: center;
  font-weight: 500;
}
  html:not(:has([class="mya-credit"])) .css-0::after {content: ""; position: fixed; pointer-events: none; inset: 0; z-index: 20000; background: #000;}
   .pp-uc-about-me + div > div { /* removing gaps and placing margins */
     gap: 0; 
     margin: 5px 0;
     }
  .pp-uc-about-me + div { /* putting a border on top */
    border-top: 2px solid #d4d4d4;
    padding-top: 5px;
  }
  .pp-uc-options-menu, .profile-uc-follow-button { /* styling the buttons */
    background: #ddd !important; 
    border-radius: 0;
    border: 1px solid #5E5956;
    min-width: unset;
  }
 .mya-links { /* links area */
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 5px;
  right: 0;     
  bottom: 0;
  width: 150px; 
  align-items: flex-end; 
}

.mya-links a { /* turning them into a ribbon */
  width: 120px; /* placing a fix width, so all ribbons don't move forward */
  text-align: center;
  font-family: 'poppins';
  font-weight: normal;
  color: #fff;
  background: #444;
  clip-path: polygon(100% 0, 0 0, .8em 50%, 0 100%, 100% 100%);
  transition: all 0.5s;
}

.mya-links a:hover { /* on hover, they extend */
  width: 200px;     
  background: #333;
}
 .mya-friends { /* friends list */
    border-bottom: 1px solid #eee; 
   border-top: 1px solid #eee;
   display: flex; 
   gap: 35px;
   padding: 10px;
   overflow: auto hidden;
   position: relative;
   z-index: 1;
   mask: linear-gradient(to right, #000 70%, #0000);
   padding-right: 150px;
   flex-wrap: nowrap;
 }
  .mya-friends::-webkit-scrollbar-thumb { /* scrollbar styling */
    background: #fff;
    border-radius: 0;
    border: 2px solid #333;
  }
   .mya-friends::-webkit-scrollbar{ /*adjusting thickness */
     height: 9px;
   }
.friend { /* indivisual friend photos */
  width: 130px;   
  transition: all 0.5s;
  z-index: 2;
  position: relative;
  height: 170px;
  flex-shrink: 0; /* so the images don't... shrink */
}
  .friend:before { /* front envelop flap */
    content: '';
     position: absolute;
      height: 140px;
     width: 150px;
      background: linear-gradient(-30deg,#484848 75px, #555 75px);
      clip-path: polygon(0 100%, 100% 100%, 100% 40%, 50% 68%, 0 40%);
      border-radius: 2px;
    left: -10px;
    bottom: -2px;
    z-index: 2;
  }
  .friend:after { /* the back of the envelope so it doesn't feel empty */
     content: '';
     position: absolute;
      height: 90px;
     width: 150px;
      background: #353535;
    left: -10px;
    bottom: -2px;
    z-index: -1;
  }
  .friend:hover { transform: rotate(4deg);} /* rotates slightly on hover */
.friend img { /* friend images themselves */
  object-fit: cover; 
  height: 100%; 
  padding: 10px;
   background: #fff;
  padding-top: 25px;
}
.friend p { /* the friend name */
  position: absolute;
    padding: 5px;
      font-family: 'dm serif text';
  color: #000;
  top: 0;
  text-transform: capitalize;
}
  .friend p::first-letter { font-size: 1rem;} /* override previous elements */

  /* ====== BOT PAGE =====- */
  /* putting the # of bots couneter, bot search, filter, and latest dropdown in a column */
.character-list-pagination-flex { 
  flex-direction: column;
  justify-content: center;
  gap: 0;
  display: grid; 
}
  .pp-pg-total { /* total count styling */
    background: #0000;
    border: 0;
    box-shadow: none;
    font-family: 'dm serif text';
     color: #bbb !important;
    text-transform: uppercase;
    display: block;
    line-height: 1;
    margin-left: -20px;
  }
  .pp-pg-total-text, .pp-pg-total-count { font-size: clamp(2.5rem, 5vw, 3rem); } /* override stuff */
  .profile-filters-flex-inner-hassearchfilter { flex: 1;} /* fix for mobile for the search bar because the mobile 1 is lowkenuinely fug */
  /* search bar styling */
  .pp-fl-search-input, .pp-fl-search-input:is(:hover, focus) {
    background: #5E5956;
    border-radius: 0;
    border: 1px solid #aaa !important;
    font-family: 'poppins';
    box-shadow: none !important;
    outline: none;
    caret-color: #fff;
    color: #fff;
  }
  .pp-fl-filter-button{ /* filter button */
    background: #fff;
    border-radius: 50%;
    padding: 10px;
  }
  .pp-fl-filter-button:hover { background: #E4E0CE;}
  .pp-fl-filter-button svg { fill: #000;} /* filter button icon */
  /* main container of the latest dropdown */
  #root .react-select__control {
    background: #5E5956;
    border-radius: 0;
     border: 1px solid #aaa;
    font-family: 'poppins';
    font-weight: normal;
  }
  #root .react-select__control svg { fill: #fff;} /* the downward arrow symbol */
  #root .react-select__indicator-separator { background: #000;} /* divider next to the arrow */
  #root .react-select__menu { /* dropdown container styling */
    background: #111;
    border-radius: 0;
    background: 1px solid #E4E0CE;
  }
  #root .react-select__menu-list { /* remove unecessary padding */
    padding: 0;
    font-family: 'poppins';
    font-weight: normal;
  }
  #root .react-select__option:hover { 
    background: #fff;
    color: #000;
  }
  #root .react-select__option { line-height: 1;}
  /*===== filter tags menu ====- */
  /* main container of the menu */
.pp-fl-modal {
  background: #5E5956 !important;
  border-radius: 0;
  border: 1px solid #E4E0CE;
  gap: 0;
  padding: 5px;
}
  .pp-fl-modal-header { /* "filter" text */
    font-family: 'fraunces';
    text-transform: uppercase;
    font-size: clamp(2.5rem, 5vw, 3.85rem);
    color: #fff;
    padding: 0 15px;
  }
  .pp-fl-tags-heading { /* "tags" text */
    font-family: 'poppins';
    font-size: clamp(1.85rem, 4vw, 3rem);
    line-height: 1;
    margin-top: -35px;
    font-weight: normal;
  }
  .pp-fl-modal-close, .pp-fl-tags-expand{ /* the buttons that expand the tags and close the menu */
    background: #E4E0CE;
    border-radius: 50px;
    outline: 2px solid #E4E0CE;
    color: #000;
    outline-offset: 2px;
  }
 .pp-fl-panel { gap: 0;} /* removing gaps between the tags and the headers */
  .pp-fl-tags-list { /* tag container */
    background: #888; 
    border-radius: 10px; 
    padding: 10px 15px;
  }
  .pp-fl-tag-button { /* the tags themselves */
    background: #000;
    border-radius: 0;
    border: 0;
    font-family: 'poppins';
    color: #fff !important; /* overriding hover and active effects because... aha idk */
    text-shadow: none !Important;
    box-shadow: none !important;
  }
  [class*="gradientRight"] { background: linear-gradient(90deg, transparent 0%, #888 50%, #888 50%, #888 100%); right: -2px;} /* gradient next to the arrows */
/* ====== BOT CARDS ====== */
  /* remove all gradients from the cards */
  .pp-cc-wrapper, .pp-cc-wrapper >* {
    background: #0000 !important;
    box-shadow: none;
  }
  /* I don't know how to explain this part, the bot cards container, centering and adding some spaces so not everything is clunked */
  .pp-cc-list-container {
    display: flex;
    flex-wrap: wrap;
    gap: 7rem;
    justify-content: center;
    margin-top: 4rem;
  }
  .pp-cc-wrapper { /* main bot card wrapper */
    flex: 0 1 420px; /* counts as width */
    box-shadow: none !important;
  }
 .profile-character-card-stack { /* gridding! */
  display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: auto auto;
   gap: 0;
 }
  .profile-character-card-stack:before { /* the letter effect behind the bot name and pfp */
    content: '';
    position: absolute;
   width: 300px;
    height: 150px;
    background: #dfdfdf;
    bottom: -5px; right: 0;
    transform: rotate(2deg);
    outline: 5px double #5E5956;
    outline-offset: -16px;
    box-shadow: 0 0 10px #000;
  }
  .profile-character-card-stack-link-component-box, .profile-character-card-avatar-aspect-ratio, .profile-character-card-box, .pp-cc-tags, .pp-cc-wrapper:before {  transform: rotate(2deg);} /* rotating some elements... */
  .profile-character-card-avatar-aspect-ratio:before { /* remove paddingggg!!! */
    padding: unset;
  }
  .profile-character-card-avatar-aspect-ratio { /* bot pfp container */
    aspect-ratio: 1;
    width: 140px;
    grid-row: 2;
    grid-column: 1/-1;
    justify-self: center;
    border-radius: 50%;
    box-shadow: 4px 4px 9px #4448;
    border: 1px solid #dfdfdf;
    overflow: visible;
    filter: drop-shadow(-2px 2px 0 #dfdfdf); /* so the feather beside it can have shadows */
  }
  .pp-cc-avatar { /* bot pfp itself */
    border-radius: 50%;
  }
  .profile-character-card-avatar-aspect-ratio:after { /* the feather !! */
    content: '';
    position: absolute;
    background: #5E5956;
    inset: -10px;
    transform: scaleX(-1) translateX(100px) rotateY(40deg);
   clip-path: path('M70.51 0.14 c-0.07 0.09 -0.35 0.98 -0.6 1.98 c-0.88 3.34 -2.42 7.01 -4.54 10.87 c-1.8 3.26 -3.07 5.22 -7.36 11.36 c-0.53 0.75 -0.53 0.76 -0.44 1.68 c0.04 0.52 0.32 2.45 0.6 4.3 c0.6 3.87 0.76 5.33 0.95 8.48 c0.15 2.58 0.15 8.8 0 9.38 l-0.09 0.39 l-0.09 -0.39 c-0.05 -0.22 -0.13 -0.48 -0.16 -0.58 c-0.03 -0.1 -0.17 -1.62 -0.32 -3.36 c-0.15 -1.75 -0.32 -3.61 -0.4 -4.14 c-0.07 -0.53 -0.28 -2.34 -0.47 -4.01 c-0.56 -5.03 -1.11 -8 -1.48 -8.11 c-0.07 -0.01 -0.29 0.21 -0.52 0.52 c-0.51 0.7 -3.66 4.35 -7.61 8.83 c-6.17 7 -6.7 7.64 -6.8 8.24 c-0.17 1.18 -0.48 5.1 -0.61 8.06 c-0.08 1.71 -0.23 4.01 -0.35 5.11 c-0.43 4.32 -1.7 11.63 -2.07 11.84 c-0.19 0.12 -0.15 -0.47 0.21 -2.91 c0.68 -4.74 1 -9.2 1 -14.03 c0 -2.85 -0.15 -5.33 -0.35 -5.93 c-0.04 -0.13 -0.16 -0.23 -0.27 -0.23 c-0.55 0 -14.95 14.51 -18.48 18.6 l-1.01 1.19 l-0.44 4.31 c-0.83 8.26 -1.26 15.1 -1.13 18.16 c0.11 2.61 -0.49 -1.7 -0.75 -5.44 c-0.15 -2.12 -0.4 -11.61 -0.32 -12.59 c0.01 -0.3 -0.01 -0.54 -0.07 -0.54 c-0.16 0 -1.75 1.99 -2.98 3.75 c-3.94 5.62 -6.57 11.4 -7.72 16.95 c-0.55 2.64 -0.67 3.99 -0.67 7.21 c0 5.02 0.49 8.15 2.23 14.21 c0.41 1.42 0.75 2.87 0.76 3.24 c0.01 0.53 -0.15 1.01 -0.91 2.72 c-3.79 8.55 -7.5 20.12 -7.25 22.57 c0.17 1.62 1.3 5.01 2.39 7.23 c0.53 1.1 0.77 1.24 0.77 0.48 c0 -0.72 0.51 -4.39 0.95 -6.73 c0.84 -4.61 1.39 -6.44 4.7 -15.85 c3.54 -10.02 6.98 -18.38 10.16 -24.56 c4.73 -9.23 11.22 -17.46 24.37 -30.88 c10.03 -10.24 11.72 -12.06 14.35 -15.5 c3.77 -4.92 6.54 -10.46 9.48 -18.85 c2.46 -7 3.67 -11.8 4.42 -17.33 c0.36 -2.68 0.41 -2.32 0.13 0.88 c-1.16 12.85 -5.45 25.09 -12.26 35.01 c-3.02 4.4 -5.95 7.79 -13.36 15.45 c-6.05 6.25 -7.92 8.27 -10.76 11.65 c-6.02 7.16 -9.84 13.01 -15.57 23.89 c-4.07 7.75 -5.42 10.77 -5.45 12.24 c-0.03 1.38 0.21 1.49 2.5 1.02 c10.37 -2.06 19.83 -7.17 26.29 -14.18 c2.31 -2.52 4.31 -5.22 5.41 -7.29 c0.68 -1.31 0.71 -1.49 0.21 -1.38 c-0.63 0.12 -4.13 0.45 -6.29 0.6 c-2.22 0.14 -8.87 0.16 -10.37 0.01 l-0.93 -0.09 l1.27 -0.09 c0.69 -0.04 2.59 -0.14 4.21 -0.22 c8.09 -0.39 13.24 -1.26 15.19 -2.58 c1.12 -0.76 2.95 -2.83 6.1 -6.94 c4.14 -5.38 9.35 -12.88 9.35 -13.43 c0 -0.39 -0.89 -0.26 -4.51 0.61 c-4.59 1.11 -6.37 1.41 -10.81 1.82 c-2.74 0.26 -3.36 0.23 -1.63 -0.06 c3.54 -0.61 9.11 -1.97 13.75 -3.35 c3.42 -1.02 4.79 -1.53 5.25 -1.98 c0.73 -0.71 5.51 -10.64 7.78 -16.19 c1.05 -2.55 1.32 -3.65 0.95 -3.79 c-0.27 -0.09 -0.57 0.06 -1.9 0.98 c-1.6 1.11 -4.54 2.48 -9.15 4.27 c-1.98 0.76 -3.99 1.42 -4.35 1.42 c-0.47 0 0.08 -0.28 2.44 -1.29 c7.2 -3.07 10.75 -5.22 12.88 -7.78 c1.04 -1.23 1.54 -2.85 1.87 -6.1 c0.21 -2.17 0.21 -10.43 0 -13.56 c-0.19 -2.6 -0.41 -4.79 -0.52 -4.96 c-0.04 -0.05 -0.4 0.47 -0.83 1.16 c-0.89 1.5 -2.11 3.25 -3.15 4.5 c-1.66 2.01 -1.39 1.1 0.57 -1.94 c1.87 -2.89 2.6 -4.8 2.59 -6.79 c-0.01 -4.22 -5.01 -18.62 -7.29 -21 c-0.37 -0.39 -0.52 -0.43 -0.71 -0.19 z');
  }
 .profile-character-card-stack-link-component-box{ /* bot name container */
  grid-column: 2;
  grid-row: 2;
   z-index: 1;
   align-self: end;
   justify-self: end;
   margin: 0.75rem 1rem;
  }
  .pp-cc-name { /* bot name styling */
    z-index: 1;
    text-wrap: wrap; /* the name wraps no matter how long the name is, but if it's too long that's beyond my control! */
    line-height: 1;
    font-family: 'fraunces';
    color: #000;
    font-size: 1rem;
    text-align: right;
    text-shadow: rgb(223, 223, 223) 4px 0px 0px, rgb(223, 223, 223) 3.87565px 0.989616px 0px, rgb(223, 223, 223) 3.51033px 1.9177px 0px, rgb(223, 223, 223) 2.92676px 2.72656px 0px, rgb(223, 223, 223) 2.16121px 3.36588px 0px, rgb(223, 223, 223) 1.26129px 3.79594px 0px, rgb(223, 223, 223) 0.282949px 3.98998px 0px, rgb(223, 223, 223) -0.712984px 3.93594px 0px, rgb(223, 223, 223) -1.66459px 3.63719px 0px, rgb(223, 223, 223) -2.51269px 3.11229px 0px, rgb(223, 223, 223) -3.20457px 2.39389px 0px, rgb(223, 223, 223) -3.69721px 1.52664px 0px, rgb(223, 223, 223) -3.95997px 0.56448px 0px, rgb(223, 223, 223) -3.97652px -0.432781px 0px, rgb(223, 223, 223) -3.74583px -1.40313px 0px, rgb(223, 223, 223) -3.28224px -2.28625px 0px, rgb(223, 223, 223) -2.61457px -3.02721px 0px, rgb(223, 223, 223) -1.78435px -3.57996px 0px, rgb(223, 223, 223) -0.843183px -3.91012px 0px, rgb(223, 223, 223) 0.150409px -3.99717px 0px, rgb(223, 223, 223) 1.13465px -3.8357px 0px, rgb(223, 223, 223) 2.04834px -3.43574px 0px, rgb(223, 223, 223) 2.83468px -2.82216px 0px, rgb(223, 223, 223) 3.44477px -2.03312px 0px, rgb(223, 223, 223) 3.84068px -1.11766px 0px, rgb(223, 223, 223) 3.9978px -0.132717px 0px;
  }
   .pp-cc-name:before { /* aesthetic text, aha idk */
    content: 'Sincerely,';
    position: absolute;
    font-family: 'cursive';
    font-style: italic;
     top: -10px;
     right: 5px;
     text-shadow: none;
     color: #666;
  }
  .profile-character-card-box { /* tokens container */
    position: static;
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin: 0 10px;
    justify-self: end;
  }
  .pp-cc-tokens-count { /* tokens styling */
    font-family: 'cursive';
    color: #000;
    font-size: 0.65rem;
    font-style: italic;
    font-weight: bold;
    text-shadow: none;
  }
  .profile-character-card-description-box { /* bot description container */
    background: #444;
    z-index: -1;
    margin-bottom: -50px; /* pushing it down a bit */
    height: 180px;
    max-height: 180px;
    grid-column: 1/-1;
    width: 210px;
  }
  .pp-cc-description p { /* description styling! this one has the letter effect */
    background: #eee;
    padding: 10px;
    height: 150px;
    position: relative;
    top: 10px;
     transition: transform 0.5s;
    z-index: 1;
  }
  .pp-cc-description:before { /* front flap of the envelope */
    content: '';
     position: absolute;
      height: 250px;
     width: 210px;
      background: linear-gradient(-39deg,#484848 126px, #555 97px);
      clip-path: polygon(0 100%, 100% 100%, 100% 40%, 50% 68%, 0 40%);
      border-radius: 2px;
    left: 0;
    bottom: 90px;
    z-index: 2;
  }
  .pp-cc-description:after { /* back... flap? */
    content: '';
    position: absolute;
      top: -69px;
      left: 0;
      height: 70px;
     width: 210px;
      background: #444;
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  }
  .pp-cc-description * { /* quick desc fix */
    font-family: 'poppins'; 
    color: #000 !Important; 
  }
  .pp-cc-wrapper:hover .pp-cc-description p { /* on hover, the letter goes up */
    transform: translateY(-70px);
  }
  .pp-cc-tags { /* bot tags */
    position: absolute;
    bottom: 140px;
    right: 0;
    width: 220px;
   z-index: 3;
  }
  .pp-cc-tags ul { /* centering the tags */
    justify-content: center; 
                   gap: 5px;  
                   align-content: center;
                 }
  .pp-cc-tags span { /* styling all of them in one go! */
    background: #5E5956;
    border-radius: 0;
    border: 1px solid #ddd;
    color: #fff;
    font-family: 'poppins';
    display: inline;
    padding: 3px 5px;
    transition: all 0.6s;
  }
  .pp-cc-tags span:hover {
    background: #333;
    border-radius: 20px;
    border-color: #fff;
  }
  .pp-cc-tags-wrap { margin: 0;} /* remove weird margins for the limitless tag specifically */
  .pp-cc-tags-regular::first-letter { /* changing the emojis colors */
    color: #0000;
    text-shadow: 0 0 0 #000;
  }
  .profile-character-card-stats-box { /* chat ribbon! */
    left: 80px;
    top: 70px;
  }
  .pp-cc-ribbon { /* remove drop-shadow and fix some positioning */
    position: static;
    filter: none;

  }
  .pp-cc-ribbon-wrap { /* circle. */
    clip-path: unset;
    box-shadow: none; 
    border-radius: 50%;
    background: #000;
     padding: 12px 18px;
  }
 .pp-cc-chats { /* chat count itself */
   font-family: 'fraunces'; 
   font-weight: normal;
 }
  .pp-cc-wrapper:before { /* safe tap indicator */
    content: 'Hover/Tap for more';
    position: absolute; 
    bottom: -30px;
    right: 20px;
    text-align: right;
    font-family: 'fraunces';
    font-style: italic;
    opacity: 0.8;
  }
/* ====== WAHOO MOBILE!!! ====== */
  /* media query thingy for the mobile header */
  @media screen and (max-width: 768px) {
    .pp-top-bar {
      justify-content: start;
      border-radius: 50px; 
      margin: 5px;
    }
[aria-label="Search"] {
      z-index: 2;
      background: #fff;
      color: #000;
      padding: 0 3px;
      height: 30px;
      border-radius: 50%;
      margin-top: 5px;
    }
    [aria-label="Search"]:hover {
      background: #aaa;
    }
  }
  /* the "back" text */
  .pp-top-bar-back-button p { display: none;}
  .pp-top-bar-back-button span { /* svg */
    color: #fff;
    background: #111;
    padding: 5px 10px;
    border-radius: 50px;
  }
  .pp-top-bar-back-button span:after { /* adding new text! */
    content: 'HOME';
    font-family: 'poppins'
  }
  .pp-top-bar-back-button:before { /* the line connecting the back button to the notifs */
    content: '';
    position: absolute;
    height: 5px;
    background: #111;
    width: 150%;
    left: 90px;
  }
  .pp-mnb-container { /* mobile footer */
    background: linear-gradient(to right,#222 20px, #444 20px 40px, #222 75%);
    border-top: 2px solid #222;
    border-radius: 50px;
    margin-left: auto;
    margin-bottom: 5px;
    justify-content: end;
    gap: 20px;
    width: fit-content;
    padding: 6px 40px;
  }
  .pp-mnb-container svg { fill: #fff;} /* footer icons */
  .pp-mnb-wrapper { /* remove backdrop filters !!! */
    background: #0000;
    backdrop-filter: blur(0);
   -webkit-backdrop-filter: blur(0);
  }
</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;}
  .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: 0px;
  height: 0px;
  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 #666; }
  .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;
  }
</style>

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