<style>
/* ======= 🦇 PAGE SECTION 🦇 ======= */
/* PAGE BACKGROUND */
.pp-page-background { /* adding a blur if the background slider isn’t working for you */
  filter: blur(3px);
}
/* TEXT HIGHLIGHT */
::selection {
  background: #950B0D80;
  color: #0C0404;
}
@media screen and (min-width: 62em) { /* flipping the direction of the profile card and bot cards */
  .css-1wfbrwg {
    flex-direction: row-reverse;
  }
}
.css-0 { /* the root of all evil */
  display: contents;
}
/* TOOLTIPS */
.css-jdhqy4 > div {
  background: #0C0404E6;
  color: #950B0D;
  border: 2px solid #950B0D;
  border-radius: 0;
  font-family: Grenze Gotisch, serif;
  font-size: 0.95rem;
  max-height: 145px;
  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: #6D0609BF;
  border: none;
  margin: auto 5px;
}
.css-9qctsi svg, .cp-profile-card-panel svg, .css-17i40fo svg { /* colors of the different svgs for visibility */
  color: #FDD8D8 !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: #0C0404E6;
  backdrop-filter: blur(5px);
  box-shadow: none;
  border: 2px solid #950B0D;
}
/* === JANITOR AI LOGO SECTION === */
.css-8uj2do { /* centers logo on header bar */
  position: absolute;
  margin: auto;
  width: fit-content;
  left: 0;
  right: 0;
}
.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: Grenze Gotisch, serif;
}
.pp-top-bar-logo-name::after { /* replacing "janitorai" text */
  font-size: 1.75rem;
  content: "Sinner's Dungeon";
  text-wrap: nowrap;
  color: #950B0D;
  transition: 500ms ease;
}
.pp-top-bar-logo:hover {
  transform: scale(1.1);
}
.pp-top-bar-logo:hover .pp-top-bar-logo-name::after { /* on hover */
  text-shadow: 0 0 0.5rem #950B0D;
  color: #FDD8D8;
}
/* === SEARCH BAR SECTION === */
.css-bar9lc { /* moves search bar to left side */
  order: -1;
  max-width: 20rem;
  margin-left: 0;
}
/* credits to @procrastination ♡ */
.pp-top-bar-search { /* styles the search bar */
  background: transparent;
}
.pp-top-bar-search:hover { /* removes box shadow on hover */
  box-shadow: none;
}
.css-bar9lc div:has(svg) { /* colors the svgs */
  color: #950B0D;
  opacity: 1;
}
#search-input::placeholder { /* hides the default placeholder text */
  opacity: 0;
}
#search-input { /* text styling for search bar */
  font-family: Grenze Gotisch, serif !important;
  font-size: 1rem;
  color: #FDD8D8 !important;
  caret-color: #FDD8D8;
}
.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: "find other sinners...";
  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: Grenze Gotisch, serif;
  font-size: 1rem;
  font-weight: 400;
  color: #950B0DBF;
  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-size: 0;
}
.pp-top-bar-create-char::after { /* replacement text */
  font-size: 1.25rem;
  font-family: Grenze Gotisch, serif;
  content: "Summon a Sinner";
  font-weight: 500;
  opacity: 1;
  position: relative;
  left: -5px;
  color: #950B0D;
  transition: 500ms;
}
.pp-top-bar-create-char:hover::after {
  color: #FDD8D8;
}
/* 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: #950B0D !important;
}
:is([aria-label="Notifications"], [aria-label="Global notifications"]):hover { /* the background on hover */
  background: #950B0D40;
}
[aria-label="Notifications"] > div { /* the unread notification dot */
  background: #950B0D;
  color: #FDD8D8;
  box-shadow: unset;
}
[aria-label="Global notifications"] span { /* the annoying red flickering dot */
  animation: none !important;
  background: #950B0D;
  color: #FDD8D8;
  box-shadow: none;
}
/* === NOTIFS BOX SECTION === */
/* credits to @tigerdropped for the box template ♡ */
[class*="Popover_"] { /* background and font, border, colors */
  background: #0C0404;
  border: 2px solid #950B0D;
  border-radius: 0;
  font-family: Grenze Gotisch, serif;
  box-shadow: unset;
}
[class*="popoverHeader_"] { /* top bar with close button */
  padding: 1rem 1.25rem;
  background: transparent;
  border-bottom: 2px solid #950B0D;
}
[class*="popoverTitle_"] { /* "Notifications" header text */
  font-family: Cinzel Decorative, serif;
  color: #950B0D;
}
[class*="popoverHeader_"] button { /* the close button */
  background: #0000;
  color: #950B0D;
  transition: color 500ms, background 500ms;
  transform: scale(1.2);
  border-radius: 50%;
}
[class*="popoverHeader_"] button:hover { /* on hover */
  color: #FDD8D8;
  background: #950B0D40;
}
[class*="notificationsList_"]::-webkit-scrollbar-thumb { /* makes scrollbar more noticeable (not available on all browsers) */
  background: #950B0DBF;
}
/* NOTIFICATIONS */
[class*="_notificationItem_"] { /* notification boxes */
  background: transparent;
  border-radius: 0;
  border-bottom: 2px solid #950B0D;
}
[class*="_notificationItem_"]:hover { /* on hover */
  background: #950B0D40;
}
[class*="Indicator_"] { /* new/unread notification bar */
  background: #950B0D;
}
[class*="_notificationTitle_"],
[class*="_subject_"] { /* notification box title (new comment on...) */
  background-image: unset;
  -webkit-text-fill-color: unset;
  color: #950B0D;
}
[class*="_notificationMessage_"],
[class*="_body_"] { /* body text or notification content (username left a new comment...) */
  color: #FDD8D8;
}
[class*="_notificationTime_"],
[class*="_timestamp_"] { /* date text */
  color: #FDD8D8BF;
  font-family: Grenze Gotisch, serif;
}
[class*="_archiveButton"] { /* archive notification button */
  backdrop-filter: unset;
  border-radius: 50%;
  background: #950B0D;
  color: #0C0404;
  transition: color 500ms, background 500ms;
}
[class*="_archiveButton"]:hover { /* on hover */
  background: #0C0404;
  color: #950B0D;
}
[class*="_loadMoreButton_"] { /* "Load more" box */
  border-color: #950B0D;
  color: #FDD8D8;
  transition: color 500ms, background 500ms;
}
[class*="_loadMoreButton_"]:hover { /* on hover */
  background: #950B0D40;
  color: #FDD8D8;
}
/* === USER MENU SECTION - TOP RIGHT === */
.pp-top-bar-app-menu img { /* the profile picture */
  border-radius: 50%;
  border: 2px solid #950B0D;
}
.pp-top-bar-app-menu-list { /* background of menu box */
  background: #0C0404;
  border: 2px solid #950B0D;
  border-radius: 0;
  box-shadow: none !important;
}
.pp-top-bar-app-menu-list hr { /* the dividers in between options */
  opacity: 1;
}
.pp-top-bar-app-menu-list-item { /* the options */
  color: #950B0D;
  font-family: Grenze Gotisch, serif;
  transition: 500ms;
}
.pp-top-bar-app-menu-list-item:hover { /* options on hover */
  background: #8B000040;
  color: #FDD8D8;
}
/* === MOBILE HEADER SECTION === */
.pp-top-bar-back-button {
  color: #950B0D;
}
.pp-top-bar-back-button svg { /* hides "<" icon on back button */
  display: none;
}
.pp-top-bar-back-button > p::before { /* replacement icon */
  font-size: 1rem;
  content: "↲ ";
}
.pp-top-bar-back-button > p { /* "Back" text */
  font-size: 0;
}
.pp-top-bar-back-button > p::after { /* replacement text */
  font-size: 1rem;
  content: "Escape?";
  font-family: Grenze Gotisch, serif;
}
.pp-top-bar-title { /* "Profile of…"" text */
  font-size: 0;
  font-family: Grenze Gotisch, serif;
}
.pp-top-bar-title::after { /* replacement text */
  font-size: 1rem;
  content: "Sinner's Dungeon";
  color: #950B0D;
  font-weight: 700;
}
/* ======= 🥀 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;
  z-index: 2;
}
.pp-uc-background:hover {
  box-shadow: none;
}
.css-1uodvt1 { /* for the user info to be at the bottom of the avatar */
  align-items: flex-end;
}
/* AVATAR */
.pp-uc-avatar-container {
  height: 400px; /* adjust this to make taller or shorter */
  width: 100%;
}
.pp-uc-avatar {
  height: 100%;
  width: 100%;
  object-position: 25% 5%; /* adjust this to change what part of the image is shown */
  box-shadow: none;
  border-radius: 0;
  border: 2px solid #6D0609;
  outline: 1px solid #6D0609;
  outline-offset: 4px;
}
/* BIO */
.css-1uodvt1 > .css-8g8ihq {
  position: absolute;
  margin: 5px 10px;
  text-align: left;
}
/* USERNAME */
.pp-uc-title {
  font-family: Cinzel Decorative, serif;
  font-variant: small-caps;
  font-size: clamp(2rem, 8vw, 3rem);
  color: #FDD8D8;
  text-shadow: 0 0 0.5rem #6D0609;
}
/* === FOLLOWERS COUNT === */
.pp-uc-followers-count { 
  font-family: Cinzel Decorative, serif;
  color: #FDD8D8;
}
.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: "Sinners are Indulging"; /* change this to say something else */
}
/* EVENT BADGES */
.css-hjkukh {
  filter: sepia(1) hue-rotate(300deg) saturate(2);
}
.pp-uc-member-since { /* hides member since text */
  display: none;
}
/* === FOLLOW + OPTIONS BUTTONS SECTION === */
.css-y9k5u7 { /* positions buttons in top right of pfp */
  flex-direction: column;
  align-items: flex-end;
  position: absolute;
  margin-top: 0;
  top: 15px;
  right: 15px;
  z-index: 5;
}
.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: #0C0404 !important;
  border: 2px solid #950B0D;
  border-radius: 0;
}
.pp-uc-follow-button span { /* "Follow" text */
  font-size: 0;
  width: auto;
}
.pp-uc-follow-button span::after { /* replacement text */
  content: "Join the Debauchery"; /* change this to say something else */
  font-size: 1rem;
  font-family: Grenze Gotisch, serif;
  font-weight: 500;
  color: #950B0D;
}
.pp-uc-follow-button[data-following="true"] span::after { /* replacement for "Following" text */
  content: "Indulging"; /* change this to say something else */
}
.pp-uc-options-menu span:first-child { /* "Options" text */
  display: none;
}
.pp-uc-options-menu span:last-child { /* the dots on the options button */
  color: #950B0D;
  margin: 0;
}
.css-1f9crt2 { /* "Block this creator" popup */
  background: #0C0404;
  border: 2px solid #950B0D;
  border-radius: 65px 0;
  box-shadow: none;
  transition: background 500ms;
}
.css-1f9crt2:hover {
  background: #0C0404BF;
}
.pp-uc-options-menu-item { /* "Block this creator" text */
  background: transparent !important;
  color: #950B0D;
  font-family: Grenze Gotisch, serif;
  transition: color 500ms;
}
.css-1f9crt2:hover .pp-uc-options-menu-item {
  color: #FDD8D8;
}
/* ======= 🥀 END OF PROFILE CARD SECTION 🥀 ======= */

/* ======= 🦇 BOT PAGE SECTION 🦇 ======= */
.pp-tabs-wrapper { /* neon blue and gray characters tab */
  position: relative;
  padding: 0;
  height: 4rem;
  width: auto;
  margin: auto;
  justify-content: center;
  align-items: center;
  background: transparent;
  border-bottom: none;
  transform: rotate(-3deg);
}
.pp-tabs-wrapper::before { /* the new gradient background */
  content: "";
  position: absolute;
  height: 100%;
  min-width: 100%;
  background: linear-gradient(65deg, #430507, #950B0D, #6D0609);
  overflow: visible;
  width: 150vw;
  outline: 2px solid #0C0404;
  outline-offset: -4px;
}
.pp-tabs-button { /* the "Characters" text */
  font-size: 0;
  font-family: Grenze Gotisch, serif;
  text-wrap: nowrap;
  font-weight: bolder;
  text-transform: unset;
}
.pp-tabs-button::after { /* replacement text */
  font-size: clamp(2rem, 8vw, 3rem);
  content: "Souls of the Damned";
  color: #0C0404;
}
.pp-tabs-indicator { /* hides neon blue line */
  display: none;
}
.css-zdpt2t, .css-mcoi9a, .css-1cdqd3a, .css-1pfxi6a, .css-6su6fj { /* gets rid of annoying containers/wrappers around the # characters, character search bar, filter tags and latest dropdown */
  display: contents;
}
.css-m8ywhg { /* sets # characters, search bar, filter tags and latest dropdown in the middle and in a column */
  align-items: center;
  flex-flow: row wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 10px;
}
/* # CHARACTERS */
.pp-pg-total { /* the background of the box */
  background: transparent;
  color: #950B0D !important;
  box-shadow: none;
  border: none;
  border-bottom: 2px solid #950B0D !important;
  border-radius: 0;
  font-family: Grenze Gotisch, serif;
}
.pp-pg-total:before { /* hides the black background */
  display: none;
}
.pp-pg-total:hover {
  text-shadow: none;
}
.pp-pg-total-count, .pp-pg-total-text::after { /* fixes media query for font size */
  font-size: 1.25rem;
}
.pp-pg-total-text { /* the "Characters" text */
  font-size: 0;
}
.pp-pg-total-text::after { /* replacement text */
  content: "Sinners";
}
/* CHARACTER SEARCH BAR */
.css-1jy826p { /* sets the search bar above everything else and makes it one line */
  flex: 1 1 100%;
  order: -1;
}
.pp-fl-search-input { /* styles the search bar */
  font-family: Grenze Gotisch, serif;
  color: #FDD8D8;
  caret-color: #FDD8D8;
  width: 100%;
  max-width: 100%;
}
.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: none;
  border-bottom: 2px solid #950B0D;
  border-radius: 0;
}
.pp-fl-search-input::placeholder { /* placeholder text */
  color: #950B0DBF;
}
.pp-fl-search-input ~ div svg { /* colors the svg */
  color: #950B0D !important;
  opacity: 1; 
  transform: scale(1.5);
}
/* FILTER TAGS BUTTON */
.pp-fl-filter-button {
  background: transparent !important;
  border: none;
  border-bottom: 2px solid #950B0D;
  border-radius: 0;
}
.pp-fl-filter-button svg { /* colors the svg */
  color: #950B0D !important;
}
/* === FILTER TAGS MENU SECTION === */
/* credits to @tigerdropped for the menu template ♡ */
.css-1dljitb { /* background of menu */
  background: #0C0404 !important;
  border: 2px solid #950B0D;
  border-radius: 0;
}
.css-dcyl1x, .css-178jenf { /* "Filters" and "Tags" text */
  text-align: center;
  font-family: Cinzel Decorative, serif;
  color: #950B0D;
}
.css-lyo4r5 svg { /* colors the svg */
  color: #950B0D !important;
}
.css-18936vg {
  align-items: center;
}
.css-18936vg button { /* show all/hide tag buttons */
  border: 2px solid #950B0D;
  border-radius: 0;
  color: #950B0D;
  font-family: Grenze Gotisch, serif;
}
.css-tn23vd > li { /* sets tags into two columns */
  flex: 1 1 45%;
  text-wrap: nowrap;
}
.css-tn23vd * { /* takes up all available space */
  width: 100%;
}
:is(.css-1w58nos, .css-oqdsp6)::first-letter { /* hides emojis */
  font-size: 0;
}
.css-1w58nos, .css-oqdsp6 { /* selected and unselected tags */
  box-shadow: none !important;
  border: none !important;
  border-bottom: 1px solid #FDD8D8 !important;
  border-radius: 0;
  display: inline;
  text-align: center;
  color: #FDD8D8;
  font-family: Grenze Gotisch, serif;
  text-transform: lowercase;
}
.css-oqdsp6 { /* when tag is selected */
  background: transparent;
  color: #950B0D;
  border-color: #950B0D !important;
}
/* === 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: transparent;
  border: none;
  border-bottom: 2px solid #950B0D !important;
  border-radius: 0 !important;
}
:is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__single-value { /* selected option text in the box */
  color: #950B0D;
  font-family: Grenze Gotisch, serif;
  font-weight: 400;
  font-size: 1.25rem;
}
: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: #950B0D;
  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: #0C0404;
  border: 2px solid #950B0D;
  border-radius: 0;
}
.css-qr46ko { /* container of options */
  padding: 0;
}
:is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__option { /*options styling */
  color: #950B0D;
  font-family: Grenze Gotisch, serif;
  font-weight: 500;
  border-bottom: 2px solid #950B0D;
}
:is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__option:hover {
  background: #950B0D40;
  transition: 500ms;
  color: #FDD8D8;
}
: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: #950B0DBF;
  transition: 500ms;
  color: #FDD8D8;
}
.css-1igwmid { /* page numbers at bottom */
  justify-content: center;
}
:is(.pp-pg-prev-button, .pp-pg-next-button) svg { /* colors svgs */
  color: #950B0D;
  opacity: 1;
}
/* ======= 🥀 END OF BOT PAGE SECTION 🥀 ======= */

/* ======= 🦇 BOT CARDS SECTION 🦇 ======= */

/* === BOT CARD === */
.pp-cc-wrapper, .pp-cc-wrapper > div:empty { /* all background layers */
  background: transparent !important;
  transition: 500ms ease;
}
.pp-cc-wrapper { /* sets height of bot card */
  height: 350px;
}
.pp-cc-wrapper::before { /* safe tap for mobile DON’T REMOVE */
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 2;
  top: 0;
  left: 0;
  pointer-events: auto;
  transition: 500ms;
}
.pp-cc-wrapper:hover:before { /* allows to go to bot page after tap */
  z-index: -2;
}
.pp-cc-wrapper:hover { /* hover effect */
  box-shadow: none;
  transform: scale(1.05);
}
.css-1s5evre { /* new background of the card */
  background: #0C0404;
  border: 2px solid #950B0D;
  border-radius: 65px 0;
  overflow: hidden;
  height: 100%;
}
.css-1s5evre::before { /* top text for hover/tap effect, please avoid changing this text!! its for accessibility! */
  content: "hover for details";
  position: absolute;
  z-index: 1;
  top: 0;
  background: #0C0404BF;
  color: #FDD8D8;
  font-family: Grenze Gotisch, serif;
  text-align: center;
  font-size: 0.85rem;
  overflow: hidden;
  text-wrap: nowrap;
  width: 100%;
  transition: 500ms;
}
.pp-cc-wrapper:hover .css-1s5evre::before {
  width: 0;
}
@media only screen and (max-width:767px) { /* for mobile, dont change this text! */
  .css-1s5evre::before {
    content: "tap for details";
  }
}
.css-1s5evre a:first-child { /* puts bot name under image */
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: nowrap;
  justify-content: center;
}
/* BOT NAME */
.css-nlxhw4 { /* container to put name at bottom */
  position: absolute;
  z-index: 3;
  bottom: 0;
  width: 98%;
}
.pp-cc-name { /* bot name styling */
  position: relative;
  color: #950B0D;
  font-family: Cinzel Decorative, serif;
  font-size: 1rem;
  text-shadow: 0 0 0.5rem #6D0609;
  letter-spacing: unset;
  text-transform: unset;
  text-align: center;
  padding: 5px;
  left: -5px;
  transition: 500ms;
}
.pp-cc-wrapper:hover .pp-cc-name {
  color: #FDD8D8;
}
/* === CHAT RIBBON SECTION === */
.css-10cv7r2 { /* ribbon positioning */
  position: absolute;
  display: flex;
  top: 0;
  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, inset */
  inset: unset;
  overflow: visible;
  filter: none;
}
.pp-cc-ribbon-wrap { /* undoes ribbon shape and background */
  padding: 0;
  clip-path: unset;
  box-shadow: none;
  background: transparent;
  overflow: visible;
  border-radius: 0;
  transition: all 500ms;
}
.pp-cc-chats { /* chat text */
  background: #0C0404BF;
  color: #FDD8D8;
  font-family: Cinzel, serif;
  font-size: 0.85rem;
  font-weight: 400;
  text-align: center;
  text-wrap: nowrap;
  overflow: hidden;
  width: 0;
  transition: 500ms;
}
.pp-cc-wrapper:hover .pp-cc-chats {
  width: 100%;
}
.pp-cc-chats svg { /* original chat icon */
  display: none;
}
.pp-cc-chats-count::before { /* replacement icon */
  content:"⛧ ";
  font-weight: 400;
}
/* BOT IMAGE */
.css-1q7rmf0 {
  height: 350px;
}
.pp-cc-avatar { /* filter + mask */
  border-radius: 0;
  mask-image: linear-gradient(to bottom, black 15%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 15%, transparent 100%);
  filter: brightness(0.85) grayscale(1);
  transition: 500ms ease;
}
.pp-cc-wrapper:hover .pp-cc-avatar {
  filter: brightness(0.425);
}
/* USERNAME */
.css-1s5evre > a:not(:first-child) {
  display: none;
}
/* DESCRIPTION */
.css-199gcrh { /* description container positioning */
  position: absolute;
  max-height: 90px;
  top: 55px;
  overflow: hidden auto;
  opacity: 0;
  transition: all 500ms;
}
.pp-cc-wrapper:hover .css-199gcrh { /* appears on hover */
  opacity: 1;
}
.pp-cc-description * { /* styles everything in description */
  font-family: Grenze Gotisch, serif;
  color: #FDD8D8 !important;
  text-align: center !important;
  font-size: 0.75rem;
}
/* STAR + STAR LINE */
.pp-cc-star-line {
  position: absolute;
  top: 150px;
  width: 0;
  border-top: 2px solid #950B0D;
  transition: 500ms ease-in-out;
}
.pp-cc-wrapper:hover .pp-cc-star-line {
  width: 100%;
}
.pp-cc-star { /* hides star image */
  display: none;
}
/* === TAGS SECTION === */
.pp-cc-tags { /* tags container positioning */
  position: absolute;
  bottom: 55px;
  max-height: 100px;
  overflow: hidden auto;
  opacity: 0;
  transition: all 500ms;
}
.pp-cc-wrapper:hover .pp-cc-tags { /* appears on hover */
  opacity: 1;
}
.css-k1urot {
  justify-content: center;
  align-items: center;
  padding: 0 5px;
}
.css-123m5uu, .pp-tag-limitless { /* makes limitless tag one line */
  flex: 1 1 100%;
  width: 100%;
}
.pp-tag-limitless { /* "Limitless" tag styling */
  background: transparent;
  border: 0;
  text-align: center;
  display: inline;
  font-size: 1rem;
}
.pp-cc-tags-regular::first-letter { /* gets rid of emojis */
  font-size: 0;
}
.pp-cc-tags-item { /* styles all tags */
  display: inline;
  line-height: unset;
  border: none;
  border-bottom: 1px solid #FDD8D8;
  border-radius: 0;
  color: #FDD8D8;
  font-family: Grenze Gotisch, serif;
  text-transform: lowercase;
  font-size: 0.8rem;
  transition: 500ms;
}
.pp-cc-tags-item:hover:not(.pp-tag-limitless) { /* tags except limitless on hover */
  color: #950B0D;
  border: none;
  border-bottom: 1px solid #950B0D;
  background: transparent;
}
/* TOKEN COUNT */
.css-1c9wmts { /* container positioning */
  bottom: unset;
  right: unset;
  left: 0;
  top: 25px;
  text-wrap: nowrap;
  overflow: hidden;
  background: #0C0404BF;
  width: 0;
  transition: 500ms;
}
.pp-cc-tokens-count { /* tokens text */
  color: #FDD8D8;
  text-shadow: none;
  font-family: Grenze Gotisch, serif;
  font-weight: 300;
  font-size: 0.65rem;
  opacity: 1;
  padding: 2px 0;
}
.pp-cc-wrapper:hover .css-1c9wmts {
  width: 100%;
}
/* EVENT DECOS */
.css-1c9wmts ~ div {
  display: none;
}
/* ======= 🥀 END OF BOT CARDS SECTION 🥀 ======= */

/* ======= 🦇 FOOTER SECTION 🦇 ======= */
/* MOBILE FOOTER */
.css-1qf4tpw {
  background: #0C0404E6;
  backdrop-filter: blur(5px);
  box-shadow: none;
  border: 2px solid #950B0D;
}
.pp-mnb-item-icon { /* colors the svgs */
  color: #950B0D;
}
/* ======= 🥀 END OF FOOTER SECTION 🥀 ======= */

/* ======= 🦇 HTML STYLING SECTION 🦇 ======= */
.pp-uc-about-me a { /* styles all links */
  color: #950B0D;
  transition: 500ms;
}
.pp-uc-about-me a:hover {
  color: #FDD8D8;
}
/* === STATUS BOX SECTION === */
.lav-status-box { /* status container */
  position: relative;
  margin: 1.5rem auto;
  max-width: 500px;
  display: flex;
  justify-content: center;
  color: #FDD8D8;
  font-family: Grenze Gotisch, serif;
}
.lav-status-header { /* "Status" text */
  position: absolute;
  top: -1.25rem;
  border: 2px solid #950B0D;
  border-radius: 0;
  padding: 0.25rem 0.75rem;
  background: #0C0404;
  color: #FDD8D8;
  font-family: Cinzel Decorative, serif;
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
}
.lav-status-content { /* styles content of status */
  background: #0C0404;
  border: 2px solid #950B0D;
  border-radius: 65px 0;
  width: 100%;
  padding: 1rem;
  font-size: 1.125rem;
  text-align: center;
}
/* === ABOUT ME BOX SECTION === */
.lav-about-me-box { /* container of box */
  position: relative;
  margin: 2.5rem auto;
  max-width: 500px;
  display: flex;
  justify-content: center;
  color: #FDD8D8;
  font-family: Grenze Gotisch, serif;
}
.lav-about-me-header { /* "About Me" text */
  position: absolute;
  top: -1.5rem;
  left: 2.5rem;
  padding: 0.25rem 0.75rem;
  color: #FDD8D8;
  font-family: Cinzel Decorative, serif;
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
}
.lav-about-content { /* content of the scrollbox */
  background: #0C0404;
  border: 2px solid #950B0D;
  border-radius: 65px 0;
  width: 100%;
  height: 150px;
  overflow: hidden auto;
  padding: 1.25rem;
  font-size: 1.125rem;
  text-align: center;
  font-weight: 300;
}
.lav-about-image { /* positions image in bottom right corner */
  position: absolute;
  bottom: -1.5rem;
  right: -2.5rem;
  width: 100px;
  height: auto;
}
/* === DROPDOWNS SECTION === */
.lav-details-container { /* helps with spacing dropdowns */
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 1.25rem;
  margin: 1rem 0;
}
.lav-details-wrapper {
  display: flex;
  gap: 1.25px;
}
.lav-details-wrapper:nth-child(2n) { /* swaps image and dropdown place on even dropdowns */
  flex-direction: row-reverse;
}
.lav-details-image { /* images next to dropdowns */
  width: 75px;
  height: 75px;
}
.lav-dropdown { /* styles whole dropdown */
  position: relative;
  top: 1rem;
  background: #0C0404;
  border: 2px solid #950B0D;
  border-radius: 65px 0;
  height: 3rem;
  overflow: hidden;
  transition: all 500ms;
  width: 100%;
}
.lav-dropdown[open] { /* for smooth open */
  height: 300px;
}
.lav-dropdown summary { /* dropdown title */
  list-style-type: none;
  padding: 0.5rem 2rem;
  color: #FDD8D8;
  font-family: Cinzel Decorative, serif;
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
}
.lav-content { /* box with main text content */
  max-height: 250px;
  overflow: hidden auto;
  padding: 1.25rem;
  color: #FDD8D8;
  font-family: Grenze Gotisch, serif;
  font-size: 1.125rem;
  font-weight: 300;
}
html:not(:has([class="lav-credit"])) .css-0::after {content: ""; position: fixed; pointer-events: none; inset: 0; z-index: 20000; background: blue;}
.lav-credit { /* DO NOT DELETE THE CREDIT!!! */
  position: absolute;
  top: -20px;
  right: 0;
  color: #FDD8D8;
  font-size: 1rem;
  font-family: Grenze Gotisch, serif;
}
.lav-credit a {
  color: #FDD8D8;
  transition: 500ms ease; 
}
.lav-credit a:hover {
  color: #0C0404;
}
/* ======= 🥀 END OF HTML STYLING SECTION 🥀 ======= */

/* ======= 🦇 HTML SECTION - EVERYTHING WILL BE VISIBLE IN YOUR BIO 🦇 ======= */
</style>
<div class="lav-status-box">
  <div class="lav-status-header">Status</div>
  <div class="lav-status-content">status text goes hereeeeeeeeee</div>
</div>
<div class="lav-about-me-box">
  <div class="lav-about-me-header">About Me</div>
  <div class="lav-about-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam venenatis justo eget nisi semper pulvinar. Pellentesque scelerisque mattis molestie. Mauris bibendum massa vitae facilisis aliquet. Duis pretium magna nec ex laoreet finibus. Morbi interdum vel turpis ut scelerisque. Cras sit amet odio nunc. Integer eget tempus nisl. Curabitur rhoncus varius sapien, quis volutpat ipsum convallis a. Donec convallis libero mi, non vehicula augue vestibulum quis. Cras non libero ultrices, congue justo in, ultricies risus. Etiam sit amet libero ipsum. Pellentesque tempor, quam nec sodales tempor, neque nulla finibus nisi, vel mattis enim massa eget lectus.</p></div>
  <div class="lav-about-image"><img src="https://i.imgur.com/MwyM5sR.png"></div>
</div>
<div class="lav-details-container">
  <!--To create more dropdowns, copy the entire div of the lav-details-wrapper. They should stay within the lav-details-container div to keep consistent spacing between dropdowns!-->
  <div class="lav-details-wrapper">
    <img class="lav-details-image" src="https://i.imgur.com/MwyM5sR.png">
    <details class="lav-dropdown"><summary>Filler</summary>
      <div class="lav-content"><p>This is your detailed content inside the box.</p>
      <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.</p>
      </div>
    </details>
  </div>
  <div class="lav-details-wrapper">
    <img class="lav-details-image" src="https://i.imgur.com/MwyM5sR.png">
    <details class="lav-dropdown"><summary>Filler</summary>
      <div class="lav-content"><p>This is your detailed content inside the box.</p>
      <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>
<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>