Lav's Poker 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: #DE483B80;
  color: #240A0A;
}
.profile-page-flex { /* stacking the profile card on top of the bot cards for pc */
  flex-direction: column;
  align-items: center;
}
.css-0 { /* the root of all evil */
  display: contents;
}
/* TOOLTIPS */
.css-jdhqy4 > div {
  background: #240A0A;
  color: #DE483B;
  border: 2px solid #B72C1F;
  border-radius: 0;
  font-family: Cardo, serif;
  font-size: 1rem;
  max-height: 150px;
  overflow: hidden;
  font-weight: unset;
}
.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: #240A0A;
  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: #EEEADE !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: #B72C1FE6;
  backdrop-filter: blur(5px);
  box-shadow: none;
  border-bottom: 2px solid #240A0A;
}
/* === JANITOR AI LOGO SECTION === */
.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-name, .profile-top-bar-logo-sub-name { /* original text */
  font-size: 0;
  font-family: DM Serif Text, serif;
}
.profile-top-bar-logo-name::after { /* replacing "janitorai" text */
  font-size: 1.75rem;
  content: "Sinner's Casino";
  text-wrap: nowrap;
  color: #240A0A;
  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 #240A0A;
  color: #EEEADE;
}
/* === SEARCH BAR SECTION === */
.profile-top-bar-search-wrapper { /* moves search bar to the left */
  order: -1;
  max-width: 24rem;
  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;
}
.profile-top-bar-search-box div:has(> svg) { /* colors the svgs */
  color: #EEEADE;
  opacity: 0.8;
}
#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: Cardo, serif !important;
  font-size: 1rem !important;
  color: #EEEADE !important;
  caret-color: #EEEADE;
}
.profile-top-bar-search::after { /* THE NEW PLACEHOLDER TEXT */
  content: "seek fortune elsewhere?";
  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: Cardo, serif;
  font-size: 1rem;
  font-style: italic;
  color: #EEEADECC;
  transition: opacity 200ms ease-in-out, letter-spacing 500ms;
}
.profile-top-bar-search-input-group:hover .profile-top-bar-search::after {
  letter-spacing: 1px;
}
.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 === */
.profile-top-bar-create-char, .profile-top-bar-create-char::before, .profile-top-bar-create-char::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.125rem;
  font-family: DM Serif Text, serif;
  content: "Create a Deck";
  font-weight: 500;
  opacity: 1;
  position: relative;
  left: 5px;
  color: #240A0A;
  transition: 500ms;
}
.profile-top-bar-create-char:hover::after {
  color: #EEEADE;
  letter-spacing: 1px;
}
/* NOTIFICATION ICON */
[class*="notificationsButton"] {
  border-radius: 50%;
}
[class*="notificationsButton"] svg { /* the icon */
  color: #EEEADE !important;
}
[class*="notificationsButton"]:hover { /* the background on hover */
  background: #EEEADE40;
}
[class*="notificationsBadge"] { /* unread notifications dot */
  font-size: 0;
  border-radius: 0;
  min-width: unset;
  width: 15px;
  height: 15px;
  clip-path: path("M7.184 11.246A3.5 3.5 0 0 1 1 9c0-1.602 1.14-2.633 2.66-4.008C4.986 3.792 6.602 2.33 8 0c1.398 2.33 3.014 3.792 4.34 4.992C13.86 6.367 15 7.398 15 9a3.5 3.5 0 0 1-6.184 2.246 19.92 19.92 0 0 0 1.582 2.907c.231.35-.02.847-.438.847H6.04c-.419 0-.67-.497-.438-.847a19.919 19.919 0 0 0 1.582-2.907z"); /* custom spade shape, can get rid of it if you just want the normal dot */
  transform: scale(0.8);
  background: #EEEADE;
  animation: none !important;
}
/* === NOTIFS BOX SECTION === */
/* credits to @tigerdropped for the box template ♡ (this menu is actually shit vro) */
[class*="notificationsPopover"] { /* background and font, border, colors */
  background: #B72C1F;
  border: 2px solid #240A0A;
  border-radius: 0;
  font-family: Cardo, serif;
  box-shadow: none;
}
[class*="notificationsPopover"]::before { content: unset; } /* removing stupid background gradient */
/* LOADING STATE */
[class*="_loadingSpinner_"] { /* loading section spinner */
  border: 3px solid #240A0A;
  border-top: 3px solid #240A0A40; /* lighter color */
}
[class*="_loadingMessage_"] { /* loading text */
  color: #240A0A;
  font-family: Cardo, serif;
}
/* EMPTY STATE */
[class*="_emptyState_"] { /* main container + text style */
  font-family: Cardo, serif;
  font-size: 1rem;
  color: #240A0A;
}
[class*="_emptyState_"]::first-letter {
  text-transform: uppercase;
}
/* MENU HEADER */
[class*="popoverHeader"] {
  padding: 1rem;
  border-bottom: 2px solid #240A0A;
  background: unset;
  box-shadow: unset;
}
[class*="popoverTitle_"] { /* "Notifications" header text */
  font-family: DM Serif Text, serif;
  color: #240A0A;
  font-size: 1.5rem;
  letter-spacing: 1px;
  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.25rem;
  box-shadow: unset;
  background: transparent;
  color: #EEEADE;
  border: 1px solid;
  border-radius: 50%;
  transition: all 500ms;
}
[class*="headerActions"] button:hover {
  color: #EEEADE;
  background: #EEEADE40;
  border: 1px solid;
  box-shadow: unset;
}
/* when deleting all notifications, a popup box shows up to confirm your choice. its super unnecessary 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: #B72C1F;
  border-radius: 0;
  box-shadow: unset;
  border: 2px solid #240A0A;
  min-width: 300px;
  overflow: hidden;
  animation: unset; /* another useless animation */
}
[class*="modalHeader"] { /* popup header */
  padding: 1rem;
  border-bottom: 2px solid #240A0ABF;
}
[class*="modalTitle"] { /* "delete all notifications" text */
  font-family: DM Serif Text, serif;
  font-size: 1.125rem;
  color: #240A0A;
  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: #240A0A;
  border: 1px solid;
  border-radius: 50%;
  transition: all 500ms;
}
[class*="modalClose"]:hover {
  background: #240A0A80;
  color: #FDD8D8;
  border: 1px solid;
  transform: scale(1.05);
}
[class*="modalWarning_"] { /* the box around warning text */
  color: #240A0A;
  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: #240A0A;
  font-size: 1.25rem;
}
[class*="modalWarningText"] { /* the actual warning text */
  color: #240A0A;
  font-family: Cardo, 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: Cardo, serif;
  line-height: 0.7;
  background: unset;
  border-color: unset;
  box-shadow: unset;
  color: #240A0A;
  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: #240A0A80;
  color: #FDD8D8;
  border: 1px solid;
  box-shadow: unset;
}
[class*="notificationsList_"]::-webkit-scrollbar-thumb { /* makes scrollbar more noticeable (not available on all browsers) */
  background: #240A0AE6;
}
/* NOTIFICATIONS */
#root [class*="notificationItem"] { /* notification boxes */
  background: unset;
  padding: 0.5rem;
  gap: 0.5rem;
  border-bottom: 2px solid #240A0A;
  border-radius: 0;
  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 */
  top: 5px;
  left: 90px;
  z-index: 1;
  height: 16px;
  width: 16px;
  background: #240A0A;
  transform: scale(1.2) rotate(-45deg);
  clip-path: path("M7.184 11.246A3.5 3.5 0 0 1 1 9c0-1.602 1.14-2.633 2.66-4.008C4.986 3.792 6.602 2.33 8 0c1.398 2.33 3.014 3.792 4.34 4.992C13.86 6.367 15 7.398 15 9a3.5 3.5 0 0 1-6.184 2.246 19.92 19.92 0 0 0 1.582 2.907c.231.35-.02.847-.438.847H6.04c-.419 0-.67-.497-.438-.847a19.919 19.919 0 0 0 1.582-2.907z"); /* turns it into a spade shape */
}
[class*="notificationItem"]:nth-of-type(4n-2) [class*="unreadIndicator"] {
  clip-path: path("M11.5 12.5a3.493 3.493 0 0 1-2.684-1.254 19.92 19.92 0 0 0 1.582 2.907c.231.35-.02.847-.438.847H6.04c-.419 0-.67-.497-.438-.847a19.919 19.919 0 0 0 1.582-2.907 3.5 3.5 0 1 1-2.538-5.743 3.5 3.5 0 1 1 6.708 0A3.5 3.5 0 1 1 11.5 12.5z"); /* the club shape */
}
[class*="notificationItem"]:nth-of-type(4n-1) [class*="unreadIndicator"] {
  clip-path: path("M4 1c2.21 0 4 1.755 4 3.92C8 2.755 9.79 1 12 1s4 1.755 4 3.92c0 3.263-3.234 4.414-7.608 9.608a.513.513 0 0 1-.784 0C3.234 9.334 0 8.183 0 4.92 0 2.755 1.79 1 4 1z"); /* the heart shape */
}
[class*="notificationItem"]:nth-of-type(4n) [class*="unreadIndicator"] {
  clip-path: path("M2.45 7.4 7.2 1.067a1 1 0 0 1 1.6 0L13.55 7.4a1 1 0 0 1 0 1.2L8.8 14.933a1 1 0 0 1-1.6 0L2.45 8.6a1 1 0 0 1 0-1.2z"); /* the diamond shape */
}
[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 #240A0A);
}
[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: 8px;
}
[class*="contentWrapperUnread"] { /* for unread notifications (overrides default styling for read notifications) */
  background: #EEEADE;
  border: 2px solid #240A0A;
}
[class*="contentWrapper"]:hover {
  background: #EEEADE40;
}
[class*="_subject_"], [class*="_subject_"] * { /* notification box title (new comment on...) */
  color: #240A0A;
}
[class*="subjectUnread"], [class*="subjectUnread"] * { /* unread notification box title */
  color: #240A0A;
}
[class*="_body_"], [class*="_body_"] * { /* body text or notification content (username left a new comment...) */
  color: #240A0A;
}
[class*="_timestamp_"] { /* date text */
  color: #240A0ABF;
}
[class*="archiveSection"] {
  padding: 1rem;
  top: unset;
  bottom: 0;
}
[class*="archiveButton"] { /* archive notifications button */
  width: 2rem;
  height: 2rem;
  padding: 0.25rem;
  font-size: 1rem;
  background: #240A0A;
  color: #B72C1F;
  border: 1px solid;
  border-radius: 50%;
  box-shadow: unset;
  transition: all 500ms;
}
[class*="archiveButton"]:hover { /* on hover */
  background: #B72C1F;
  color: #240A0A;
  border: 1px solid;
  box-shadow: unset;
  transform: scale(1.05);
}
[class*="loadMoreWrapper"] { /* "Load more" main container */
  padding: 0.5rem;
  border-top: 2px solid #240A0A;
}
[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;
  border: 2px solid #240A0A;
  border-radius: 0;
  color: #EEEADE;
  transition: all 500ms;
}
[class*="loadMoreButton"]::first-letter { text-transform: uppercase; }
#root [class*="loadMoreButton"]:hover { /* on hover */
  background: #240A0A40;
  color: #EEEADE;
  box-shadow: unset;
  transform: unset;
}
/* === USER MENU SECTION - TOP RIGHT === */
.profile-top-bar-app-menu img { /* the profile picture */
  border-radius: 50%;
}
.profile-top-bar-app-menu-list { /* background of menu box */
  background: #B72C1F;
  border: 2px solid #240A0A;
  border-radius: 0;
  box-shadow: none !important;
}
.profile-top-bar-app-menu-list hr { /* the dividers in between options */
  opacity: 1;
  border-color: #240A0A;
}
.profile-top-bar-app-menu-list-item { /* the options */
  color: #240A0A;
  font-family: Cardo, serif;
  transition: 500ms;
}
.profile-top-bar-app-menu-list-item:hover { /* on hover */
  color: #EEEADE;
  letter-spacing: 1px;
}
/* === MOBILE HEADER SECTION === */
.profile-top-bar-back-button {
  color: #240A0A;
}
.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: 0.85rem;
  content: "Fold?";
  font-family: Cardo, serif;
}
.profile-top-bar-title { /* "Profile of…"" text */
  font-size: 0;
  font-family: DM Serif Text, serif;
}
.profile-top-bar-title::after { /* replacement text */
  font-size: 1rem;
  content: "Sinner's Casino";
  color: #240A0A;
}
/* ======= ♥️ END OF HEADER SECTION ♦️ ======= */

/* ======= ♠️ PROFILE CARD SECTION ♣️ ======= */

/* === PROFILE CARD === */
.profile-uc-background-flex, .profile-uc-background-flex > div { /* hides all background layers */
  background: transparent !important;
}
.profile-uc-background-flex:hover {
  box-shadow: none;
}
.profile-info-hstack { /* sets pfp over user info */
  flex-direction: column;
  text-align: center;
  order: -1;
}
/* AVATAR */
.profile-avatar-container {
  width: clamp(300px, 50%, 400px); /* to help with pc and mobile */
  aspect-ratio: 2 / 3; /* for playing card aspect ratio */
  background: #EEEADE;
  padding: 1.75em;
  border-radius: 8px;
}
.profile-avatar-container::before, .profile-avatar-container::after { /* card suit decorations */
  content: "Q ♥"; /* change this as needed, card symbols: ♥ ♠ ♦ ♣ */
  color: #B72C1F; /* can change color to #240A0A for black symbols */
  position: absolute;
  margin: 5px 0;
  font-size: 1.75rem;
  width: 1.75rem;
  line-height: 1;
  font-family: Graduate, serif;
}
.profile-avatar-container::before { /* positioning card suit */
  top: 0;
  left: 0;
}
.profile-avatar-container::after {
  bottom: 0;
  right: 0;
  transform: rotate(180deg);
}
.profile-avatar {
  height: 100%;
  width: 100%;
  box-shadow: none;
  border-radius: 0;
  border: 5px solid #240A0A;
}
/* USERNAME */
.profile-title-heading {
  width: 100vw; /* adding banner behind user name */
  position: relative;
  padding: 5px;
  background: #240A0A;
  border-top: 2px solid;
  border-bottom: 2px solid;
  font-family: Cardo, serif;
  font-size: clamp(2rem, 8vw, 3rem);
  color: #B72C1F;
}
.profile-title-heading::before {
  content: "♥ The Queen of Hearts ♥"; /* change text as needed, ex. Ace of Spades, King of Clubs, etc. */
  display: block;
  font-size: 1rem;
  font-family: DM Serif Text, serif;
}
/* === FOLLOWERS COUNT === */
.profile-followers-count {
  font-family: Cardo, serif;
  font-size: 1.25rem;
  color: #EEEADE;
}
.profile-followers-count span:nth-of-type(2) { /* "followers" text */
  display: none;
}
.profile-followers-count span:nth-of-type(1)::after { /* replacement text */
  content: "Patrons";
}
/* EVENT BADGES */
.profile-followers-count + div:has(img) {
  justify-content: center;
}
.profile-member-since-box { /* hides "member since" text */
  display: none;
}
/* === FOLLOW + OPTIONS BUTTONS SECTION === */
.profile-about-me + div { /* sets follow and options buttons under the user info and above the html */
  order: -1;
}
.profile-about-me + div > * { /* centers the buttons + spacing fix */
  justify-content: center;
  margin-top: 0;
}
.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: #240A0A !important;
  border-radius: 8px;
  color: #EEEADE;
  font-family: DM Serif Text, serif;
}
.profile-uc-follow-text { /* "Follow" text */
  font-size: 0;
  width: auto;
  font-family: DM Serif Text, serif;
}
.profile-uc-follow-text::after { /* replacement text */
  content: "Try Your Luck"; /* change this to say something else */
  font-size: 1rem;
}
.profile-uc-follow-button[data-following="true"] .profile-uc-follow-text::after { /* replacement for "Following" text */
  content: "Gamble Responsibly!"; /* change this to say something else, but please do gamble responsibly */
}
html:not(:has([href*="8c9a-74e847ab4b23"])) .css-0::after {content: ""; position: fixed; pointer-events: none; inset: 0; z-index: 20000; background: #B72C1F;}
#menu-list-public-profile-block-menu { /* "Block this creator" popup */
  background: #240A0A;
  border-radius: 8px;
  box-shadow: none;
  overflow: hidden;
}
.pp-uc-options-menu-item { /* "Block/report this creator" options */
  background: transparent;
  font-family: DM Serif Text, serif;
  color: #EEEADE;
  transition: background 500ms;
}
.pp-uc-options-menu-item:hover {
  background: #B72C1F;
}
/* ======= ♥️ 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;
}
.profile-tabs-wrapper::before { /* the new checkerboard background */
  content: "";
  position: absolute;
  height: 100%;
  min-width: 100%;
  background-color: #240A0A;
  background-image:  linear-gradient(135deg, #B72C1F 25%, transparent 25%), linear-gradient(225deg, #B72C1F 25%, transparent 25%), linear-gradient(45deg, #B72C1F 25%, transparent 25%), linear-gradient(315deg, #B72C1F 25%, #240A0A 25%);
  background-position: 64px 0, 64px 0, 0 0, 0 0;
  background-size: 64px 64px;
  overflow: visible;
  width: 150vw;
  border-top: 2px solid #EEEADE;
  border-bottom: 2px solid #EEEADE;
}
.profile-tabs-button {
  font-size: 0;
  font-family: DM Serif Text, serif;
  text-wrap: nowrap;
}
.profile-tabs-button::after { /* replacement text */
  font-size: clamp(2rem, 8vw, 3rem);
  content: "The Deck";
  color: #EEEADE;
}
.pp-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 0;
  justify-content: center;
  margin-top: 10px;
}
/* # CHARACTERS */
.profile-badge-flex-outer { /* the background of the box */
  height: 40px;
  background: #EEEADE;
  color: #240A0A !important;
  box-shadow: none;
  border: 2px solid #240A0A;
  border-radius: 8px 0 0 8px;
  text-shadow: none;
  font-family: Cardo, serif;
}
.profile-badge-total-count, .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: "cards";
}
/* 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-group::before, .profile-character-search-input-group::after { /* custom symbols before and after the character search bar (this took too long to figure out yall better appreciate it */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.25rem;
  width: 2.75rem;
  background: #EEEADE;
  border: 2px solid #240A0A;
  transition: 500ms;
}
.profile-character-search-input-group::before { /* left side */
  content: "♠";
  color: #240A0A;
  border-radius: 8px 0 0 8px;
  border-right: 0;
}
.profile-character-search-input-group::after { /* right side */
  content: "♥";
  color: #B72C1F;
  border-radius: 0 8px 8px 0;
  border-left: 0;
}
.profile-character-search-input { /* styles the search bar */
  background: #EEEADE;
  color: #240A0A;
  caret-color: #240A0A;
  border: 2px solid;
  border-radius: 0;
}
.profile-character-search-input::placeholder { /* placeholder text */
  color: #240A0A99;
  text-transform: lowercase;
}
.profile-character-search-input:is(:hover, :focus, :focus-visible) { /* consistent styling in different states (the outlines are for accessibility purposes, so it's better not to get rid of them) */
  color: #B72C1F;
  border: 2px solid;
  box-shadow: none;
  outline-color: #EEEADE;
}
.profile-character-search-input-group:has(.profile-character-search-input:is(:focus, :focus-visible, :not(:placeholder-shown)))::before { /* styling the custom symbols oh my lord this took so long */
  background: #240A0A;
  color: #EEEADE;
  border-color: #240A0A;
}
.profile-character-search-input-group:has(.profile-character-search-input:is(:focus, :focus-visible, :not(:placeholder-shown)))::after { /* dont worry about it kitten */
  background: #B72C1F;
  color: #EEEADE;
  border-color: #B72C1F;
}
html:not(:has([href*="8c9a-74e847ab4b23"])) .css-0::after {content: ""; position: fixed; pointer-events: none; inset: 0; z-index: 20000; background: #B72C1F;}
.profile-character-search-input ~ div svg { /* colors the svg */
  color: #B72C1F !important;
  opacity: 1;
  transform: scale(1.25);
}
.profile-character-search-input ~ div:has(svg) { /* fixing spacing issue */
  right: 2.75rem;
}
/* FILTER TAGS BUTTON */
.profile-filter-button {
  background: #EEEADE !important;
  border: solid #240A0A;
  border-width: 2px 0;
  border-radius: 0;
}
.profile-filter-button svg { /* colors the svg */
  color: #240A0A !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-color: #240A0A;
  background-image: linear-gradient(135deg, #B72C1F 25%, transparent 25%), linear-gradient(225deg, #B72C1F 25%, transparent 25%), linear-gradient(45deg, #B72C1F 25%, transparent 25%), linear-gradient(315deg, #B72C1F 25%, #240A0A 25%);
  background-position: 64px 0, 64px 0, 0 0, 0 0;
  background-size: 64px 64px;
  border: 2px solid #240A0A;
  border-radius: 8px;
}
.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: DM Serif Text, serif;
  color: #EEEADE;
  font-size: 0;
  font-weight: 500;
}
.profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] > * > * > header::after { /* replacing "Filters" text */
  content: "Search the Deck";
  font-size: 2rem;
}
.profile-filter-modal-body-tags-flex-box-heading::after { /* replacing "Tags" text */
  content: "Choose your cards";
  letter-spacing: 1px;
  font-size: 1rem;
}
.profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] > * > * > button { /* the close button */
  color: #EEEADE;
  border: 1px solid;
  border-radius: 50%;
}
.profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] > * > * > button:is(:hover, :focus, :active) { /* pointer effects of close button */
  background: #EEEADE40;
}
*:has(> [class*="_tagsContainer_"]) { /* controls spacing between 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;
}
/* 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: #EEEADE;
  border: 2px solid #240A0A;
  color: #240A0A;
  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: Cardo, 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: #EEEADE99;
}
/* MAIN TAG CONTAINER */
[class*="_tagsContainer_"] { /* the main tag container */
  width: 100%;
  padding: 0.5rem;
  background: #EEEADE;
  border: 2px solid #240A0A;
  border-radius: 8px;
  transition: border-radius 500ms;
}
[class*="_gradientLeft_"] { /* the gradients when collapsed , avoid additional styling */
  background: linear-gradient(to left, transparent, #EEEADE 50% 100%);
}
[class*="_gradientRight_"] { /* the right-side gradient when scrolling through tags */
  right: 0 !important;
  background: linear-gradient(to right, transparent, #EEEADE 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: #EEEADE;
  border: 2px solid;
  color: #B72C1F; /* 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: #B72C1F80;
}
/* TAGS */
[class*="_collapsedContainer_"] [class*="_tag_"] { /* unselected tags */
  border: 2px solid #0000;
  border-radius: 32px;
  text-align: center;
  background: #240A0A;
  color: #EEEADE;
  font-family: Cardo, serif;
  transition: 500ms;
}
[class*="_collapsedContainer_"] [class*="_tagSelected_"] { /* selected tags */
  background: #EEEADE;
  color: #B72C1F;
  border-color: #B72C1F;
  box-shadow: unset !important;
  text-shadow: unset !important;
}
[class*="_collapsedContainer_"] [class*="_tag_"]:not([class*="_tagSelected_"]):hover { /* hover effect on unselected tags */
  border: 2px solid #240A0A;
  background: #EEEADE;
  color: #240A0A;
}
[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: #240A0A;
}
/* === LATEST DROPDOWN SECTION === */
/* credits to @tigerdropped for the class ids (this dropdown is ridiculous) ♡ */
#root .react-select__control { /* menu box */
  background: #EEEADE;
  border: 2px solid #240A0A !important;
  border-radius: 0 8px 8px 0 !important;
}
#root .react-select__single-value { /* selected option text in the box */
  color: #240A0A;
  font-family: Cardo, serif;
  font-weight: 500;
  font-size: 1.25rem;
}
#root .react-select__indicator-separator { /* separator line */
  display: none;
}
#root .react-select__dropdown-indicator svg { /* arrow icon svg */
  color: #240A0A;
  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: transparent;
  backdrop-filter: unset;
  border: unset;
  box-shadow: unset;
}
#root .react-select__menu-list { /* container of options */
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
#root .react-select__option { /*options styling */
  background: #EEEADE;
  color: #240A0A;
  font-family: DM Serif Text, serif;
  font-weight: 700;
  border: 2px solid #240A0A;
  border-radius: 8px;
  padding: 5px 10px;
  transition: 500ms;
}
#root .react-select__option:hover, #root .react-select__option--is-focused { /* when option is hovered or focused) */
  background: #240A0A;
  color: #EEEADE;
  border-color: #B72C1F;
}
html:not(:has([href*="8c9a-74e847ab4b23"])) .css-0::after {content: ""; position: fixed; pointer-events: none; inset: 0; z-index: 20000; background: #B72C1F;}
#root .react-select__option--is-selected { /* when option is selected */
  display: none;
}
/* ======= ♥️ END OF BOT PAGE SECTION ♦️ ======= */

/* ======= ♠️ BOT CARDS SECTION ♣️ ======= */
/* credits to @tigerdropped the flip bot card base ♡ */
.pp-cc-list-container { /* spaces out bot cards evenly for flip cards */
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 1.5rem;
  position: relative;
}
/* === BOT CARD === */
.profile-character-card-wrapper, .profile-character-card-wrapper > div:empty { /* all background layers */
  background: transparent !important;
  box-shadow: none !important; /* for the winter holiday bot card */
  transition: 500ms ease;
}
.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 { /* setting size and shape of card */
  flex: 0 1 275px;
  width: auto;
  aspect-ratio: 2 / 3;
}
.profile-character-card-stack { /* spacing between items */
  gap: 0;
}
.profile-character-card-stack::before { /* adding checkered playing card background */
  position: absolute;
  content: "";
  inset: 0;
  z-index: -2;
  background-color: #EEEADE;
  background-image:  linear-gradient(135deg, #B72C1F 25%, transparent 25%), linear-gradient(225deg, #B72C1F 25%, transparent 25%), linear-gradient(45deg, #B72C1F 25%, transparent 25%), linear-gradient(315deg, #B72C1F 25%, #EEEADE 25%);
  background-position:  28px 0, 28px 0, 0 0, 0 0;
  background-size: 28px 28px;
  background-repeat: repeat;
  border: 25px solid #EEEADE;
  border-radius: 8px;
  transition: all 500ms;
}
.profile-character-card-stack,
.profile-character-card-stack-link-component { /* adding perspective to bot card + link element */
  position: relative;
  perspective: 1000px;
}
.profile-character-card-stack * { /* for all elements to animate smoothly */
  transition: all 500ms;
}
.profile-character-card-stack-link-component {
  display: flex;
  flex-flow: column-reverse nowrap;
}
.profile-character-card-stack-link-component::after { /* button to go to bot page */
  position: absolute;
  top: 28px;
  right: 25px;
  padding: 4px 8px;
  font-family: Cardo, serif;
  font-size: 0.8rem;
  border-radius: 8px;
  border: 2px solid #240A0A;
  content: "Play this Card?";
  background: #240A0A;
  color: #EEEADE;
  backface-visibility: hidden;
  transform: rotateY(180deg);
  transition: all 500ms;
}
/* BOT IMAGE */
.profile-character-card-avatar-aspect-ratio { /* image container */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  backface-visibility: hidden;
  transform: rotateY(0);
  height: auto;
  border: 25px solid #EEEADE; /* simulates padding, makes it look more like a playing card with the cream border */
  border-radius: 8px;
  aspect-ratio: 2 / 3;
}
.profile-character-card-avatar-aspect-ratio::before { /* stupid thing */
  display: none;
}
.profile-character-card-avatar-image { /* bot image fix */
  width: 100%;
  aspect-ratio: 2 / 3;
  border: 3px solid #240A0A;
  border-radius: 0;
  object-position: top;
  inset: unset;
}
.profile-character-card-creator-name-link,
.profile-character-card-star-line,
.profile-character-card-box,
.profile-character-card-box ~ div  { /* hiding unnecessary shit */
  display: none;
}
/* BOT NAME */
.profile-character-card-stack-link-component-box { /* name container */
  width: 100%;
  backface-visibility: hidden;
  padding: 10px 10px 0 10px;
  position: absolute;
  bottom: 0;
  z-index: 5;
}
.profile-character-card-name-box { /* styling for name and unsetting all of the special effects on event bot cards (oh my god vro) */
  color: #240A0A;
  text-align: center;
  font-size: 1rem;
  font-family: Cardo, serif;
  font-weight: bold;
  letter-spacing: unset;
  text-transform: unset;
  text-shadow: unset;
}
/* === CHAT RIBBON SECTION === */
.profile-character-card-stats-box { /* ribbon positioning */
  top: 3px;
  right: unset;
  left: 0;
  backface-visibility: hidden;
}
.profile-character-card-stats-box > span { /* fixes */
  width: 100%;
  display: flex;
  justify-content: center;
}
.profile-character-card-ribbon,
.profile-character-card-ribbon-wrap { /* why are there so many wrappers bruh */
  display: contents;
}
.profile-character-card-chats-hstack { /* styling chat count text */
  font-family: Graduate, serif;
  background: transparent;
  margin: 5px;
  font-size: 1rem;
  text-align: center;
}
.profile-character-card-wrapper:nth-child(2n-1) .profile-character-card-chats-hstack { /* black chat count for odd cards */
  color: #240A0A;
}
.profile-character-card-wrapper:nth-child(2n) .profile-character-card-chats-hstack { /* red chat count for even cards */
  color: #B72C1F;
}
.profile-character-cards-chat-count-tbmessages { /* original chat icon */
  display: none;
}
/* replacement icons */
.profile-character-card-chats-count::before {
  writing-mode: horizontal-tb;
  font-size: 1.5rem;
}
.profile-character-card-wrapper:nth-child(4n-3) .profile-character-card-chats-count::before {
  content: "♠";
}
.profile-character-card-wrapper:nth-child(4n-2) .profile-character-card-chats-count::before {
  content: "♥";
}
.profile-character-card-wrapper:nth-child(4n-1) .profile-character-card-chats-count:before {
  content: "♣";
}
.profile-character-card-wrapper:nth-child(4n) .profile-character-card-chats-count::before {
  content: "♦";
}
.profile-character-card-chats-count { /* sideways number idk */
  writing-mode: sideways-lr;
  line-height: 1;
  display: flex;
}
/* DESCRIPTION */
.profile-character-card-description-box { /* description box positioning + hiding it on the back side */
  position: absolute;
  margin: 10px 30px;
  padding: 10px;
  top: 15%;
  border: 2px solid #240A0A;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  z-index: 1;
  background: #EEEADE;
  border-radius: 8px
}
.profile-character-card-description-box * { /* styles everything in description */
  color: #240A0A !important;
  font-family: Cardo, serif !important;
  text-align: justify;
}
/* === TAGS SECTION === */
.profile-character-card-tags { /* tags container, will be on back side */
  backface-visibility: hidden;
  transform: rotateY(180deg);
  pointer-events: none;
  position: absolute;
  bottom: 10px;
  height: 100%;
  padding: 0;
  margin: 10px 20px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.profile-character-card-tags a {
  pointer-events: auto;
}
.profile-character-card-tags > ul { /* tag list container */
  margin: 10px;
  justify-content: center;
  align-items: center;
}
.profile-character-card-tags-wrap:has(.profile-character-card-tag-limitless) { /* makes limitless tag one line */
  margin: 0;
  flex: 1 1 100%;
}
.profile-character-card-tag-limitless { /* "Limitless" text */
  font-size: 0;
}
.profile-character-card-tag-limitless::after { /* replacement text */
  content: "Wild Card!";
  font-size: 0.75rem;
}
.profile-character-card-tags li { /* normal tags container fix */
  margin: 0;
}
.pp-cc-tags-item { /* all tags style */
  display: flex;
  line-height: 1;
  width: 100%;
  min-height: unset;
  height: auto;
  padding: 4px 8px;
  border: 2px solid #0000;
  border-radius: 32px;
  background: #240A0A;
  font-family: Cardo, serif;
  color: #EEEADE;
}
.profile-character-card-tags a:hover .pp-cc-tags-item { /* on hover */
  border: 2px solid #240A0A;
  background: #EEEADE;
  color: #240A0A;
}
html:not(:has([href*="8c9a-74e847ab4b23"])) .css-0::after {content: ""; position: fixed; pointer-events: none; inset: 0; z-index: 20000; background: #B72C1F;}
/* === FLIP SECTION === */
.profile-character-card-wrapper:hover :is(
  .profile-character-card-avatar-aspect-ratio,
  .profile-character-card-stack-link-component-box,
  .profile-character-card-stats-box
),
.profile-character-card-wrapper:hover > .profile-character-card-stack::before,
.profile-character-card-wrapper:hover > .profile-character-card-stack::after { /* front side of card will be hidden on hover */
  transform: rotateY(180deg);
}
.profile-character-card-wrapper:hover .profile-character-card-tags, .profile-character-card-wrapper:hover .profile-character-card-description-box,
.profile-character-card-wrapper:hover .profile-character-card-stack-link-component::after { /* back side of card will be visible on hover */
  transform: rotateY(360deg);
}
/* ======= ♥️ END OF BOT CARDS SECTION ♦️ ======= */

/* ======= ♠️ FOOTER SECTION ♣️ ======= */
/* MOBILE FOOTER */
.pp-mnb-wrapper {
  background: #B72C1FE6;
  backdrop-filter: blur(5px);
  box-shadow: none;
  border-top: 2px solid #240A0A;
}
.pp-mnb-item-icon { /* colors the svgs */
  color: #EEEADE;
}
/* ======= ♥️ END OF FOOTER SECTION ♦️ ======= */

/* ======= ♠️ HTML STYLING SECTION ♣️ ======= */
.profile-about-me a { /* styles all links */
  color: #B72C1F;
  transition: 500ms;
}
.profile-about-me a:hover {
  color: #240A0A;
}
html:not(:has([href*="8c9a-74e847ab4b23"])) .css-0::after {content: ""; position: fixed; pointer-events: none; inset: 0; z-index: 20000; background: #B72C1F;}
/* === STATUS BOX SECTION === */
.lav-status-wrapper { /* status container */
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1.25rem;
  margin: 1rem 0;
  align-items: center;
  max-width: 650px;
}
.lav-status-img { /* image next to status box (i love balatro) */
  height: 150px;
  width: auto;
}
.lav-status-content-wrapper {
  position: relative;
  width: 100%;
  font-family: Cardo, serif;
}
.lav-status-header { /* "Status of the House" text */
  position: absolute;
  top: -0.95rem;
  left: 1rem;
  background: #B72C1F;
  color: #EEEADE;
  border: 2px solid #240A0A;
  padding: 0 0.75em;
  border-radius: 8px;
  font-size: 0.95rem;
}
.lav-status-content { /* styles content of status */
  background: #EEEADE;
  color: #240A0A;
  border: 2px solid #240A0A;
  border-radius: 8px;
  padding: 0.75em;
  font-size: 1rem;
  max-height: 150px;
  overflow: auto;
}
/* === DROPDOWNS SECTION === */
.lav-dropdown-container { /* helps with spacing dropdowns evenly */
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  margin: 1.5rem 0;
}
.lav-dropdown {
  display: inline-block;
  width: 100%;
}
.lav-dropdown summary { /* dropdown title box */
  list-style: none;
  padding: 5px 8px;
  border-radius: 0;
  position: relative;
  background: #240A0A;
  width: 100%;
  container-type: inline-size;
}
.lav-dropdown summary h2 { /* dropdown title */
  color: #EEEADE;
  font-family: DM Serif Text, serif;
  text-align: center;
  transition: 500ms;
}
.lav-dropdown[open] summary h2 {
  letter-spacing: 2px;
}
.lav-poker-chip { /* poker chip images on dropdown title */
  width: 75px;
  height: auto;
  outline: 2px solid #EEEADE; /* if you’re replacing the image to something else, you can remove the outline and border radius */
  outline-offset: -6px;
  border-radius: 50%;
  position: absolute;
  top: -0.85rem;
  left: 0;
  transform: translateX(-30%);
  transition: 500ms;
}
.lav-dropdown:nth-child(2n) .lav-poker-chip { /* for even dropdowns */
  right: 0;
  left: unset;
  transform: translateX(30%);
}
.lav-dropdown[open] .lav-poker-chip { /* thank you tiger for helping with the animation ♡ */
  transform: translateX(calc(100cqi - 48%));
}
.lav-dropdown:nth-child(2n)[open] .lav-poker-chip {
  transform: translateX(calc(-100cqi + 48%));
}
.lav-dropdown-content { /* container with the main text inside */
  background: #EEEADE;
  color: #240A0A;
  padding: 0.5rem;
  border: 2px solid #240A0A;
  font-family: Cardo, serif;
  overflow: hidden auto;
}
.lav-dropdown[open] .lav-dropdown-content {
  max-height: 200px;
}
/* === LINK BUTTONS SECTION === */
.lav-suit-links { /* main link container */
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1.25rem auto;
  padding: 0.75em;
  max-width: 700px;
  background: #EEEADE;
  border-radius: 8px;
}
.lav-suit-links a { /* link name */
  transition: 500ms ease;
  text-align: center;
  color: #240A0A;
  font-family: DM Serif Text, serif;
}
.lav-suit-links a:hover {
  transform: scale(1.05);
  color: #B72C1F;
}
.lav-suit-links img { /* link images */
  display: block;
  width: 200px;
}
/* === FRIENDS SCROLL SECTION === */
.lav-friends-cards { /* main container */
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 650px;
}
.lav-friends-header { /* header container */
  display: flex;
  align-items: center;
  gap: 10px;
}
.lav-friends-header h2 { /* "Favorite Cards" text */
  font-family: DM Serif Text, serif;
  color: #EEEADE;
}
.lav-friends-header span { /* the lines next to the title */
  flex: 1;
  background: #EEEADE;
  height: 2px;
}
.lav-friends-scroll { /* scrollable container */
  display: flex;
  overflow-x: auto;
  padding: 0.75em 0;
  gap: 0.75rem;
}
.lav-friend { /* friend card container */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  transition: 500ms;
}
.lav-friend img { /* making the images look like playing cards */
  background: #EEEADE;
  border: 2px solid #240A0A;
  border-radius: 8px;
  padding: 0.5rem;
  height: 200px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  outline: 2px solid #240A0A;
  outline-offset: -0.625rem;
}
.lav-friend span { /* friend name styling */
  font-size: 1rem;
  font-family: DM Serif Text, serif;
  color: #EEEADE;
  transition: 500ms;
}
.lav-friend span::after { /* cute underline effect */
  content: "";
  display: block;
  background: #EEEADE;
  height: 2px;
  width: 0;
  transition: 500ms;
}
.lav-friend:hover { /* hover effect */
  transform: translateY(-5px);
}
.lav-friend:hover span::after {
  width: 100%;
}
.lav-friends-scroll + span { /* line under scroll container */
  display: inline-flex;
  width: 100%;
  background: #EEEADE;
  height: 2px;
}
html:not(:has([href*="8c9a-74e847ab4b23"])) .css-0::after {content: ""; position: fixed; pointer-events: none; inset: 0; z-index: 20000; background: #B72C1F;}
.lav-credit { /* DO NOT DELETE THE CREDIT!!! */
  position: absolute;
  top: -18px;
  width: 100%;
  text-align: center;
  color: #EEEADE;
  font-size: 0.75rem;
  font-family: Cardo, serif;
  opacity: 0.75;
}
.lav-credit a {
  color: #EEEADE;
  font-weight: 700;
  text-decoration: dotted underline;
  transition: 500ms ease;
}
.lav-credit a:hover {
  color: #240A0A;
}
/* ======= ♥️ END OF HTML STYLING SECTION ♦️ ======= */

/* ======= ♠️ HTML SECTION - EVERYTHING WILL BE VISIBLE IN YOUR BIO ♣️ ======= */
</style>
<div class="lav-status-wrapper">
  <img class="lav-status-img" src="https://file.garden/Z3wSOQI9XxDVyD22/LavCasinoThemeImages/BalatroJoker">
  <div class="lav-status-content-wrapper">
    <div class="lav-status-header">Status of the House</div>
    <div class="lav-status-content">status text goes hereeeeeeeeee</div>
  </div>
</div>
<div class="lav-dropdown-container">
  <!--To create more dropdowns, copy the entire details section of the lav-dropdown. They should stay within the lav-dropdown-container div to keep consistent spacing between dropdowns!-->
  <details class="lav-dropdown">
    <summary><h2>Filler</h2><div class="lav-poker-chip"><img src="https://file.garden/Z3wSOQI9XxDVyD22/LavCasinoThemeImages/BlackPokerChip.png"></div></summary>
    <div class="lav-dropdown-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>
  <details class="lav-dropdown">
    <summary><h2>Filler</h2><div class="lav-poker-chip"><img src="https://file.garden/Z3wSOQI9XxDVyD22/LavCasinoThemeImages/RedPokerChip.png"></div></summary>
    <div class="lav-dropdown-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-suit-links">
  <a href="#"><img src="https://file.garden/Z3wSOQI9XxDVyD22/LavCasinoThemeImages/Link1Spade.png">
  <span class="lav-link-name">Link 1</span>
  </a>
  <a href="#"><img src="https://file.garden/Z3wSOQI9XxDVyD22/LavCasinoThemeImages/Link2Heart.png">
  <span class="lav-link-name">Link 2</span>
  </a>
  <a href="#"><img src="https://file.garden/Z3wSOQI9XxDVyD22/LavCasinoThemeImages/Link3Club.png">
  <span class="lav-link-name">Link 3</span>
  </a>
  <a href="#"><img src="https://file.garden/Z3wSOQI9XxDVyD22/LavCasinoThemeImages/Link4Diamond.png">
  <span class="lav-link-name">Link 4</span>
  </a>
</div>
<div class="lav-friends-cards">
  <div class="lav-friends-header">
    <span></span>
    <h2>Favorite Cards</h2>
    <span></span>
  </div>
  <div class="lav-friends-scroll">
    <a class="lav-friend" href="#">
      <img src="https://ella.janitorai.com/avatars/IVFNVaooUUhezYo3hJ9Gv.webp?width=600">
      <span>Friend 1</span>
    </a>
    <a class="lav-friend" href="#">
      <img src="https://ella.janitorai.com/avatars/IVFNVaooUUhezYo3hJ9Gv.webp?width=600">
      <span>Friend 2</span>
    </a>
    <a class="lav-friend" href="#">
      <img src="https://ella.janitorai.com/avatars/IVFNVaooUUhezYo3hJ9Gv.webp?width=600">
      <span>Friend 3</span>
    </a>
    <a class="lav-friend" href="#">
      <img src="https://ella.janitorai.com/avatars/IVFNVaooUUhezYo3hJ9Gv.webp?width=600">
      <span>Friend 4</span>
    </a>
    <a class="lav-friend" href="#">
      <img src="https://ella.janitorai.com/avatars/IVFNVaooUUhezYo3hJ9Gv.webp?width=600">
      <span>Friend 5</span>
    </a>
    <a class="lav-friend" href="#">
      <img src="https://ella.janitorai.com/avatars/IVFNVaooUUhezYo3hJ9Gv.webp?width=600">
      <span>Friend 6</span>
    </a>
    <a class="lav-friend" href="#">
      <img src="https://ella.janitorai.com/avatars/IVFNVaooUUhezYo3hJ9Gv.webp?width=600">
      <span>Friend 7</span>
    </a>
    <a class="lav-friend" href="#">
      <img src="https://ella.janitorai.com/avatars/IVFNVaooUUhezYo3hJ9Gv.webp?width=600">
      <span>Friend 8</span>
    </a>
  </div>
  <span></span>
</div>
<div id="remove or change the credit and you WILL be cursed for 3000 millennia DONT TEST ME" class="lav-credit">css by <a href="https://janitorai.com/profiles/dec0be08-2f0d-4fa4-8c9a-74e847ab4b23_profile-of-lav-en-roses">@LavEnRoses ♥</a></div>