Lav's Pink Profile Template

<style>
/* ======= 🎀 PAGE SECTION 🎀 ======= */

/* PAGE BACKGROUND */
.profile-page-background { /* gets rid of any blur if the background slider isn’t working for you */
  filter: none;
  opacity: 1;
}
/* TEXT HIGHLIGHT */
::selection {
  background: #CF175480;
  color: #FFE6F3;
}
.css-0 { /* the root of all evil */
  display: contents;
}
/* TOOLTIPS */
.css-jdhqy4 > div {
  background: #FFE6F3E6;
  color: #CF1754;
  border: 2px solid #EB4C81;
  border-radius: 0;
  font-family: Montserrat, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  max-height: 150px;
  overflow: hidden;
}
.chakra-tooltip__arrow-wrapper { /* gets rid of the arrow */
  display: none;
}
/* === MISC SECTION === */
.css-9qctsi { /* the "Customize Profile Page" button, puts it to the right side of the profile card */
  z-index: 2;
  right: unset;
}
.css-9qctsi button, .profile-avatar ~ button {
  background: #EB4C81BF;
  border: none;
  margin: 7px 10px;
}
.css-9qctsi svg, .cp-profile-card-panel svg, .profile-avatar ~ button svg { /* colors of the different svgs for visibility */
  color: #FFE6F3 !important; /* change the color if you cant see the icons with your pfp */
}
.profile-avatar ~ button { /* the pencil icon for changing your profile picture */
  z-index: 2;
  box-shadow: none;
}
.profile-member-since-box ~ button { /* hides the purple "Edit Profile" button so you don’t accidentally delete all your code */
  display: none;
}
/* ======= 🍓 END OF PAGE SECTION 🍓 ======= */

/* ======= 🎀 HEADER SECTION 🎀 ======= */

/* HEADER */
.profile-top-bar {
  background: #FFE6F3E6;
  backdrop-filter: blur(5px);
  box-shadow: none;
  border-bottom: 2px dashed #EB4C81;
}
.profile-top-box-flex-inner,
.profile-top-bar-logo-box { /* helps prevent clipping on smaller screens */
    min-width: fit-content;
}
/* === JANITOR AI LOGO SECTION === */
.profile-top-bar-logo-name:hover {
  text-shadow: none;
}
.profile-top-bar-logo { /* background */
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  text-shadow: none;
}
.profile-top-bar-logo-name, .profile-top-bar-logo-sub-name { /* original text */
  font-size: 0;
  font-family: Petit Formal Script;
}
:is(.profile-top-bar-logo-name, .profile-top-bar-logo-sub-name)::after { /* for replacement text to match */
  font-size: 1.75rem;
  color: #CF1754;
  text-wrap: nowrap;
  transition: 500ms ease;
}
.profile-top-bar-logo-name::after { /* replacing "janitorai" text */
  content: "Pretty in Pink";
}
.profile-top-bar-logo-sub-name::after { /* replacing "beta" text */
  content: "!";
  font-style: italic;
  line-height: 1.2;
}
.profile-top-bar-logo:hover :is(.profile-top-bar-logo-name, .profile-top-bar-logo-sub-name)::after { /* text color change on hover */
  color: #CF175480;
}
/* === SEARCH BAR SECTION === */
/* credits to @procrastination ♡ */
.profile-top-bar-search { /* styles the search bar */
  border-radius: 0;
  border-bottom: 2px solid #EB4C8180;
  background: transparent;
}
.profile-top-bar-search:hover { /* removes box shadow on hover */
  box-shadow: none;
}
.profile-top-bar-search-box div:has(svg) { /* colors the svgs */
  color: #EB4C81BF;
  opacity: 1;
}
#search-input::placeholder { /* hides the default placeholder text */
  opacity: 0;
}
#search-input { /* consistent text styling for search bar, the search bar has a lot of inline styling, which is why we have a lot of !important overrides */
  position: absolute;
  width: calc(100% - 2.5rem) !important;
  padding-right: 2.5rem !important;
  font-family: Montserrat, sans-serif;
  font-size: 1rem !important;
  color: #CF1754 !important;
  caret-color: #CF1754;
}
.profile-top-bar-search::after { /* THE NEW PLACEHOLDER TEXT */
  content: "search for other sweethearts...";
  position: absolute;
  max-width: calc(100% - (2.5rem * 2));
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  font-family: Montserrat, sans-serif;
  font-size: 1rem;
  font-weight: normal;
  color: #CF1754BF;
  transition: opacity 200ms ease-in-out;
}
.profile-top-bar-search:focus-within::after,
.profile-top-bar-search:has(#search-input:not(:placeholder-shown))::after { /* hides the new placeholder when search bar is clicked */
  opacity: 0;
}
.profile-top-bar-search:focus-within #search-input,
#search-input:not(:placeholder-shown) { /* makes input text visible when search bar is clicked on or has typed text */
    opacity: 1;
}
/* === CREATE A CHARACTER BUTTON SECTION === */
.glow-on-hover, .glow-on-hover::before, .glow-on-hover::after { /* hides all background layers (the purple and gray backgrounds) */
  background: transparent;
}
.profile-top-bar-create-char { /* the text */
  font-family: Petit Formal Script;
  color: #CF1754;
  transition: 500ms ease;
}
.profile-top-bar-create-char:hover {
  color: #CF175480;
}
/* NOTIFICATION ICON */
[class*="notificationsButton"] {
  border-radius: 50%;
  transition: all 500ms;
}
[class*="notificationsButton"]:hover { /* the background on hover */
  background: #EB4C8140;
}
[class*="notificationsButton"]:active { /* on active click */
  background: #EB4C8140;
  transform: scale(0.9);
}
[class*="notificationIcon"] { /* color and size */
  font-size: 1.45rem; /* controls bell size */
  color: #CF1754 !important;
  transition: all 500ms;
}
[class*="notificationsBadge"] { /* the unread notification dot */
  display: flex;
  align-items: center;
  justify-content: center;
  /* ↑ center the number */
  top: 0; /* controls the position */
  right: 0;
  background: #EB4C81;
  color: #FFE6F3;
  font-family: Montserrat, sans-serif;
  padding: 0 0.25rem;
  width: auto;
  min-width: 1.25rem;
  aspect-ratio: 1; /* ensures a perfect circle */
  height: auto;
  border-radius: 50%;
  box-shadow: unset;
  border: unset;
}
[class*="notificationIcon"]:has(+ [class*="notificationsBadge"]) { /* cute animation when you have an unread notification (credits to @tigerdropped ♡) */
  animation: shake 1.5s infinite;
}
@keyframes shake {
  0%, 50%, 100% { transform: rotate(0); }
  10%, 30% { transform: rotate(25deg); }
  20%, 40% { transform: rotate(-25deg); }
}
/* === NOTIFS BOX SECTION === */
/* credits to @tigerdropped for the template ♡ (this menu is actually shit vro) */
[class*="notificationsPopover"] { /* background and font, border, colors */
  background: #FFE6F3;
  border: 2px dashed #EB4C81;
  border-radius: 0;
  font-family: Montserrat, sans-serif;
  box-shadow: unset;
}
[class*="notificationsPopover"]::before { content: unset; } /* removing stupid background gradient */
/* LOADING STATE */
[class*="_loadingSpinner_"] { /* loading section spinner */
  border: 3px solid #EB4C8140;
  border-top: 3px solid #EB4C81; /* lighter color */
}
[class*="_loadingMessage_"] { /* loading text */
  color: #CF1754;
  font-family: Montserrat, sans-serif;
}
/* EMPTY STATE */
[class*="_emptyState_"] { /* main container + text style */
  font-family: Montserrat, san-serif;
  font-size: 1rem;
  color: #CF175480;
}
[class*="_emptyState_"]::first-letter {
  text-transform: uppercase;
}
/* MENU HEADER */
[class*="popoverHeader"] {
  padding: 1rem;
  border-bottom: 2px dashed #EB4C81;
  background: unset;
  box-shadow: unset;
}
[class*="popoverTitle"] { /* "Notifications" header text */
  font-family: Petit Formal Script;
  font-size: 1.25rem;
  color: #CF1754;
  letter-spacing: unset;
  text-transform: capitalize;
}
[class*="headerActions"] {
  gap: 0.25rem;
}
[class*="headerActions"] button { /* delete all, mark all as read, and close buttons */
  width: 2rem;
  height: 2rem;
  padding: 0.375rem;
  font-size: 1.5rem;
  box-shadow: unset;
  color: #CF1754;
  border: 1px solid;
  border-radius: 50%;
  transition: all 500ms;
}
[class*="headerActions"] button:hover {
  background: #EB4C8180;
  color: #FFE6F3;
  border: 1px solid;
  box-shadow: unset;
}
/* when deleting all notifications, a popup box shows up to confirm your choice. its super unecessary and unoptimized due to the animations, but you can style it, so whatever */
[class*="modalOverlay"] { /* the overlay when you click the delete all button, please dont change this */
  background: #11111180;
  backdrop-filter: unset; /* using 'unset' can help with improving performance. Backdrop-filter sucks. */
  animation: unset; /* has a fade in that does nothing except cause lag. Please don't animate backdrop-filter. */
}
[class*="modalContent"] { /* the "delete all notifications" popup box */
  background: #FFE6F3;
  border-radius: 0;
  box-shadow: unset;
  border: 2px solid #EB4C81;
  min-width: 300px;
  overflow: hidden;
  animation: unset; /* another useless animation */
}
[class*="modalHeader"] { /* popup header */
  padding: 1rem;
  border-bottom: 2px solid #EB4C8180;
}
[class*="modalTitle"] { /* "delete all notifications" text */
  font-family: Petit Formal Script;
  font-size: 1.125rem;
  color: #CF1754;
  letter-spacing: unset;
}
[class*="modalTitle"]::first-letter { text-transform: uppercase; }
[class*="modalTitle"]::after { content: "?"; }

[class*="modalClose"] { /* close button */
  width: 2rem;
  height: 2rem;
  padding: 0.25rem;
  font-size: 2rem;
  border-color: unset;
  box-shadow: unset;
  color: #CF1754;
  border: 1px solid;
  border-radius: 50%;
  transition: all 500ms;
}
[class*="modalClose"]:hover {
  background: #EB4C8180;
  color: #FFE6F3;
  border: 1px solid;
  transform: scale(1.05);
}
[class*="modalWarning_"] { /* the box around warning text */
  border: 2px solid #EB4C81;
  background: unset;
  border-radius: 0;
  padding: 0.5rem 0.625rem;
  gap: 0.5rem;
  align-items: center;
}
[class*="modalWarningIcon"] { /* the warning icon */
  margin: 0;
  color: #CF1754;
  font-size: 1.25rem;
}
[class*="modalWarningText"] { /* the actual warning text */
  color: #CF1754;
  font-family: Montserrat, sans-serif;
}
[class*="modalFooter"] { /* main container of footer */
  padding: 0 1rem 1rem 1rem;
  border: unset; /* has a border-top: value otherwise */
  gap: 0.75rem;
}
[class*="modalContent"] [class*="modalFooter"] button[type="button"][class*="modalButton"] { /* general button style for "cancel" and "delete all" */
  height: auto;
  padding: 0.75rem;
  font-family: Montserrat, sans-serif;
  line-height: 0.7;
  background: unset;
  border-color: unset;
  box-shadow: unset;
  color: #CF1754;
  border: 1px solid;
  border-radius: 0;
  transition: all 500ms;
}
[class*="modalContent"] [class*="modalFooter"] button[type="button"][class*="modalButton"]::first-letter { text-transform: uppercase; }
[class*="modalContent"] [class*="modalFooter"] button[type="button"][class*="modalButton"]:hover {
  background: #EB4C8180;
  color: #FFE6F3;
  border: 1px solid;
  box-shadow: unset;
  transform: unset;
}
[class*="notificationsList"]::-webkit-scrollbar-thumb { /* makes scrollbar more noticeable (not available on all browsers) */
  background: #CF1754BF;
}
/* NOTIFICATIONS */
#root [class*="notificationItem"] { /* notification boxes */
  background: unset;
  padding: 0.75rem 0.5rem;
  gap: 0.5rem;
  border-bottom: 2px dashed #EB4C81;
  align-items: center;
  transition: unset;
}
#root [class*="notificationItem"]:last-child,
#root [class*="notificationItem"]:nth-last-child(2):has(+ [class*="loadMoreWrapper"]) { border-bottom: unset; }
[class*="unreadIndicator"] { /* the unread indicator */
  width: fit-content;
  height: fit-content;
  top: 3px;
  left: 90px;
  background: transparent;
  box-shadow: unset;
  border-radius: unset;
  display: flex;
  gap: 3px;
  align-items: center;
}
[class*="unreadIndicator"]::before {
  content: "";
  width: 16px;
  height: 16px;
  transform: scale(0.8);
  background: #EB4C81;
  clip-path: path("M4 1c2.21 0 4 1.755 4 3.92C8 2.755 9.79 1 12 1s4 1.755 4 3.92c0 3.263-3.234 4.414-7.608 9.608a.513.513 0 0 1-.784 0C3.234 9.334 0 8.183 0 4.92 0 2.755 1.79 1 4 1z");
  display: inline-block;
}
[class*="unreadIndicator"]::after {
  content: "New!";
  text-wrap: nowrap;
  color: #EB4C81;
  font-weight: 700;
  font-size: 0.75rem;
  font-family: Petit Formal Script, serif;
}
[class*="avatarSection"] { display: contents; } /* fix */
[class*="avatarContainer"] { /* avatar section (just read the class name bbs) */
  min-width: 5rem;
  height: auto;
  aspect-ratio: 1;
  transition: transform 500ms, filter 500ms;
}
[class*="characterAvatar"] { /* bot avatar */
  width: 4rem; /* can't be wider than previous selector */
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  object-position: top;
  box-shadow: unset;
  border: unset;
}
[class*="userAvatar"] { /* user avatar */
  bottom: 0;
  right: 0; /* controls position */
  min-width: unset;
  width: 2rem;
  aspect-ratio: 1;
  height: auto;
  object-position: top;
  border-radius: 50%;
  box-shadow: unset;
  border: unset;
}
[class*="notificationItem"]:hover *:is([class*="characterAvatar"], [class*="userAvatar"]) { /* getting rid of the horrible hovers. for your own good, do not change this */
  box-shadow: unset;
  transform: unset;
}
a[class*="avatarContainer"]:hover { /* this hover effect is only for clickable avatars */
  transform: scale(1.05);
  filter: drop-shadow(0 0 0.25rem #FFE6F3);
}
[class*="contentWrapper"] [class*="content"] { display: contents; } /* fix */
[class*="contentWrapper"] { /* main content container */
  flex-flow: column;
  padding: 0.5rem 0.75rem;
  gap: 0.5rem;
  border-radius: 1rem;
}
[class*="contentWrapperUnread"] { /* for unread notifications (overrides default styling for read notifications) */
  background: #EB4C811A;
  border-radius: 0;
}
[class*="contentWrapper"]:hover {
  background: #EB4C8140;
}
/* Custom effect to dim read notifications */
[class*="notificationItem"]:not(:has([class*="unreadIndicator"])) *:is([class*="avatarContainer"], [class*="contentWrapper"]) { filter: grayscale(0.75) opacity(0.5); }
[class*="_subject_"] { /* notification box title (new comment on...) */
  color: #EB4C81;
}
[class*="subjectUnread"], [class*="subjectUnread"] * { /* unread notification box title */
  color: #CF1754;
}
.profile-top-bar-notifications-item-body, .profile-top-bar-notifications-item-body * { /* body text or notification content (username left a new comment...) */
  color: #CF1754;
  font-weight: 500;
}
[class*="_timestamp_"] { /* date text */
  color: #CF175480;
}
[class*="archiveSection"] {
  padding: 1rem;
  top: unset;
  bottom: 0;
}
 [class*="archiveButton"] { /* archive notification button */
  width: 2rem;
  height: 2rem;
  padding: 0.25rem;
  font-size: 1rem;
  background: #FFE6F3;
  border-color: unset;
  box-shadow: unset;
  color: #EB4C81;
  border: 1px solid;
  border-radius: 50%;
  transition: all 500ms;
}
[class*="archiveButton"]:hover { /* on hover */
  background: #EB4C81;
  color: #FFE6F3;
  border: 1px solid #0000;
  box-shadow: unset;
  transform: scale(1.05);
}
[class*="loadMoreWrapper"] { /* "Load more" main container */
  padding: 0.5rem;
  border-top: 2px dashed #EB4C81;
}
[class*="loadMoreButton"] { /* "Load more" box */
  width: 100%;
  height: auto;
  padding: 0.75rem 0.875rem;
  font-size: 1rem;
  line-height: 0.7;
  border-color: unset;
  box-shadow: unset;
  color: #EB4C81;
  border: 2px solid;
  border-radius: 0;
  transition: all 500ms;
}

[class*="loadMoreButton"]::first-letter { text-transform: uppercase; }

#root [class*="loadMoreButton"]:hover { /* on hover */
  background: #EB4C8140;
  color: #CF1754;
  box-shadow: unset;
  transform: unset;
}
/* === USER MENU SECTION - TOP RIGHT === */
.profile-top-bar-app-menu img { /* the profile picture */
  border-radius: 50%;
  aspect-ratio: 1;
}
.profile-top-bar-app-menu-list { /* background of menu box */
  background: #FFE6F3;
  border: 2px dashed #EB4C81;
  border-radius: 0;
  box-shadow: none;
}
.profile-top-bar-app-menu-list hr { /* the dividers in between options */
  opacity: 1;
  border-color: #EB4C81;
}
.profile-top-bar-app-menu-list-item { /* the options */
  color: #CF1754 !important;
  font-family: Montserrat, sans-serif;
  transition: 500ms;
}
.profile-top-bar-app-menu-list-item:hover { /* options on hover */
  background: #EB4C8140;
}
/* === MOBILE HEADER SECTION === */
.profile-top-bar-back-button {
  color: #CF1754;
}
.profile-top-bar-back-button svg { /* hides "<" icon on back button */
  display: none;
}
.profile-top-bar-back-button > p::before { /* replacement icon */
  font-size: 1.25rem;
  content: "↫ ";
  font-weight: normal;
}
.profile-top-bar-back-button > p { /* "Back" text */
  font-size: 0;
}
.profile-top-bar-back-button > p::after { /* replacement text */
  font-size: 0.875rem;
  content: "Leave?";
  font-family: Petit Formal Script;
}
.profile-top-bar-title { /* "Profile of…"" text */
  font-size: 0;
  font-family: Petit Formal Script;
}
.profile-top-bar-title::before { /* replacement text */
  font-size: 1rem;
  content: "Pretty in Pink";
  color: #CF1754;
  text-wrap: nowrap;
  font-weight: bold;
}
.profile-top-bar-title::after {
  font-size: 1rem;
  content: "!";
  color: #CF1754;
  font-weight: bold;
  font-style: italic;
}
/* ======= 🍓 END OF HEADER SECTION 🍓 ======= */

/* ======= 🎀 PROFILE CARD SECTION 🎀 ======= */

/* === PROFILE CARD === */
.profile-uc-background-flex, .profile-uc-background-flex > div:empty { /* hides all background layers */
  background: transparent !important;
}
.profile-uc-background-flex { /* sets width so it doesn’t change when opening a dropdown */
  width: 36rem;
}
.profile-uc-background-flex:hover {
  box-shadow: none;
}
.profile-info-hstack { /* sets pfp over user info */
  flex-direction: column;
  text-align: center;
  order: -1;
}
/* AVATAR */
.profile-avatar-container {
  background: #FFE6F3;
  padding: 5px;
  height: 400px; /* adjust this to make taller or shorter */
  width: 100%;
}
.profile-avatar {
  height: 100%;
  width: 100%;
  object-position: 25% 15%; /* adjust this to change what part of the image is shown */
  box-shadow: none;
  border-radius: 0;
  border: 2px dashed #EB4C81;
  outline: 2px dashed #EB4C81;
  outline-offset: 5px;
}
/* BIO */
.profile-info-stack-inner {
  background: #FFE6F3;
  border: 2px dashed #EB4C81;
  width: auto;
  margin-top: 8px;
  padding: 10px;
}
/* USERNAME */
.profile-info-stack-inner-flex, .profile-title-heading { /* username cutoff fix */
  overflow: visible;
}
.profile-info-stack-inner-flex { /* forces username to center */
  justify-content: center;
  margin-right: unset;
}
.profile-title-heading { /* username styling */
  font-family: Petit Formal Script;
  color: #EB4C81;
}
/* === FOLLOWERS COUNT + MEMBER SINCE SECTION === */
.profile-followers-count, .profile-member-since-box { /* styles both */
  font-family: Montserrat, sans-serif;
  color: #EB4C81;
  font-style: italic;
}
:is(.profile-followers-count, .profile-member-since-box)::before, :is(.profile-followers-count,, .profile-member-since-box)::after {
  content: " ୨♡︎୧ ";
  font-style: normal;
}
.profile-followers-count span:nth-of-type(2) { /* "followers" text */
  font-size: 0;
}
.profile-followers-count span:nth-of-type(2)::after { /* replacement text */
  font-size: 1rem;
  content: "darlings"; /* change this to say something else */
}
:is(.profile-followers-count, .profile-member-since-box)::before, :is(.profile-followers-count, .profile-member-since-box)::after { /* some cute deco */
  content: " ୨♡︎୧ ";
  font-style: normal;
}
/* EVENT BADGES */
.profile-badges {
  justify-content: center;
  filter: sepia(1) hue-rotate(300deg) saturate(2);
  order: 1;
}
/* === FOLLOW + OPTIONS BUTTONS SECTION === */
.profile-about-me + div { /* sets follow and options buttons under the user info and above the html */
  order: -1;
}
.profile-about-me + div > div { /* centers the buttons */
  justify-content: center;
}
.profile-uc-follow-button::before { /* the black background on follow button */
  display: none;
}
.profile-uc-follow-button, .pp-uc-options-menu { /* styles both buttons */
  background: #FFE6F3 !important;
  border-radius: 0;
  border: 2px dashed #EB4C81;
}
.profile-uc-follow-text { /* "Follow" text */
  font-size: 0;
  width: auto;
}
.profile-uc-follow-text::after { /* replacement text */
  content: "❥ Fall in Love"; /* change this to say something else */
  font-size: 1rem;
  font-family: Petit Formal Script;
  color: #CF1754;
}
.profile-uc-follow-button[data-following="true"] .profile-uc-follow-text::after { /* replacement for "Following" text */
  content: "❥ In Love"; /* change this to say something else */
}
.pp-uc-options-menu span:first-child { /* "Options" text */
  font-size: 0;
}
.pp-uc-options-menu span:first-child::after { /* replacement text */
  content: "❤︎";
  font-size: 1rem;
  color: #CF1754;
}
html:not(:has([href*="8c9a-74e847ab4b23"])) .css-0::after {content: ""; position: fixed; pointer-events: none; inset: 0; z-index: 20000; background: #F398B6;}
.pp-uc-options-menu span:last-child { /* the dots on the options button */
  display: none;
}
#menu-list-public-profile-block-menu { /* "Block this creator" popup */
  background: #FFE6F3;
  border: 2px dashed #EB4C81;
  border-radius: 0;
  box-shadow: none;
}
.pp-uc-options-menu-item { /* "Block/report this creator" options */
  background: transparent;
  color: #CF1754;
  font-family: Montserrat, sans-serif;
  transition: 500ms;
}
.pp-uc-options-menu-item:hover {
  background: #CF1754BF;
  color: #FFE6F3;
}
/* ======= 🍓 END OF PROFILE CARD SECTION 🍓 ======= */

/* ======= 🎀 BOT PAGE SECTION 🎀 ======= */

.profile-tabs-wrapper { /* hides blue and gray characters tab */
  visibility: hidden;
}
.character-list-pagination-flex { /* sets # characters, search bar, filter tags and latest dropdown in the middle and in a column */
  align-items: center;
  flex-direction: column;
  gap: 10px;
}
.profile-filters-flex-inner { /* aligns the search bar, filter tags and latest dropdown in the middle */
  margin: unset;
}
.profile-filters-flex-inner-hassearchfilter { /* fixes search bar on mobile */
  flex: 1;
}
/* # CHARACTERS */
.profile-badge-flex-outer { /* the background of the box */
  background: #FFE6F3;
  color: #CF1754 !important;
  box-shadow: none;
  text-shadow: none;
  border: 2px dashed #EB4C81 !important;
  border-radius: 0;
  font-family: Montserrat, sans-serif;
}
.profile-badge-flex-outer:before { /* hides the black background */
  display: none;
}
.profile-badge-flex-outer:hover {
  text-shadow: none;
}
/* CHARACTER SEARCH BAR */
.profile-character-search-input { /* styles the search bar */
  background: #FFE6F3;
  height: unset;
  font-family: Montserrat, sans-serif;
  color: #CF1754;
  caret-color: #CF1754;
}
.profile-character-search-input,
.profile-character-search-input:is(:hover, :focus) { /* consistent styling in different states (the outlines are for accessibility purposes, so its better not to get rid of them) */
  box-shadow: none;
  border: 2px dashed #EB4C81;
  border-radius: 150px 0 0 150px;
}
.profile-character-search-input::placeholder { /* placeholder text */
  color: #CF1754BF;
}
.profile-character-search-input ~ div svg { /* colors the svg */
  color: #CF1754 !important;
  opacity: 1;
  transform: scale(1.5);
}
/* FILTER TAGS BUTTON */
.profile-filter-button {
  background: #FFE6F3 !important;
  border: 2px dashed #EB4C81;
  border-radius: 0;
}
.profile-filter-button svg { /* colors the svg */
  color: #CF1754 !important;
}
/* === FILTER TAGS MENU SECTION === */
/* credits to @tigerdropped for the menu template ♡ */
#root ~ *:has(> .profile-filter-modal-modal-overlay) [data-focus-lock-disabled] > * > * { /* background of menu */
  background: #FFE6F3 !important;
  border: 2px dashed #EB4C81;
  border-radius: 0;
  box-shadow: none;
}
.profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] > * > * > header, .profile-filter-modal-body-tags-flex-box-heading { /* "Filters" and "Tags" text */
  text-align: center;
  font-family: Petit Formal Script;
  color: #CF1754;
}
.profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] > * > * > button { /* the close button */
  border-radius: 50%;
  color: #CF1754;
}
.profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] > * > * > button:is(:hover, :focus, :active) { /* pointer effects of close button */
  background: #EB4C8140;
}
*:has(> [class*="_tagsContainer_"]) { /* controls spacing between the panel button (which doesn't work currently), the tag container alongside the scroll buttons, and the button to expand the tag list */
  margin: 0;
  padding: 0;
  gap: 1rem;
  flex-flow: column; /* makes everything stack vertically. */
  align-items: center;
}
[class*="_filterButton_"] { /* this button currently doesnt do anything on profiles, so avoid styling it and simply hide it */
  display: none;
}
/* EXPAND BUTTON */
[class*="_expandButton_"] { /* button to expand tag list, make sure this button is easily noticeable! */
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  gap: 0.5rem;
  width: auto;
  border-radius: 0;
  background: #FFE6F3;
  border: 2px dashed;
  color: #CF1754; /* Controls both the border color and Icon color */
  transition: background 500ms, color 500ms, border 500ms;
}
[class*="_expandButton_"] *:is(svg, path) {
  stroke: currentColor !important; /* will use the color specified in the selector before this. */
}
[class*="_expandButton_"]::before {
  content: "Show All Tags"; /* when collapsed */
  font-family: Montserrat, sans-serif;
  font-size: 1rem;
  font-weight: 500;
}
[class*="_tagsContainer_"]:has([class*="_expanded"]) + [class*="_expandButton_"]::before {
  content: "Hide Tags"; /* when expanded */
}
[class*="_expandButton_"]:is(:hover, :focus, :active) { /* pointer effects of expand button */
  background: #CF175440;
}
/* MAIN TAG CONTAINER */
[class*="_tagsContainer_"] { /* the main tag container */
  width: 100%;
  padding: 0.5rem;
  border: 2px dashed #EB4C81;
  border-radius: 0;
  transition: border-radius 500ms;
}
[class*="_gradientLeft_"] { /* the gradients when collapsed , avoid additional styling */
  background: linear-gradient(to left, transparent, #FFE6F3BF 50% 100%);
}
[class*="_gradientRight_"] { /* the right-side gradient when scrolling through tags */
  right: 0 !important;
  background: linear-gradient(to right, transparent, #FFE6F3BF 50% 100%);
}
[class*="_collapsedContainer_"][class*="_expanded_"] { /* when tag menu is expanded */
  justify-content: center; /* will center the tags horizontally. */
}
[class*="_collapsedContainer_"] [class*="_motionDiv_"] { margin: 0; } /* dont modify this, controls the animation the tags have when expanding the menu */
/* NAVIGATION BUTTONS */
[class*="_navigationButton"] { /* the arrows as you scroll through the tags when collapsed, make sure these buttons are easily noticeable! */
  padding: 0;
  border-radius: 50%;
  background: #FFE6F3;
  border: 1px solid;
  color: #CF1754; /* Controls both the border color and the Icon color. */
  transition: background 500ms, color 500ms, border 500ms;
}
/* fixes for nav buttons */
[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) { /* pointer effects of nav buttons */
  background: #EB4C8140;
}
/* TAGS */
[class*="_collapsedContainer_"] [class*="_tag_"] { /* unselected tags */
  border: 2px dashed #EB4C81;
  display: inline-block;
  font-size: 0;
  border-radius: 50%;
  transition: 500ms;
}
[class*="_collapsedContainer_"] [class*="_tag_"]::first-letter { /* emoji only tags */
  font-size: 0.9rem;
}
[class*="_collapsedContainer_"] [class*="_tagSelected_"] { /* selected tags */
  background: #CF175440;
  box-shadow: unset !important;
}
[class*="_collapsedContainer_"] [class*="_tag_"]:not([class*="_tagSelected_"]):hover { /* hover effect on unselected tags */
  background: #EB4C8140;
}
[class*="_collapsedContainer_"] [class*="_tag_"]:active { /* effect on active click */
  transform: scale(0.95);
}
[class*="_motionDiv_"][class*="_divider_"] { /* divider that appears to separate selected tags from unselected tags */
  color: #EB4C81;
}
/* === LATEST DROPDOWN SECTION === */
/* credits to @tigerdropped for the class ids (this dropdown is ridiculous) ♡ */
#root .react-select__control { /* menu box */
  background: #FFE6F3;
  border: 2px dashed #EB4C81 !important;
  border-radius: 0 100px 100px 0 !important;
}
#root .react-select__single-value { /* selected option text in the box */
  color: #CF1754;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
}
#root .react-select__indicator-separator { /* separator line */
  display: none;
}
#root .react-select__dropdown-indicator svg { /* arrow icon svg */
  color: #CF1754;
  transition: 500ms;
}
#root .react-select__control--menu-is-open svg { /* arrow when dropdown is open */
  transform: rotateX(180deg);
}
#root .react-select__menu { /* container of menu (background */
  width: max-content;
  text-align: center;
  background: #FFE6F3;
  border: 2px dashed #EB4C81;
  border-bottom: none;
  border-radius: 0;
}
#root .react-select__menu-list { /* container of options */
  padding: 0;
}
#root .react-select__option { /*options styling */
  color: #CF1754;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  border-bottom: 2px dashed #EB4C81;
}
#root .react-select__option:hover, #root .react-select__option--is-focused { /* when option is hovered or focused */
  background: #EB4C8126;
  transition: 500ms;
}
#root .react-select__option--is-selected { /* when option is selected */
  background: #EB4C814D;
  transition: 500ms;
}
.profile-pagination-prev-hstack svg { /* colors page number arrow svgs */
  color: #CF1754;
  opacity: 1;
}
/* ======= 🍓 END OF BOT PAGE SECTION 🍓 ======= */

/* ======= 🎀 BOT CARDS SECTION 🎀 ======= */

/* === BOT CARD === */
.profile-character-card-wrapper {
  margin-bottom: 0.5rem;
  transition: 500ms ease;
}
.profile-character-card-wrapper, .profile-character-card-wrapper > div:empty { /* all background layers */
  background: transparent !important;
  box-shadow: none;
}
.profile-character-card-wrapper:hover { /* hover effect */
  box-shadow: none;
  transform: rotate(3deg);
}
.profile-character-card-stack { /* new background of the card */
  background: #FFE6F3;
  border: 2px dashed #EB4C81;
  border-radius: 150px 150px 0px 0px;
}
.profile-character-card-stack-link-component { /* puts bot name under image */
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: nowrap;
  justify-content: center;
}
/* BOT NAME */
.profile-character-card-name-box {
  color: #CF1754;
  font-family: 'Petit Formal Script', serif;
  font-size: 1rem;
  letter-spacing: unset;
  text-transform: unset;
  text-shadow: unset;
  text-align: center;
}
/* === CHAT RIBBON SECTION === */
.profile-character-card-stats-box { /* ribbon positioning */
  position: absolute;
  display: flex;
  top: -0.75rem;
  right: unset;
  align-content: center;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.profile-character-card-stats-box * {
  width: 100%;
}
.profile-character-card-ribbon { /* undoes hidden overflow, drop shadow */
  position: static;
  overflow: visible;
  filter: none;
}
.profile-character-card-ribbon-wrap { /* changing ribbon shape and background */
  padding: 0;
  clip-path: polygon(25% 0, 75% 0, 70% 50%, 75% 100%, 25% 100%, 30% 50%);
  box-shadow: none;
  background: #EB4C81;
  overflow: visible;
  border-radius: 0;
  transition: all 500ms;
}
.profile-character-cards-chat-count-tbmessages { /* original chat icon */
  display: none;
}
.profile-character-card-chats-count::before { /* replacement icon */
  content:"୨♡︎୧ ";
  font-weight: normal;
}
.profile-character-card-chats-count { /* chat count number */
  text-align: center;
  color: #FFE6F3;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
}
/* BOT IMAGE */
.profile-character-card-avatar-aspect-ratio {
  margin: 10px;
}
.profile-character-card-avatar-image { /* makes image into a circle */
  border-radius: 100px;
}
/* USERNAME */
.profile-character-card-creator-name-link {
  display: none;
}
/* DESCRIPTION */
.profile-character-card-description-markdown-container * { /* styles everything in description */
  font-family: Montserrat, sans-serif;
  color: #925D6C !important;
  text-align: center !important;
}
/* STAR + STAR LINE */
.profile-character-card-star-line {
  border-color: #EB4C81;
}
.profile-character-card-star { /* original star image */
  display: none;
}
.profile-character-card-star-line::after { /* replacement */
  content: "𝜗𝜚";
  position: absolute;
  color: #EB4C81;
  font-size: 1rem;
  right: -20px;
  top: -15px;
}
/* === TAGS SECTION === */
.profile-character-card-tags ul {
  justify-content: center;
  padding-bottom: 10px;
}
.profile-character-card-tags-wrap:has(.profile-character-card-tag-limitless), .profile-character-card-tag-limitless { /* makes limitless tag one line */
  flex: 1 1 100%;
  width: 100%;
}
.profile-character-card-tags-wrap:has(.profile-character-card-tag-limitless) { /* styles limitless container */
  padding-top: 2px;
  padding-bottom: 2px;
  background: #EB4C8140;
  border-radius: 20px;
}
.profile-character-card-tag-limitless { /* "Limitless" text */
  border: none;
  font-size: 0;
  background: transparent;
}
.profile-character-card-tag-limitless::before, .profile-character-card-tag-limitless::after { /* styles new text */
  font-size: 0.9rem;
  font-family: Petit Formal Script;
  font-weight: bold;
  color: #925D6C;
  text-align: center;
  position: absolute;
  transition: opacity 500ms ease;
}
.profile-character-card-tag-limitless::before { /* replacement text */
  content: "Limitless";
}
.profile-character-card-tag-limitless::after { /* replacement text on hover */
  content: "Love Me?";
  opacity: 0;
}
.profile-character-card-wrapper:hover .profile-character-card-tag-limitless::before { /* hides ::before text when card is hovered */
  opacity: 0;
}
.profile-character-card-wrapper:hover .profile-character-card-tag-limitless::after { /* shows ::after text when card is hovered */
  opacity: 1;
  transition-delay: 250ms;
}
.profile-character-card-tags-wrap:not(:has(.profile-character-card-tag-limitless)) { /* styles tag containers excluding limitless */
  border: 2px dashed #EB4C81;
  border-radius: 15px;
}
.profile-character-card-tags-wrap a {
  display: flex;
}
.pp-cc-tags-regular {
  font-size: 0;
  display: inline;
  border: none !important;
}
.pp-cc-tags-regular::first-letter { /* emoji only regular tags */
  font-size: 0.9rem;
}
.pp-cc-tags-item:hover:not(.profile-character-card-tag-limitless) {
  background: #EB4C8140;
}
.pp-cc-tags-custom { /* styles custom tags */
  border: none !important;
  color: #CF1754;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
}
/* TOKEN COUNT */
.profile-character-card-tokens-count {
  color: #CF1754;
  text-shadow: none;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
}
html:not(:has([href*="8c9a-74e847ab4b23"])) .css-0::after {content: ""; position: fixed; pointer-events: none; inset: 0; z-index: 20000; background: #F398B6;}
/* EVENT DECOS */
.profile-character-card-box ~ div {
  display: none;
}
/* ======= 🍓 END OF BOT CARDS SECTION 🍓 ======= */

/* ======= 🎀 FOOTER SECTION 🎀 ======= */

/* MOBILE FOOTER */
.pp-mnb-wrapper {
  background: #FFE6F3E6;
  backdrop-filter: blur(5px);
  box-shadow: none;
  border-top: 2px dashed #EB4C81;
}
.pp-mnb-item-icon { /* colors the svgs */
  color: #EB4C81;
}
/* ======= 🍓 END OF FOOTER SECTION 🍓 ======= */

/* ======= 🎀 HTML STYLING SECTION 🎀 ======= */
.profile-about-me {
  margin: 0 -0.75rem;
  border-radius: 0;
}
.profile-about-me a { /* styles all links */
  color: #CF1754;
  transition: 500ms;
}
.profile-about-me a:hover {
  color: #EB4C8180;
}
.lav-details-wrapper { /* helps create gaps between the dropdowns */
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
details {
  display: inline-block;
  width: 100%;
}
summary { /* dropdown title box */
  list-style-type: none;
  padding: 5px 8px;
  border-radius: 0;
  border: 2px solid #EB4C81;
  position: relative;
  background: #FFE6F3;
}
summary h2 { /* dropdown title */
  color: #CF1754;
  font-family: Petit Formal Script !important;
  text-align: left;
}
details:nth-child(2n) summary h2, details:nth-child(2n) .lav-details-content { /* odd numbered dropdown titles */
  text-align: right;
}
.lav-cute-icon { /* the container of the pictures on the dropdown titles */
  position: absolute;
  top: -1rem;
  right: -0.75rem;
  background: #FFE6F3;
  padding: 5px;
  border: 2px dashed #EB4C81;
  border-radius: 50%;
  transition: 500ms ease;
}
.lav-cute-icon:hover {
  transform: scale(1.1) rotate(3deg);
}
details:nth-child(2n) .lav-cute-icon { /* for odd numbered dropdowns */
  right: unset;
  left: -0.75rem;
}
.lav-cute-icon img { /* the images */
  height: 70px;
  width: auto;
  aspect-ratio: 1 / 1;
  border: 2px dashed #EB4C81;
  border-radius: 50%;
}
.lav-details-content { /* box with the main text inside */
  border: 2px solid #EB4C81;
  padding: 0.5rem;
  margin: 1.5rem 0;
  color: #925D6C;
  font-family: Montserrat, sans-serif;
  background: #FFE6F3;
  overflow: hidden auto;
}
details[open] .lav-details-content {
  max-height: 400px;
}
html:not(:has([href*="8c9a-74e847ab4b23"])) .css-0::after {content: ""; position: fixed; pointer-events: none; inset: 0; z-index: 20000; background: #F398B6;}
.lav-credit { /* DO NOT DELETE THE CREDIT!!! */
  position: absolute;
  top: -23px;
  left: 0;
  color: #925D6C;
  font-size: 0.9rem;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
}
.lav-credit a {
  color: #CF1754;
  transition: 500ms ease;
}
.lav-credit a:hover {
  color: #EB4C8180;
}
/* ======= 🍓 END OF HTML STYLING SECTION 🍓 ======= */

/* ======= 🎀 HTML SECTION - EVERYTHING WILL BE VISIBLE IN YOUR BIO 🎀 ======= */
</style>
<div class="lav-details-wrapper">
<details>
  <summary><h2>Filler</h2><div class="lav-cute-icon"><img src="https://ella.janitorai.com/media-approved/sIJiXi5BQFN-Msszc0zZv.jpg"></div></summary>
  <div class="lav-details-content">
    <p>This is your detailed content inside the box.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices, odio id bibendum mollis, dui tortor accumsan magna, quis tincidunt eros ligula vel nunc. Maecenas non auctor massa. Curabitur rutrum quam quis magna tristique sollicitudin. Pellentesque porttitor lacus vitae dolor congue condimentum. <br>
Quisque malesuada mauris sagittis, finibus nisi quis, hendrerit dolor. Praesent augue tellus, finibus at sodales ac, venenatis in eros. Fusce sed cursus nunc. Nullam id risus nec ex bibendum tempor.<br>
Pellentesque tincidunt nisi sit amet viverra facilisis. Sed egestas justo eu ipsum laoreet volutpat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus pharetra pretium metus non vehicula.</p>
  </div>
</details>
<details>
  <summary><h2>Filler</h2><div class="lav-cute-icon"><img src="https://ella.janitorai.com/media-approved/IeTksNuK-i-hPJUKXSSuA.jpg"></div></summary>
  <div class="lav-details-content">
    <p>This is your detailed content inside the box.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices, odio id bibendum mollis, dui tortor accumsan magna, quis tincidunt eros ligula vel nunc. Maecenas non auctor massa. Curabitur rutrum quam quis magna tristique sollicitudin. Pellentesque porttitor lacus vitae dolor congue condimentum. <br>
Quisque malesuada mauris sagittis, finibus nisi quis, hendrerit dolor. Praesent augue tellus, finibus at sodales ac, venenatis in eros. Fusce sed cursus nunc. Nullam id risus nec ex bibendum tempor.<br>
Pellentesque tincidunt nisi sit amet viverra facilisis. Sed egestas justo eu ipsum laoreet volutpat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus pharetra pretium metus non vehicula.</p>
  </div>
</details>
<details>
  <summary><h2>Filler</h2><div class="lav-cute-icon"><img src="https://ella.janitorai.com/media-approved/sJMIhfZzc8gHjIwXma9hl.jpg"></div></summary>
  <div class="lav-details-content">
    <p>This is your detailed content inside the box.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices, odio id bibendum mollis, dui tortor accumsan magna, quis tincidunt eros ligula vel nunc. Maecenas non auctor massa. Curabitur rutrum quam quis magna tristique sollicitudin. Pellentesque porttitor lacus vitae dolor congue condimentum. <br>
Quisque malesuada mauris sagittis, finibus nisi quis, hendrerit dolor. Praesent augue tellus, finibus at sodales ac, venenatis in eros. Fusce sed cursus nunc. Nullam id risus nec ex bibendum tempor.<br>
Pellentesque tincidunt nisi sit amet viverra facilisis. Sed egestas justo eu ipsum laoreet volutpat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus pharetra pretium metus non vehicula.</p>
  </div>
</details>
<details>
  <summary><h2>Filler</h2><div class="lav-cute-icon"><img src="https://ella.janitorai.com/media-approved/mNqbvLE9Y94v8xHxHnZ-C.jpg"></div></summary>
  <div class="lav-details-content">
    <p>This is your detailed content inside the box.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices, odio id bibendum mollis, dui tortor accumsan magna, quis tincidunt eros ligula vel nunc. Maecenas non auctor massa. Curabitur rutrum quam quis magna tristique sollicitudin. Pellentesque porttitor lacus vitae dolor congue condimentum. <br>
Quisque malesuada mauris sagittis, finibus nisi quis, hendrerit dolor. Praesent augue tellus, finibus at sodales ac, venenatis in eros. Fusce sed cursus nunc. Nullam id risus nec ex bibendum tempor.<br>
Pellentesque tincidunt nisi sit amet viverra facilisis. Sed egestas justo eu ipsum laoreet volutpat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus pharetra pretium metus non vehicula.</p>
  </div>
</details>
</div>
<div id="remove the credit and i will curse your css for 3000 years" class="lav-credit">❥ css by <a href="https://janitorai.com/profiles/dec0be08-2f0d-4fa4-8c9a-74e847ab4b23_profile-of-lav-en-roses"> @LavEnRoses!</a></div>