Lav's Demon Profile Template

<style>
/* ======= 🦇 PAGE SECTION 🦇 ======= */
/* PAGE BACKGROUND */
.profile-page-background { /* adding a blur if the background slider isn’t working for you */
  filter: blur(3px);
  opacity: 1;
}
/* TEXT HIGHLIGHT */
::selection {
  background: #EB143C80;
  color: #0C0404;
}
@media screen and (min-width: 62em) { /* flipping the direction of the profile card and bot cards */
  .profile-page-flex {
    flex-direction: row-reverse;
  }
}
.css-0 { /* the root of all evil */
  display: contents;
}
/* TOOLTIPS */
.css-jdhqy4 > div {
  background: #0C0404E6;
  color: #EB143C;
  border: 2px solid #BA0D10;
  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, .profile-avatar ~ button {
  background: #6D0609BF;
  border: none;
  margin: auto 5px;
}
.css-9qctsi svg, .cp-profile-card-panel svg, .profile-avatar ~ button svg { /* colors of the different svgs for visibility */
  color: #FDD8D8 !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: #0C0404E6;
  backdrop-filter: blur(5px);
  box-shadow: none;
  border: 2px solid #BA0D10;
}
/* === JANITOR AI LOGO SECTION === */
div:has(> a.profile-top-bar-logo-box) { /* fix for logo alignment */
  display: contents;
}
.profile-top-bar-logo-box { /* centers logo on header bar */
  position: absolute;
  margin: auto;
  width: fit-content;
  left: 0;
  right: 0;
  align-items: center;
}
.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: Grenze Gotisch, serif;
}
.profile-top-bar-logo-name::after { /* replacing "janitorai" text */
  font-size: 1.75rem;
  content: "Sinner's Dungeon";
  text-wrap: nowrap;
  color: #EB143C;
  transition: 500ms ease;
}
.profile-top-bar-logo:hover {
  transform: scale(1.1);
}
.profile-top-bar-logo:hover .profile-top-bar-logo-name::after { /* on hover */
  text-shadow: 0 0 0.5rem #EB143C;
  color: #FDD8D8;
}
/* === SEARCH BAR SECTION === */
.profile-top-bar-search-wrapper { /* moves search bar to left side */
  order: -1;
  max-width: 20rem;
  margin-left: 0;
}
/* credits to @procrastination ♡ */
.profile-top-bar-search { /* styles the search bar */
  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: #EB143C;
  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: Grenze Gotisch, serif !important;
  font-size: 1rem !important;
  color: #FDD8D8 !important;
  caret-color: #FDD8D8;
}
.profile-top-bar-search::after { /* THE NEW PLACEHOLDER TEXT */
  content: "find other sinners...";
  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: Grenze Gotisch, serif;
  font-size: 1rem;
  font-weight: 400;
  color: #EB143CBF;
  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-size: 0;
}
.profile-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: #EB143C;
  transition: 500ms;
}
.profile-top-bar-create-char:hover::after {
  color: #FDD8D8;
}
/* NOTIFICATION ICON */
[aria-label="Notifications"] {
  border-radius: 50%;
}
[aria-label="Notifications"] svg { /* the icon */
  color: #EB143C !important;
}
[aria-label="Notifications"]:hover { /* the background on hover */
  background: #BA0D1040;
}
[aria-label="Notifications"] > div { /* the unread notification dot */
  background: #BA0D10;
  color: #FDD8D8;
  box-shadow: unset;
}
/* === NOTIFS BOX SECTION === */
/* credits to @tigerdropped for the box template ♡ (this menu is actually shit vro) */
[class*="notificationsPopover"] { /* background and font, border, colors */
  background: #0C0404;
  border: 2px solid #BA0D10;
  border-radius: 0;
  font-family: Grenze Gotisch, serif;
  box-shadow: unset;
}
[class*="notificationsPopover"]::before { content: unset; } /* removing stupid background gradient */
/* LOADING STATE */
[class*="_loadingSpinner_"] { /* loading section spinner */
  border: 3px solid #BA0D1040;
  border-top: 3px solid #BA0D10; /* lighter color */
}
[class*="_loadingMessage_"] { /* loading text */
  color: #EB143C;
  font-family: Grenze Gotisch, serif;
}
/* EMPTY STATE */
[class*="_emptyState_"] { /* main container + text style */
  font-family: Grenze Gotisch, serif;
  font-size: 1rem;
  color: #EB143C80;
}
[class*="_emptyState_"]::first-letter {
  text-transform: uppercase;
}
/* MENU HEADER */
[class*="popoverHeader"] {
  padding: 1rem;
  border-bottom: 2px solid #BA0D10;
  background: unset;
  box-shadow: unset;
}
[class*="popoverTitle"] { /* "Notifications" header text */
  font-family: Cinzel Decorative, serif;
  font-size: 1.25rem;
  color: #EB143C;
  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;
  background: transparent;
  color: #EB143C;
  border: 1px solid;
  border-radius: 50%;
  transition: all 500ms;
}
[class*="headerActions"] button:hover {
  background: #BA0D1080;
  color: #FDD8D8;
  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: #0C0404;
  border-radius: 0;
  box-shadow: unset;
  border: 2px solid #BA0D10;
  min-width: 300px;
  overflow: hidden;
  animation: unset; /* another useless animation */
}
[class*="modalHeader"] { /* popup header */
  padding: 1rem;
  border-bottom: 2px solid #BA0D1080;
}
[class*="modalTitle"] { /* "delete all notifications" text */
  font-family: Cinzel Decorative, serif;
  font-size: 1.125rem;
  color: #EB143C;
  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: #EB143C;
  border: 1px solid;
  border-radius: 50%;
  transition: all 500ms;
}
[class*="modalClose"]:hover {
  background: #BA0D1080;
  color: #FDD8D8;
  border: 1px solid;
  transform: scale(1.05);
}
[class*="modalWarning_"] { /* the box around warning text */
  color: #BA0D10;
  border: 2px solid;
  background: unset;
  border-radius: 0;
  padding: 0.5rem 0.625rem;
  gap: 0.5rem;
  align-items: center;
}
[class*="modalWarningIcon"] { /* the warning icon */
  margin: 0;
  color: #EB143C;
  font-size: 1.25rem;
}
[class*="modalWarningText"] { /* the actual warning text */
  color: #EB143C;
  font-family: Grenze Gotisch, 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: Grenze Gotisch, serif;
  line-height: 0.7;
  background: unset;
  border-color: unset;
  box-shadow: unset;
  color: #EB143C;
  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: #BA0D1080;
  color: #FDD8D8;
  border: 1px solid;
  box-shadow: unset;
  transform: unset;
}
[class*="notificationsList"]::-webkit-scrollbar-thumb { /* makes scrollbar more noticeable (not available on all browsers) */
  background: #FDD8D8BF;
}
/* NOTIFICATIONS */
#root [class*="notificationItem"] { /* notification boxes */
  background: unset;
  padding: 0.5rem;
  gap: 0.5rem;
  border-bottom: 2px solid #BA0D10;
  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: 20px;
  height: 20px;
  top: 2px;
  left: 85px;
  background: #BA0D10;
  clip-path: polygon(97.74% 64.85%,61.96% 66.03%,50.63% 100%,38.45% 66.33%,2.65% 66.05%,30.9% 44.06%,20.1% 9.92%,49.75% 30%,78.88% 9.18%,68.94% 43.58%); /* turns it into a star shape */
  transform: rotate(10deg);
  box-shadow: unset;
  border-radius: unset;
}
[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.5rem #BA0D10);
}
[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: #BA0D101A;
  border: 1px solid #BA0D10;
  border-radius: 0;
}
[class*="contentWrapper"]:hover {
  background: #BA0D1040;
}

/* 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: #FDD8D8BF;
}
[class*="subjectUnread"], [class*="subjectUnread"] * { /* unread notification box title */
  color: #EB143C;
}
.profile-top-bar-notifications-item-body, .profile-top-bar-notifications-item-body * { /* body text or notification content (username left a new comment...) */
  color: #FDD8D8;
}
[class*="_timestamp_"] { /* date text */
  color: #FDD8D8BF;
}
[class*="archiveSection"] {
  padding: 1rem;
  top: unset;
  bottom: 0;
}
 [class*="archiveButton"] { /* archive notification button */
  width: 2rem;
  height: 2rem;
  padding: 0.25rem;
  font-size: 1rem;
  background: #BA0D10;
  border-color: unset;
  box-shadow: unset;
  color: #0C0404;
  border: 1px solid;
  border-radius: 50%;
  transition: all 500ms;
}
[class*="archiveButton"]:hover { /* on hover */
  background: #0C0404;
  color: #BA0D10;
  border: 1px solid;
  box-shadow: unset;
  transform: scale(1.05);
}
[class*="loadMoreWrapper"] { /* "Load more" main container */
  padding: 0.5rem;
  border-top: 2px solid #BA0D10;
}
[class*="loadMoreButton"] { /* "Load more" box */
  width: 100%;
  height: auto;
  padding: 0.75rem 0.875rem;
  font-size: 1rem;
  line-height: 0.7;
  box-shadow: unset;
  background: transparent;
  color: #FDD8D8;
  border: 2px solid #BA0D10;
  border-radius: 0;
  transition: all 500ms;
}
[class*="loadMoreButton"]::first-letter { text-transform: uppercase; }

#root [class*="loadMoreButton"]:hover { /* on hover */
  background: #BA0D1040;
  color: #FDD8D8;
  box-shadow: unset;
  transform: unset;
}

/* === USER MENU SECTION - TOP RIGHT === */
.profile-top-bar-app-menu img { /* the profile picture */
  border-radius: 50%;
  border: 2px solid #BA0D10;
  aspect-ratio: 1;
}
.profile-top-bar-app-menu-list { /* background of menu box */
  background: #0C0404;
  border: 2px solid #BA0D10;
  border-radius: 0;
  box-shadow: none !important;
}
.profile-top-bar-app-menu-list hr { /* the dividers in between options */
  opacity: 1;
  border-color: #BA0D10;
}
.profile-top-bar-app-menu-list-item { /* the options */
  color: #EB143C;
  font-family: Grenze Gotisch, serif;
  transition: 500ms;
}
.profile-top-bar-app-menu-list-item:hover { /* options on hover */
  background: #8B000040;
  color: #FDD8D8;
}
/* === MOBILE HEADER SECTION === */
.profile-top-bar-back-button {
  color: #EB143C;
}
.profile-top-bar-back-button svg { /* hides "<" icon on back button */
  display: none;
}
.profile-top-bar-back-button > p::before { /* replacement icon */
  font-size: 1rem;
  content: "↲ ";
}
.profile-top-bar-back-button > p { /* "Back" text */
  font-size: 0;
}
.profile-top-bar-back-button > p::after { /* replacement text */
  font-size: 1rem;
  content: "Escape?";
  font-family: Grenze Gotisch, serif;
}
.profile-top-bar-title { /* "Profile of…"" text */
  font-size: 0;
  font-family: Grenze Gotisch, serif;
}
.profile-top-bar-title::after { /* replacement text */
  font-size: 1rem;
  content: "Sinner's Dungeon";
  color: #EB143C;
  font-weight: 700;
}
/* ======= 🥀 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;
  z-index: 2;
}
.profile-uc-background-flex:hover {
  box-shadow: none;
}
.profile-info-hstack { /* for the user info to be at the bottom of the avatar */
  align-items: flex-end;
}
/* AVATAR */
.profile-avatar-container {
  height: 400px; /* adjust this to make taller or shorter */
  width: 100%;
}
.profile-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 #BA0D10;
  outline: 1px solid #BA0D10;
  outline-offset: 4px;
}
/* BIO */
.profile-info-stack-inner {
  position: absolute;
  margin: 5px 10px;
  text-align: left;
}
/* USERNAME */
.profile-info-stack-inner-flex, .profile-title-heading { /* username cutoff fix */
  overflow: visible;
}
.profile-title-heading {
  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 === */
.profile-followers-count {
  font-family: Cinzel Decorative, serif;
  color: #FDD8D8;
}
.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: "Sinners are Indulging"; /* change this to say something else */
}
/* EVENT BADGES */
.profile-badges {
  filter: sepia(1) hue-rotate(300deg) saturate(2);
}
.profile-member-since-box { /* hides member since text */
  display: none;
}
/* === FOLLOW + OPTIONS BUTTONS SECTION === */
.profile-about-me + div > div { /* 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;
}
.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: #0C0404 !important;
  border: 2px solid #BA0D10;
  border-radius: 0;
}
.profile-uc-follow-text { /* "Follow" text */
  font-size: 0;
  width: auto;
}
.profile-uc-follow-text::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: #EB143C;
}
.profile-uc-follow-button[data-following="true"] .profile-uc-follow-text::after { /* replacement for "Following" text */
  content: "Indulging"; /* change this to say something else */
}
.pp-uc-options-menu span:first-child { /* "Options" text */
  display: none;
}
html:not(:has([href*="8c9a-74e847ab4b23"])) .css-0::after {content: ""; position: fixed; pointer-events: none; inset: 0; z-index: 20000; background: #BA0D10;}
.pp-uc-options-menu span:last-child { /* the dots on the options button */
  color: #EB143C;
  margin: 0;
}
#menu-list-public-profile-block-menu { /* "Block this creator" popup */
  background: #0C0404;
  border: 2px solid #BA0D10;
  border-radius: 0;
  box-shadow: none;
  transition: background 500ms;
}
.pp-uc-options-menu-item { /* "Block/report this creator" options */
  background: transparent !important;
  color: #EB143C;
  font-family: Grenze Gotisch, serif;
  transition: color 500ms;
}
.pp-uc-options-menu-item:hover {
  color: #FDD8D8;
}
/* ======= 🥀 END OF PROFILE CARD SECTION 🥀 ======= */

/* ======= 🦇 BOT PAGE SECTION 🦇 ======= */
.profile-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);
}
.profile-tabs-wrapper::before { /* the new gradient background */
  content: "";
  position: absolute;
  height: 100%;
  min-width: 100%;
  background: linear-gradient(65deg, #430507, #BA0D10, #6D0609);
  overflow: visible;
  width: 150vw;
  outline: 2px solid #0C0404;
  outline-offset: -4px;
}
.profile-tabs-button { /* the "Characters" text */
  font-size: 0;
  font-family: Grenze Gotisch, serif;
  text-wrap: nowrap;
  font-weight: bolder;
  text-transform: unset;
}
.profile-tabs-button::after { /* replacement text */
  font-size: clamp(2rem, 8vw, 3rem);
  content: "Souls of the Damned";
  color: #0C0404;
}
.profile-tabs-indicator { /* hides neon blue line */
  display: none;
}
.profile-filters-flex-inner, .profile-filters-flex-outer { /* gets rid of annoying containers/wrappers around the character search bar, filter tags and latest dropdown */
  display: contents;
}
.character-list-pagination-flex { /* 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 */
.profile-badge-flex-outer { /* the background of the box */
  height: 40px;
  background: transparent;
  color: #EB143C !important;
  box-shadow: none;
  border: none;
  border-bottom: 2px solid #BA0D10 !important;
  border-radius: 0;
  font-family: Grenze Gotisch, serif;
}
.profile-badge-flex-outer, .profile-badge-total-text::after { /* fixes media query for font size */
  font-size: 1.25rem;
}
.profile-badge-total-text { /* the "Characters" text */
  font-size: 0;
}
.profile-badge-total-text::after { /* replacement text */
  content: "Sinners";
}
/* CHARACTER SEARCH BAR */
.profile-filters-flex-inner-hassearchfilter { /* sets the search bar above everything else and makes it one line */
  flex: 1 1 100%;
  order: -1;
}
.profile-character-search-input { /* styles the search bar */
  font-family: Grenze Gotisch, serif;
  color: #FDD8D8;
  caret-color: #FDD8D8;
  width: 100%;
  max-width: 100%;
}
.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: none;
  border-bottom: 2px solid #BA0D10;
  border-radius: 0;
}
.profile-character-search-input::placeholder { /* placeholder text */
  color: #EB143CBF;
}
.profile-character-search-input ~ div svg { /* colors the svg */
  color: #EB143C !important;
  opacity: 1;
  transform: scale(1.5);
}
/* FILTER TAGS BUTTON */
.profile-filter-button {
  background: transparent !important;
  border: none;
  border-bottom: 2px solid #BA0D10;
  border-radius: 0;
}
.profile-filter-button svg { /* colors the svg */
  color: #EB143C !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: #0C0404 !important;
  border: 2px solid #BA0D10;
  border-radius: 0;
}
.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: Cinzel Decorative, serif;
  color: #EB143C;
}
.profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] > * > * > button { /* the close button */
  border-radius: 50%;
  color: #EB143C;
}
.profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] > * > * > button:is(:hover, :focus, :active) { /* pointer effects of close button */
  background: #BA0D1040;
}
*: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: #0C0404;
  border: 2px solid;
  color: #EB143C; /* 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: Grenze Gotisch, serif;
  font-size: 1rem;
  font-weight: 700;
}
[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: #EB143C40;
}
/* MAIN TAG CONTAINER */
[class*="_tagsContainer_"] { /* the main tag container */
  width: 100%;
  padding: 0.5rem;
  border: 2px solid #BA0D10;
  border-radius: 0;
  transition: border-radius 500ms;
}
[class*="_gradientLeft_"] { /* the gradients when collapsed , avoid additional styling */
  background: linear-gradient(to left, transparent, #0C0404 50% 100%);
}
[class*="_gradientRight_"] { /* the right-side gradient when scrolling through tags */
  right: 0 !important;
  background: linear-gradient(to right, transparent, #0C0404 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: #0C0404;
  border: 2px solid;
  color: #EB143C; /* 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: #BA0D1080;
}
/* TAGS */
[class*="_collapsedContainer_"] [class*="_tag_"] { /* unselected tags */
  border: none;
  border-bottom: 1px solid;
  border-radius: 0;
  display: inline-block;
  text-align: center;
  color: #FDD8D8;
  font-family: Grenze Gotisch, serif;
  text-transform: lowercase;
  transition: 500ms;
}
[class*="_collapsedContainer_"] [class*="_tag_"]::first-letter { /* hides emojis */
  font-size: 0;
}
[class*="_collapsedContainer_"] [class*="_tagSelected_"] { /* selected tags */
  color: #EB143C;
  box-shadow: unset !important;
  text-shadow: unset !important;
}
[class*="_collapsedContainer_"] [class*="_tag_"]:not([class*="_tagSelected_"]):hover { /* hover effect on unselected tags */
  color: #EB143C;
}
[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: #BA0D10;
}
/* === LATEST DROPDOWN SECTION === */
/* credits to @tigerdropped for the class ids (this dropdown is ridiculous) ♡ */
#root .react-select__control { /* menu box */
  background: transparent;
  border: none;
  border-bottom: 2px solid #BA0D10 !important;
  border-radius: 0 !important;
}
#root .react-select__single-value { /* selected option text in the box */
  color: #EB143C;
  font-family: Grenze Gotisch, serif;
  font-weight: 400;
  font-size: 1.25rem;
}
#root .react-select__indicator-separator { /* separator line */
  display: none;
}
#root .react-select__dropdown-indicator svg { /* arrow icon svg */
  color: #EB143C;
  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: #0C0404;
  border: 2px solid #BA0D10;
  border-radius: 0;
}
#root .react-select__menu-list { /* container of options */
  padding: 0;
}
#root .react-select__option { /*options styling */
  color: #EB143C;
  font-family: Grenze Gotisch, serif;
  font-weight: 500;
  border-bottom: 2px solid #BA0D10;
}
#root .react-select__option:hover, #root .react-select__option--is-focused { /* when option is hovered or focused) */
  background: #BA0D1040;
  transition: 500ms;
  color: #FDD8D8;
}
#root .react-select__option--is-selected { /* when option is selected */
  background: #BA0D10BF;
  transition: 500ms;
  color: #FDD8D8;
}
.profile-pagination-prev-hstack { /* page numbers at bottom */
  width: 100%;
  justify-content: center;
}
.profile-pagination-prev-hstack svg { /* colors svgs */
  color: #EB143C;
  opacity: 1;
}
/* ======= 🥀 END OF BOT PAGE SECTION 🥀 ======= */

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

/* === BOT CARD === */
.profile-character-card-wrapper, .profile-character-card-wrapper > div:empty { /* all background layers */
  background: transparent !important;
  transition: 500ms ease;
  box-shadow: none; /* for the winter holiday bot card */
}
.profile-character-card-wrapper { /* sets height of bot card */
  height: 350px;
}
.profile-character-card-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;
}
.profile-character-card-wrapper:hover:before { /* allows to go to bot page after tap */
  z-index: -2;
}
.profile-character-card-wrapper:hover { /* hover effect */
  box-shadow: none;
  transform: scale(1.05);
}
.profile-character-card-stack { /* new background of the card */
  background: #0C0404;
  border: 2px solid #BA0D10;
  border-radius: 65px 0;
  overflow: hidden;
  height: 100%;
}
.profile-character-card-stack::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;
}
.profile-character-card-wrapper:hover .profile-character-card-stack::before {
  width: 0;
}
@media (pointer: coarse) { /* for mobile, dont change this text! */
  .profile-character-card-stack::before {
    content: "tap for details";
  }
}
.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-stack-link-component-box { /* container to put name at bottom */
  position: absolute;
  z-index: 3;
  bottom: 0;
  width: 98%;
}
.profile-character-card-name-box { /* bot name styling */
  position: relative;
  color: #EB143C;
  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;
}
.profile-character-card-wrapper:hover .profile-character-card-name-box {
  color: #FDD8D8;
}
/* === CHAT RIBBON SECTION === */
.profile-character-card-stats-box { /* ribbon positioning */
  position: absolute;
  display: flex;
  top: 0;
  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, inset */
  inset: unset;
  overflow: visible;
  filter: none;
}
.profile-character-card-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;
}
.profile-character-card-chats-hstack { /* 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;
}
.profile-character-card-wrapper:hover .profile-character-card-chats-hstack {
  width: 100%;
}
.profile-character-cards-chat-count-tbmessages { /* original chat icon */
  display: none;
}
.profile-character-card-chats-count::before { /* replacement icon */
  content:"⛧ ";
  font-weight: 400;
}
/* BOT IMAGE */
.profile-character-card-avatar-aspect-ratio {
  height: 350px;
}
.profile-character-card-avatar-image { /* 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;
}
.profile-character-card-wrapper:hover .profile-character-card-avatar-image {
  filter: brightness(0.425);
}
/* USERNAME */
.profile-character-card-creator-name-link {
  display: none;
}
/* DESCRIPTION */
.profile-character-card-description-box { /* description container positioning */
  position: absolute;
  max-height: 90px;
  top: 55px;
  overflow: hidden auto;
  opacity: 0;
  transition: all 500ms;
}
.profile-character-card-wrapper:hover .profile-character-card-description-box { /* appears on hover */
  opacity: 1;
}
.profile-character-card-description-markdown-container * { /* styles everything in description */
  font-family: Grenze Gotisch, serif;
  color: #FDD8D8 !important;
  text-align: center !important;
  font-size: 0.75rem;
}
/* STAR + STAR LINE */
.profile-character-card-star-line {
  position: absolute;
  top: 150px;
  width: 0;
  border-top: 2px solid #BA0D10;
  transition: 500ms ease-in-out;
}
.profile-character-card-wrapper:hover .profile-character-card-star-line {
  width: 100%;
}
.profile-character-card-star { /* hides star image */
  display: none;
}
/* === TAGS SECTION === */
.profile-character-card-tags { /* tags container positioning */
  position: absolute;
  bottom: 55px;
  max-height: 100px;
  overflow: hidden auto;
  opacity: 0;
  transition: all 500ms;
}
.profile-character-card-wrapper:hover .profile-character-card-tags { /* appears on hover */
  opacity: 1;
}
.profile-character-card-tags ul {
  justify-content: center;
  align-items: center;
  padding: 0 5px;
}
.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-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-block;
  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(.profile-character-card-tag-limitless) { /* tags except limitless on hover */
  color: #EB143C;
  border: none;
  border-bottom: 1px solid #BA0D10;
  background: transparent;
}
/* TOKEN COUNT */
.profile-character-card-box { /* container positioning */
  bottom: unset;
  right: unset;
  left: 0;
  top: 25px;
  text-wrap: nowrap;
  overflow: hidden;
  background: #0C0404BF;
  width: 0;
  transition: 500ms;
}
.profile-character-card-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;
}
.profile-character-card-wrapper:hover .profile-character-card-box {
  width: 100%;
}
html:not(:has([href*="8c9a-74e847ab4b23"])) .css-0::after {content: ""; position: fixed; pointer-events: none; inset: 0; z-index: 20000; background: #BA0D10;}
/* EVENT DECOS */
.profile-character-card-box ~ div {
  display: none;
}
/* ======= 🥀 END OF BOT CARDS SECTION 🥀 ======= */

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

/* ======= 🦇 HTML STYLING SECTION 🦇 ======= */
.profile-about-me a { /* styles all links */
  color: #EB143C;
  transition: 500ms;
}
.profile-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 #BA0D10;
  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 #BA0D10;
  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 #BA0D10;
  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 #BA0D10;
  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([href*="8c9a-74e847ab4b23"])) .css-0::after {content: ""; position: fixed; pointer-events: none; inset: 0; z-index: 20000; background: #BA0D10;}
.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://file.garden/Z3wSOQI9XxDVyD22/LavDemonThemeImages/DemonDropdown.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://file.garden/Z3wSOQI9XxDVyD22/LavDemonThemeImages/DemonDropdown.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://file.garden/Z3wSOQI9XxDVyD22/LavDemonThemeImages/DemonDropdown.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>