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

/* PAGE BACKGROUND */
.pp-page-background { /* gets rid of any blur if the background slider isn’t working for you */
  filter: none;
}
/* TEXT HIGHLIGHT */
::selection {
  background: #925D6C80;
  color: #FFE6F3;
}
.css-0 { /* the root of all evil */
  display: contents;
}
/* TOOLTIPS */
.css-jdhqy4 > div {
  background: #FFE6F3E6;
  color: #925D6C;
  border: 2px solid #F398B6;
  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, .css-17i40fo {
  background: #F398B6BF;
  border: none;
  margin: 7px 10px;
}
.css-9qctsi svg, .cp-profile-card-panel svg, .css-17i40fo svg { /* colors of the different svgs for visibility */
  color: #FFE6F3 !important; /* change the color if you cant see the icons with your pfp */
}
.css-17i40fo { /* the pencil icon for changing your profile picture */
  z-index: 2;
  box-shadow: none;
}
.css-1x04uxb { /* hides the purple "Edit Profile" button so you don’t accidentally delete all your code */
  display: none;
}
/* ======= 🍓 END OF PAGE SECTION 🍓 ======= */

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

/* HEADER */
.pp-top-bar {
  background: #FFE6F3E6;
  backdrop-filter: blur(5px);
  box-shadow: none;
  border-bottom: 2px dashed #F398B6;
}
/* === JANITOR AI LOGO SECTION === */
.pp-top-bar-logo:hover {
  text-shadow: none;
}
.pp-top-bar-logo { /* background */
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  text-shadow: none;
}
.pp-top-bar-logo-name, .pp-top-bar-logo-sub-name { /* original text */
  font-size: 0;
  font-family: Petit Formal Script;
}
:is(.pp-top-bar-logo-name, .pp-top-bar-logo-sub-name)::after { /* for replacement text to match */
  font-size: 1.75rem;
  color: #F398B6;
  text-wrap: nowrap;
  transition: 500ms ease;
}
.pp-top-bar-logo-name::after { /* replacing "janitorai" text */
  content: "Pretty in Pink";
}
.pp-top-bar-logo-sub-name::after { /* replacing "beta" text */
  content: "!";
  font-style: italic;
  line-height: 1.2;
}
.pp-top-bar-logo:hover :is(.pp-top-bar-logo-name, .pp-top-bar-logo-sub-name)::after { /* text color change on hover */
  color: #F398B680;
}
/* === SEARCH BAR SECTION === */
/* credits to @procrastination ♡ */
.pp-top-bar-search { /* styles the search bar */
  border-radius: 0;
  border-bottom: 2px solid #F398B680;
  background: transparent;
}
.pp-top-bar-search:hover { /* removes box shadow on hover */
  box-shadow: none;
}
.css-bar9lc div:has(svg) { /* colors the svgs */
  color: #F398B6BF;
  opacity: 1;
}
#search-input::placeholder { /* hides the default placeholder text */
  opacity: 0;
}
#search-input { /* text styling for search bar */
  font-family: Montserrat, sans-serif;
  font-size: 1rem;
  color: #F398B6 !important;
  caret-color: #F398B6;
}
.pp-top-bar-search > div:first-of-type, #search-input { /* centers the text inside the search bar */
  margin: 0;
  top: 50% !important;
  transform: translateY(-50%);
}
.pp-top-bar-search::after { /* THE NEW PLACEHOLDER TEXT */
  content: "search for other sweethearts...";
  position: absolute;
  max-width: calc(100% - var(--input-height) * 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: #F398B6BF;
  transition: opacity 200ms ease-in-out;
}
.pp-top-bar-search:focus-within::after,
.pp-top-bar-search:has(#search-input:not(:placeholder-shown))::after { /* hides the new placeholder when search bar is clicked */
  opacity: 0;
}
.pp-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;
}
.pp-top-bar-create-char { /* the text */
  font-family: Petit Formal Script;
  color: #F398B6;
  transition: 500ms ease;
}
.pp-top-bar-create-char:hover {
  color: #F398B680;
}
/* NOTIFS + ANNOUNCEMENTS ICONS */
[aria-label="Notifications"], [aria-label="Global notifications"] {
  border-radius: 50%;
}
[aria-label="Notifications"] svg, [aria-label="Global notifications"] svg { /* the icons */
  color: #F398B6 !important;
}
:is([aria-label="Notifications"], [aria-label="Global notifications"]):hover { /* the background on hover */
  background: #F8BBD280;
}
[aria-label="Notifications"] > div { /* the unread notification dot */
  background: #F398B6;
  box-shadow: unset;
}
[aria-label="Notifications"] svg:has(+ div) { /* 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); }
}
[aria-label="Global notifications"] span { /* the annoying red flickering dot */
  animation: none !important;
  background: #F398B6;
  color: #FFE6F3;
  box-shadow: none;
}
/* === NOTIFS BOX SECTION === */
/* credits to @tigerdropped for the box template ♡ */
[class*="Popover_"] { /* background and font, border, colors */
  background: #FFE6F3;
  border: 2px dashed #F398B6;
  border-radius: 0;
  font-family: Montserrat, sans-serif;
  box-shadow: unset;
}
[class*="popoverHeader_"] { /* top bar with close button */
  padding: 1rem 1.25rem;
  background: transparent;
  border-bottom: 2px dashed #F398B6;
}
[class*="popoverTitle_"] { /* "Notifications" header text */
  font-family: Petit Formal Script;
  color: #F398B6;
  background-image: unset;
}
[class*="popoverHeader_"] button { /* the close button */
  background: #0000;
  color: #F398B6;
  transition: color 500ms, background 500ms;
  transform: scale(1.2);
  border-radius: 50%;
}
[class*="popoverHeader_"] button:hover { /* on hover */
  color: #F398B6;
  background: #F8BBD280;
}
[class*="notificationsList_"]::-webkit-scrollbar-thumb { /* makes scrollbar more noticeable (not available on all browsers) */
  background: #925D6CBF;
}
/* NOTIFICATIONS */
[class*="_notificationItem_"] { /* notification boxes */
  background: transparent;
  border-radius: 0;
  border-bottom: 2px dashed #F398B6;
}
[class*="_notificationItem_"]:hover { /* on hover */
  background: #F8BBD240;
}
[class*="Indicator_"] { /* new/unread notification bar */
  background: #925D6C;
}
[class*="_notificationTitle_"],
[class*="_subject_"] { /* notification box title (new comment on...) */
  background-image: unset;
  -webkit-text-fill-color: unset;
  color: #F398B6;
}
[class*="_notificationMessage_"],
[class*="_body_"] { /* body text or notification content (username left a new comment...) */
  color: #F398B6;
}
[class*="_notificationTime_"],
[class*="_timestamp_"] { /* date text */
  color: #925D6CBF;
  font-family: Montserrat, sans-serif;
}
[class*="_archiveButton"] { /* archive notification button */
  backdrop-filter: unset;
  border-radius: 50%;
  background: #F398B6;
  color: #925D6C;
  transition: color 500ms, background 500ms;
}
[class*="_archiveButton"]:hover { /* on hover */
  background: #925D6C;
  color: #F398B6;
}
[class*="_loadMoreButton_"] { /* "Load more" box */
  border: 2px solid #F398B6;
  color: #F398B6;
  transition: color 500ms, background 500ms;
}
[class*="_loadMoreButton_"]:hover { /* on hover */
  background: #F398B680;
  color: #925D6C;
}
/* === USER MENU SECTION - TOP RIGHT === */
.pp-top-bar-app-menu img { /* the profile picture */
  border-radius: 50%;
}
.pp-top-bar-app-menu-list { /* background of menu box */
  background: #FFE6F3;
  border: 2px dashed #F398B6;
  border-radius: 0;
  box-shadow: none;
}
.pp-top-bar-app-menu-list hr { /* the dividers in between options */
  opacity: 1;
}
.pp-top-bar-app-menu-list-item { /* the options */
  color: #F398B6 !important;
  font-family: Montserrat, sans-serif;
  transition: 500ms;
}
.pp-top-bar-app-menu-list-item:hover { /* options on hover */
  background: #F398B640;
}
.pp-top-bar-app-menu-list-item:is(:first-child, :last-child) { /* "Profile" and "Log Out" options */
  color: #925D6CBF !important;
}
/* === MOBILE HEADER SECTION === */
.pp-top-bar-back-button {
  color: #F398B6;
}
.pp-top-bar-back-button svg { /* hides "<" icon on back button */
  display: none;
}
.pp-top-bar-back-button > p::before { /* replacement icon */
  font-size: 1.25rem;
  content: "↫ ";
  font-weight: normal;
}
.pp-top-bar-back-button > p { /* "Back" text */
  font-size: 0;
}
.pp-top-bar-back-button > p::after { /* replacement text */
  font-size: 0.875rem;
  content: "Leave?";
  font-family: Petit Formal Script;
}
.pp-top-bar-title { /* "Profile of…"" text */
  font-size: 0;
  font-family: Petit Formal Script;
}
.pp-top-bar-title::before { /* replacement text */
  font-size: 1rem;
  content: "Pretty in Pink";
  color: #F398B6;
  text-wrap: nowrap;
  font-weight: bold;
}
.pp-top-bar-title::after {
  font-size: 1rem;
  content: "!";
  color: #F398B6;
  font-weight: bold;
  font-style: italic;
}
/* ======= 🍓 END OF HEADER SECTION 🍓 ======= */

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

/* === PROFILE CARD === */
.pp-uc-background, .pp-uc-background > div:empty { /* hides all background layers */
  background: transparent !important;
}
.pp-uc-background { /* sets width so it doesn’t change when opening a dropdown */
  width: 36rem;
}
.pp-uc-background:hover {
  box-shadow: none;
}
.css-1uodvt1 { /* sets pfp over user info */
  flex-direction: column;
  text-align: center;
  order: -1;
}
/* AVATAR */
.pp-uc-avatar-container {
  background: #FFE6F3;
  padding: 5px;
  height: 400px; /* adjust this to make taller or shorter */
  width: 100%;
}
.pp-uc-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 #F398B6;
  outline: 2px dashed #F398B6;
  outline-offset: 5px;
}
/* BIO */
.css-1uodvt1 > .css-8g8ihq {
  background: #FFE6F3;
  border: 2px dashed #F398B6;
  width: auto;
  margin-top: 8px;
  padding: 10px;
}
/* USERNAME */
.css-70qvj9 { /* forces username to center */
  justify-content: center;
}
.pp-uc-title {
  font-family: Petit Formal Script;
  color: #F398B6;
}
/* === FOLLOWERS COUNT + MEMBER SINCE SECTION === */
.pp-uc-followers-count, .pp-uc-member-since { /* styles both */
  font-family: Montserrat, sans-serif;
  color: #F398B6;
  font-style: italic;
}
:is(.pp-uc-followers-count, .pp-uc-member-since)::before, :is(.pp-uc-followers-count, .pp-uc-member-since)::after {
  content: " ୨♡︎୧ ";
  font-style: normal;
}
.pp-uc-followers-count span:nth-of-type(2) { /* "followers" text */
  font-size: 0;
}
.pp-uc-followers-count span:nth-of-type(2)::after { /* replacement text */
  font-size: 1rem;
  content: "darlings"; /* change this to say something else */
}
:is(.pp-uc-followers-count, .pp-uc-member-since)::before, :is(.pp-uc-followers-count, .pp-uc-member-since)::after { /* some cute deco */
  content: " ୨♡︎୧ ";
  font-style: normal;
}
/* EVENT BADGES */
.css-hjkukh {
  justify-content: center;
  filter: sepia(1) hue-rotate(275deg) saturate(2);
  order: 1;
}
/* === FOLLOW + OPTIONS BUTTONS SECTION === */
.css-8g8ihq:not(.css-1uodvt1 > .css-8g8ihq) > div:nth-child(3) { /* sets follow and options buttons under the user info and above the html */
  order: -1;
}
.css-y9k5u7 { /* centers the buttons */
  justify-content: center;
}
.pp-uc-follow-button::before { /* the black background on follow button */
  display: none;
}
.pp-uc-follow-button, .pp-uc-options-menu { /* styles both buttons */
  background: #FFE6F3 !important;
  border-radius: 0;
  border: 2px dashed #F398B6;
}
.pp-uc-follow-button span { /* "Follow" text */
  font-size: 0;
  width: auto;
}
.pp-uc-follow-button span::after { /* replacement text */
  content: "❥ Fall in Love"; /* change this to say something else */
  font-size: 1rem;
  font-family: Petit Formal Script;
  color: #F398B6;
}
.pp-uc-follow-button[data-following="true"] span::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: #F398B6;
}
.pp-uc-options-menu span:last-child { /* the dots on the options button */
  display: none;
}
.css-1f9crt2 { /* "Block this creator" popup */
  background: #FFE6F3;
  border: 2px dashed #F398B6;
  border-radius: 0;
  box-shadow: none;
  transition: background 500ms;
}
.css-1f9crt2:hover {
  background: #F8BBD280;
}
.pp-uc-options-menu-item { /* "Block this creator" text */
  background: transparent !important;
  color: #F398B6;
  font-family: Montserrat, sans-serif;
}
/* ======= 🍓 END OF PROFILE CARD SECTION 🍓 ======= */

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

.pp-tabs-wrapper { /* hides blue and gray characters tab */
  visibility: hidden;
}
.css-m8ywhg { /* sets # characters, search bar, filter tags and latest dropdown in the middle and in a column */
  align-items: center;
  flex-direction: column;
  gap: 10px;
}
.css-zdpt2t, .css-mcoi9a { /* aligns the search bar, filter tags and latest dropdown in the middle */
  margin: unset;
}
/* # CHARACTERS */
.pp-pg-total { /* the background of the box */
  background: #FFE6F3;
  color: #F398B6 !important;
  box-shadow: none;
  border: 2px dashed #F398B6 !important;
  border-radius: 0;
  font-family: Montserrat, sans-serif;
}
.pp-pg-total:before { /* hides the black background */
  display: none;
}
.pp-pg-total:hover {
  text-shadow: none;
}
/* CHARACTER SEARCH BAR */
.pp-fl-search-input { /* styles the search bar */
  background: #FFE6F3;
  height: unset;
  font-family: Montserrat, sans-serif;
  color: #F398B6;
  caret-color: #F398B6;
}
.pp-fl-search-input,
.pp-fl-search-input:is(:hover, :focus) { /* gets rid of the different outlines that show up in different states */
  outline: none;
  box-shadow: none;
  border: 2px dashed #F398B6;
  border-radius: 150px 0 0 150px;
}
.pp-fl-search-input::placeholder { /* placeholder text */
  color: #F398B6BF;
}
.pp-fl-search-input ~ div svg { /* colors the svg */
  color: #F398B6 !important;
  opacity: 1; 
  transform: scale(1.5);
}
/* FILTER TAGS BUTTON */
.pp-fl-filter-button {
  background: #FFE6F3 !important;
  border: 2px dashed #F398B6;
  border-radius: 0;
}
.pp-fl-filter-button svg { /* colors the svg */
  color: #F398B6 !important;
}
/* === FILTER TAGS MENU SECTION === */
/* credits to @tigerdropped for the menu template ♡ */
.css-1dljitb { /* background of menu */
  background: #FFE6F3 !important;
  border: 2px dashed #F398B6;
  border-radius: 0;
  box-shadow: none;
}
.css-18936vg {
  align-items: center;
}
.css-18936vg button { /* show all/hide tag buttons */
  border: 2px dashed #F398B6;
  border-radius: 0;
  color: #F398B6;
  font-family: Montserrat, sans-serif;
  transition: 500ms;
}
.css-18936vg button:hover {
  border-color: #F8BBD2;
  color: #F8BBD2;
}
.css-dcyl1x, .css-178jenf { /* "Filters" and "Tags" text */
  text-align: center;
  font-family: Petit Formal Script;
  color: #F398B6;
}
.css-lyo4r5 { /* X button */
  border-radius: 50%;
}
.css-lyo4r5:hover {
  background: #F8BBD240;
}
.css-lyo4r5 svg { /* colors the svg */
  color: #F398B6 !important;
}
.css-1w58nos, .css-oqdsp6 { /* selected and unselected tags */
  box-shadow: none !important;
  border: 2px dashed #F398B6 !important;
  display: inline-block;
  font-size: 0;
  border-radius: 50%;
}
:is(.css-1w58nos, .css-oqdsp6)::first-letter { /* emoji only tags */
  font-size: 0.9rem;
}
.css-oqdsp6 { /* when tag is selected */
  background: #F398B640;
}
/* === LATEST DROPDOWN SECTION === */
/* credits to @tigerdropped for the class ids (this dropdown is ridiculous) ♡ */
:is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__control { /* menu box */
  background: #FFE6F3;
  border: 2px dashed #F398B6 !important;
  border-radius: 0 100px 100px 0 !important;
}
:is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__single-value { /* selected option text in the box */
  color: #F398B6;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
}
:is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__indicator-separator { /* separator line */
  display: none;
}
:is(.default, .dark, .transparent, .css-b62m3t-container) svg { /* arrow icon svg */
  color: #F398B6;
  transition: 500ms;
}
:is(.default, .dark, .transparent, .css-b62m3t-container):has(.css-qr46ko) svg { /* arrow when dropdown is open */
  transform: rotateX(180deg);
}
:is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__menu { /* container of menu (background */
  width: max-content;
  text-align: center;
  background: #FFE6F3;
  border: 2px dashed #F398B6;
  border-radius: 0;
}
.css-qr46ko { /* container of options */
  padding: 0;
}
:is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__option { /*options styling */
  color: #F398B6;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  border-bottom: 2px dashed;
}
:is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__option:hover {
  background: #F8BBD240;
  transition: 500ms;
}
:is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__option--is-selected, :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__option--is-focused { /* when option is selected or focused */
  background: #F8BBD2BF;
  transition: 500ms;
}
:is(.pp-pg-prev-button, .pp-pg-next-button) svg { /* colors page number arrow svgs */
  color: #F398B6;
  opacity: 1;
}
/* ======= 🍓 END OF BOT PAGE SECTION 🍓 ======= */

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

/* === BOT CARD === */
.pp-cc-wrapper {
  margin-bottom: 0.5rem;
  transition: 500ms ease;
}
.pp-cc-wrapper, .pp-cc-wrapper > div:empty { /* all background layers */
  background: transparent !important;
}
.pp-cc-wrapper:hover { /* hover effect */
  box-shadow: none;
  transform: rotate(3deg);
}
.css-1s5evre { /* new background of the card */
  background: #FFE6F3;
  border: 2px dashed #F398B6;
  border-radius: 150px 150px 0px 0px;
}
.css-1s5evre a:first-child { /* puts bot name under image */
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: nowrap;
  justify-content: center;
}
/* BOT NAME */
.pp-cc-name {
  color: #F398B6;
  font-family: 'Petit Formal Script', serif;
  font-size: 1rem;
  letter-spacing: unset;
  text-transform: unset;
  text-shadow: unset;
  text-align: center;
}
/* === CHAT RIBBON SECTION === */
.css-10cv7r2 { /* ribbon positioning */
  position: absolute;
  display: flex;
  top: -0.75rem;
  right: unset;
  align-content: center;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.css-10cv7r2 * {
  width: 100%;
}
.pp-cc-ribbon { /* undoes hidden overflow, drop shadow */
  position: static;
  overflow: visible;
  filter: none;
}
.pp-cc-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: #F398B6;
  overflow: visible;
  border-radius: 0;
  transition: all 500ms;
}
.pp-cc-chats svg { /* original chat icon */
  display: none;
}
.pp-cc-chats-count::before { /* replacement icon */
  content:"୨♡︎୧ ";
  font-weight: normal;
}
.pp-cc-chats-count { /* chat count number */
  text-align: center;
  color: #FFE6F3;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
}
/* BOT IMAGE */
.css-1q7rmf0 {
  margin: 10px;
}
.pp-cc-avatar { /* makes image into a circle */
  border-radius: 100px;
}
/* USERNAME */
.css-1s5evre > a:not(:first-child) {
  display: none;
}
/* DESCRIPTION */
.pp-cc-description * { /* styles everything in description */
  font-family: Montserrat, sans-serif;
  color: #925D6C !important;
  text-align: center !important;
}
/* STAR + STAR LINE */
.pp-cc-star-line {
  border-color: #F398B6;
}
.pp-cc-star { /* original star image */
  display: none;
}
.pp-cc-star-line::after { /* replacement */
  content: "𝜗𝜚";
  position: absolute;
  color: #F398B6;
  font-size: 1rem;
  right: -20px;
  top: -15px;
}
/* === TAGS SECTION === */
.css-k1urot {
  justify-content: center;
  padding-bottom: 10px;
}
.css-123m5uu, .pp-tag-limitless { /* makes limitless tag one line */
  flex: 1 1 100%;
  width: 100%;
}
.css-123m5uu { /* styles limitless container */
  padding-top: 2px;
  padding-bottom: 2px;
  background: #F398B680;
  border-radius: 20px;
}
.pp-tag-limitless { /* "Limitless" text */
  border: none;
  font-size: 0;
  background: transparent;
}
.pp-tag-limitless::before, .pp-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;
}
.pp-tag-limitless::before { /* replacement text */
  content: "Limitless";
}
.pp-tag-limitless::after { /* replacement text on hover */
  content: "Love Me?";
  opacity: 0;
}
.pp-cc-wrapper:hover .pp-tag-limitless::before { /* hides ::before text when card is hovered */
  opacity: 0;
}
.pp-cc-wrapper:hover .pp-tag-limitless::after { /* shows ::after text when card is hovered */
  opacity: 1;
  transition-delay: 250ms;
}
.pp-cc-tags-wrap-regular, .pp-cc-tags-wrap-custom { /* styles tag containers excluding limitless */
  border: 2px dashed #F398B6;
  border-radius: 15px;
}
.pp-cc-tags-regular {
  font-size: 0;
  display: inline;
  border: none !important;
  color: #F398B6;
}
.pp-cc-tags-regular::first-letter { /* emoji only regular tags */
  font-size: 0.9rem;
}
.pp-cc-tags-item:hover:not(.pp-tag-limitless) {
  background: #F398B680;
}
.pp-cc-tags-custom { /* styles custom tags */
  border: none !important;
  color: #F398B6;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
}
/* TOKEN COUNT */
.pp-cc-tokens-count {
  color: #F398B6;
  text-shadow: none;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
}
/* EVENT DECOS */
.css-1c9wmts ~ div {
  display: none;
}
/* ======= 🍓 END OF BOT CARDS SECTION 🍓 ======= */

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

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

/* ======= 🎀 HTML STYLING SECTION 🎀 ======= */
.pp-uc-about-me {
  margin: 0 -0.75rem;
  border-radius: 0;
}
.pp-uc-about-me a { /* styles all links */
  color: #F398B6;
  transition: 500ms;
}
.pp-uc-about-me a:hover {
  color: #F398B680;
}
.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 #F398B6;
  position: relative;
  background: #FFE6F3;
}
summary h2 { /* dropdown title */
  color: #F398B6;
  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 #F398B6;
  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 #F398B6;
  border-radius: 50%;
}
.lav-details-content { /* box with the main text inside */
  border: 2px solid #F398B6;
  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([class="lav-credit"])) .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: #925D6C;
  transition: 500ms ease; 
}
.lav-credit a:hover {
  color: #925D6C80;
}
/* ======= 🍓 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://i.imgur.com/B1kw1op.jpeg"></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://i.imgur.com/LPQjwaO.jpeg"></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://i.imgur.com/ipxF5Jp.jpeg"></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://i.imgur.com/iJ63WRi.jpeg"></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>