<div class="radi-status-header">
  <h2>Status:</h2>
</div>
<div class="radi-status-content">
  <p>This where your status goes!!</p>
  </div>


<div class="radi-extra-links-container">
    <a href="#" class="radi-extra-link-box">Link 1</a>
    <a href="#" class="radi-extra-link-box">link 2</a>
    <a href="#" class="radi-extra-link-box">Link 3</a>
    <a href="#" class="radi-extra-link-box">link 4</a>
</div>

<div class="divider">
  <img src="https://i.imgur.com/zmbtIgM.png" alt="Divider">
</div>


<div class="about-box">
  <h1>About me</h1>
  <h2>About me &amp; contents of my page!</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <h3>What I do make</h3>
  <ul>
    <li>thing u make one</li>
    <li>thing u make two</li>
    <li>thing u make three (u can add more of these btw)</li>
  </ul>
  <div class="tags-section">
    <div class="tags">
      <span class="tag">Tags</span>
      <span class="tag">you</span>
      <span class="tag">make</span>
      <span class="tag">content</span>
      <span class="tag">for</span>
    </div>
      <h3>What I don't make</h3>
  <ul>
    <li>thing u dont make one</li>
    <li>thing u dont make two</li>
    <li>thing u dont make three (u can add more of these btw)</li>
  </ul>
  <div class="tags-section">
    <div class="tags">
      <span class="tag">Tags</span>
      <span class="tag">you</span>
      <span class="tag">dont</span>
      <span class="tag">make</span>
      <span class="tag">content</span>
      <span class="tag">for</span>
    </div>
  </div>
</div>
</div>





<div class="divider">
  <img src="https://i.imgur.com/zmbtIgM.png" alt="Divider">
</div>


<div class="Radi-Credit-box-dont-remove-or-ill-castrate-you">
  CSS done by <a href="https://janitorai.com/profiles/b6b9e08d-4999-4281-a5b0-281deaf64954_profile-of-miss-radiance">MissRadiance</a>
</div>

<style>
/*  🩸🤍 ------------ PAGE SECTION  ---------- 🤍🩸 */
.css-m8ywhg { /* Centering the latest, search and tags menus */
position: relative;
top: 1rem;
flex-direction: column;
align-content: center;
justify-content: center;
align-items: center;
flex: 1;
}
.css-zdpt2t {
margin: auto;
}
.css-mcoi9a {
margin: auto;
}

.pp-tabs-wrapper { 
  position: relative;
  top: 1.1rem; 
  padding: 0;
  height: 3rem;
  width: auto;
  margin: auto;
  justify-content: center;
  align-items: center;
  background: transparent;
  z-index: 0;
  border-bottom: none;
}
.pp-tabs-wrapper::before { 
  content: "";
  position: absolute;
  height: 100%;
  min-width: 100%;
  background: #220000;
  overflow: visible;
  outline: 4px solid #410101;
  outline-offset: -6px;
  border: 1px solid #730101;
}
.pp-tabs-button { 
  font-size: 0; 
  font-family: cinzel, serif;
  text-wrap: nowrap;
  font-weight: bolder;
  text-transform: unset;
}
.pp-tabs-button::after { 
  font-size: 2rem;
  content: " Be not afraid ";
  color: white;
  font-weight: 100;
}
.pp-tabs-indicator { 
  display: none;
}
.Btn2-purple { /* Styles the purple "Characters" button */
  background: transparent; 
  box-shadow: none; 
  border: none; 
  outline: none; 
}
.Btn2-purple:before { 
  background: transparent;
  transition: none;
}
.Btn2-purple p { 
  font-size: 0px;
}
.Btn2-purple p::after { /* purple charcters text */
  content: " damned souls ";
  font-size: 20px;
  font-family: cardo, serif;
  color: #730101;
}
.Btn2-purple:active p::after, 
.Btn2-purple:focus p::after { 
  text-shadow: none; 
}
.css-wd8hou { /* The actual number */
  font-family: cardo, serif;
  font-size: 20px;
  color: #730101;
  font-weight: bold;
}
@media (max-width: 768px) {/* media query stuff */
  .Btn2-purple p::after {
    font-size: 14px; 
  }

  .css-wd8hou {
    font-size: 14px; 
  }
}

.profile-character-search-input:is(:hover, :focus, :focus-visible) { /* styles outline on hover*/
  color: #730101;
  outline-color: #220000;
  border: 1px solid;
  box-shadow: none;
}
.pp-fl-search-input {/* search bar styling LALALLALALALALA */
  background:rgb(34, 0, 0, 0.8);
  border-radius: 0;
  border: 1px solid #220000;
}

.pp-fl-search-input { /* The search bar */
  font-family: Montserrat;
  color: white;
  caret-color: white;
  font-weight: 100;
}

/* === FILTER TAGS MENU SECTION === */
/* credits to @tigerdropped for the menu template this thing is ridiculous */
.pp-fl-filter-button {
  background-color: rgb(34, 0, 0, 0.5); 
  border: 1px solid rgb(34, 0, 0);
  border-radius: 0;
}
.pp-fl-filter-button svg { /* === SVG of the button === */
  color: #730101 !important;
}

#root ~ :has(> .profile-filter-modal-modal-overlay) [data-focus-lock-disabled] > * > * {  /* background of menu */
  background: #220000 !important;
  border: 2px solid #410101;
  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, serif;
  font-weight: 900;
  color: #ff6b6b;
}
.profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] > * > * > button { /* the close button */
  border-radius: 50%;
  color: #ff6b6b;
}
.profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] > * > * > button:is(:hover, :focus, :active) { /* pointer effects of close button */
  background: #730101;
}
*: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;
  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; 
}

[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: #410101;
  border: 2px solid #1E1E1E;
  outline: 1px solid #730101;
  outline-offset: 2px;
  color: #730101; /* 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"; 
  font-family: Montserrat, serif;
  font-size: 1rem;
  font-weight: 700;
}
[class*="_tagsContainer_"]:has([class*="_expanded"]) + [class*="_expandButton_"]::before {/* when expanded */
  content: "Hide Tags"; 
}
[class*="_expandButton_"]:is(:hover, :focus, :active) { 
  background: #DCDCDC;
}
/* MAIN TAG CONTAINER */
[class*="_tagsContainer_"] { 
  width: 100%;
  padding: 0.5rem;
  border: 2px solid #DCDCDC;
  border-radius: 0;
  transition: border-radius 500ms;
}
[class*="_gradientLeft_"] { /* the gradients when collapsed , avoid additional styling */
  background: linear-gradient(to left, transparent, #220000 50% 100%);
}
[class*="_gradientRight_"] { /* the right-side gradient when scrolling through tags */
  right: 0 !important;
  background: linear-gradient(to right, transparent, #220000 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;
  padding: 0;
  border-radius: 50%;
  background: #730101;
  border: 2px solid;
  color: white; /* 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) { 
  background: #220000;
}
/* TAGS */
[class*="_collapsedContainer_"] [class*="_tag_"] {  /* unselected tags */
  border: none;
  border-bottom: 1px solid;
  border-radius: 0;
  display: inline-block;
  text-align: center;
  color: #DCDCDC;
  font-family: cardo, serif;
  text-transform: lowercase;
  transition: 500ms;
}
[class*="_collapsedContainer_"] [class*="_tag_"]::first-letter { /* hides emojis */
  font-size: 0;
}
[class*="_collapsedContainer_"] [class*="_tagSelected_"] { /* selected tags */
  color: #730101;
  box-shadow: unset !important;
  text-shadow: unset !important;
}
[class*="_collapsedContainer_"] [class*="_tag_"]:not([class*="_tagSelected_"]):hover { /* hover effect on unselected tags */
  color: #730101;
}
[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: #730101;
}


:is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__control { 
  background: rgb(34, 0, 0, 0.8);
  border: none;
  border: 1px solid #220000 !important;
  border-radius: 0 !important;
}
:is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__single-value { 
  color: #730101;
  font-family: cardo, serif;
  font-weight: 400;
  font-size: 1.25rem;
}
:is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__indicator-separator { 
  display: none;
}
:is(.default, .dark, .transparent, .css-b62m3t-container) svg { 
  color: #730101;
  transition: 500ms;
}
:is(.default, .dark, .transparent, .css-b62m3t-container):has(.css-qr46ko) svg { 
  transform: rotateX(180deg);
}
:is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__menu { 
  width: max-content;
  text-align: center;
  background: #220000;
  border: 2px solid #220000;
  border-radius: 0;
}
.css-qr46ko { 
  padding: 0;
}
:is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__option { 
  color: #730101;
  font-family: cardo, serif;
  font-weight: 500;
  border-bottom: 2px solid #730101;
}
:is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__option:hover {
  background: #220000;
  transition: 500ms;
  color: white;
}
:is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__option--is-selected, :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__option--is-focused { 
  background: #410101;
  transition: 500ms;
  color: white;
}
.pp-cc-list-container + div { 
  justify-content: center;
}
:is(.pp-pg-prev-button, .pp-pg-next-button) svg { 
  color: white;
  opacity: 1;
}





/*  🩸🤍 ------------ HEADER SECTION  ---------- 🤍🩸 */
  .pp-top-bar {/* The actual header itself */
  background: #220000;
  box-shadow: none;
  border-bottom: 1px solid #730101;
}
  /* Menu styling */
.pp-top-bar-app-menu-list {
  background-color: #410101; /* fallback */
  background-image: linear-gradient(to bottom, #410101, #220000);
}

.pp-top-bar-app-menu-list-item {
  display: flex !important;
  align-items: center;
  gap: 0 !important;
  overflow: hidden;
  white-space: nowrap;
  color: #ff6b6b; /* This is the text color of the items before hover */
  border: 2px solid #730101;
}
.pp-top-bar-app-menu-list-item:hover {
  color: #DCDCDC;
}
/* Icon hidden state — skips the Plus item at the top */
.pp-top-bar-app-menu-list-item:not([class*="_plusItem_"]) svg,
.css-15hrz07 a:not([class*="_plusItem_"]) svg {
  flex: 0 0 auto;
  width: 0 !important;
  min-width: 0 !important;
  margin-right: 0;
  opacity: 0;
  color: #DCDCDC;
  transform: scale(0.5);
  transition:
    width 0.25s ease,
    margin-right 0.25s ease,
    opacity 0.2s ease,
    transform 0.25s ease;
}

/* Icon revealed on hover */
.pp-top-bar-app-menu-list-item:not([class*="_plusItem_"]):hover svg,
.css-15hrz07 a:not([class*="_plusItem_"]):hover svg {
  width: 1.1em !important;
  margin-right: 0.5em;
  opacity: 1;
  transform: scale(1);
}

.pp-top-bar-app-menu-list,
.css-15hrz07 {
  width: 14em;
  min-width: 14em;
  max-width: 14em;
  box-sizing: border-box;
}


.pp-top-bar-app-menu-list-item,
.css-15hrz07 a {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* === CREATE A CHARACTER BUTTON SECTION (ty lav) === */
.glow-on-hover, .glow-on-hover::before, .glow-on-hover::after { /* hides all background layers (the purple and gray backgrounds) */
  background: transparent;
}
.pp-top-bar-create-char { /* the text */
  font-size: 0;
}
.pp-top-bar-create-char::after { /* replacement text */
  font-size: 1.25rem;
  font-family: cardo, serif;
  content: "Creator's workbench";
  font-weight: 500;
  opacity: 1;
  position: relative;
  left: -5px;
  color: #ff6b6b;
  transition: 500ms;
}
.pp-top-bar-create-char:hover::after {
  color: #730101;
}

.pp-top-bar-logo-name, .pp-top-bar-logo-sub-name { /* Hides the JanitorAI text */
  font-size: 0;
  font-family: cinzel, serif;
}
.pp-top-bar-logo-name::after { /* the JanitorAI text replacement */
  font-size: 1.75rem;
  content: "The crimson forest";
  text-wrap: nowrap;
  color: #730101;
  transition: background-position 0ms;
  background: linear-gradient(
    120deg,
    #730101 0%,
    #730101 45%,
    #ff6b6b 50%,
    #730101 55%,
    #730101 100%
  );
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pp-top-bar-logo:hover .pp-top-bar-logo-name::after {
  background-position: 0% 0;
  transition: background-position 800ms ease;
}
.pp-top-bar-logo:hover {
  transform: scale(1.1);
  text-shadow: none;
}
.profile-top-bar-logo-box {  /*Centers the text */
  position: absolute;
  margin: auto;
  width: fit-content;
  left: 0;
  right: 0;
  bottom: 0;
  align-items: center;
}
.profile-top-bar-search-wrapper { /* Moves the search bar to the side */
  order: -1;
  max-width: 25rem;
  margin-left: 0;
}
/* Search bar styling, credits to @procrastination <3<3 */
.pp-top-bar-search {
  background: #410101;
  border: 1px solid #730101;
  border-radius: 1px;
  position: relative;
  overflow: hidden;
}

.pp-top-bar-search::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 107, 107, 0.15),
    transparent
  );
  pointer-events: none;
  transition: none;
}

.pp-top-bar-search:hover::before {
  left: 150%;
  transition: left 800ms ease;
}

.pp-top-bar-search:hover {
  box-shadow: none;
}

.profile-top-bar-search-box div:has(svg) { /* The magnifying glass svg */
  color: #730101;
  opacity: 1;
}
#search-input::placeholder { 
  opacity: 0;
}
#search-input { 
  position: absolute;
  width: calc(100% - 2.5rem) !important;
  padding-right: 2.5rem !important;
  font-family: cardo, serif !important;
  font-size: 1rem !important;
  color: #DCDCDC !important; /* The text color when you type */
  caret-color: #ff6b6b; /* Search bar text color default */
}
.pp-top-bar-search::after { 
  content: "Haunting the woods . . ."; /* Change this to whatever you'd like */
  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: cinzel, serif;
  font-size: 1rem;
  font-weight: 400;
  color: #ff6b6b;
  transition: opacity 200ms ease-in-out;
}
.pp-top-bar-search:focus-within::after,
.pp-top-bar-search:has(#search-input:not(:placeholder-shown))::after { 
  opacity: 0;
}
.pp-top-bar-search:focus-within #search-input,
#search-input:not(:placeholder-shown) { 
    opacity: 1;
}

/* The notifications BUTTON.... the calm before the storm of the actual fuckass menu */
[aria-label="Notifications"] svg { /* Bell color */
  color: #ff6b6b;
}

[aria-label="Notifications"]:hover svg {/* Changes the bell on HOVERRRRRRR */
  fill: #730101;
}
._notificationsButton_wpa9q_7:hover { /* This makes it so there's no bg on hover. If you want one just change it to whatever you want obvi. If you want an actual background on the button remove the :hover property and change it from transparent */
  background: transparent;
}

[class*="notificationsBadge_"] { /*This is the like- bubble around the notif count. I just think it's ugly so I hid it lmaoo */
  background: transparent;
  box-shadow: none;
  border: transparent;
}


/* The notifications menu, this took years off my life and gave me dementia but it is sexy and beautiful and I added arrows so slay */
/* THE MAIN CONTAINER BOX */
[class*="notificationsPopover_"] {
  background: #220000;/* main background colour */
  border: 2px solid #730101;/* outer border */
  border-radius: 0;/* 0 = sharp corners, raise for rounded */
  box-shadow: unset;/* removes JanitorAI's drop shadow */
}

/* JanitorAI draws a rounded shape on top of the box this squares the overlay too */
[class*="notificationsPopover_"]::before,
[class*="notificationsPopover_"]::after {
  border-radius: 0 !important;
}

/* this just keeps it from getting that weird overlay where like the top corners are rounded inside the main container */
[class*="notificationsPopover_"] [class*="userAvatar_"] {
  border-radius: 50% !important;
}

[class*="popoverHeader_"] {
  padding: 1rem 1.25rem;          /* space around the header contents */
  background: #150000;            /* darker than the box so it reads as a header */
  border-bottom: 2px solid #730101;
}

/* the word "Notifications" itself */
[class*="popoverTitle_"] {
  font-family: "Cinzel Decorative", Montserrat, serif;
  font-size: 1.6rem; /* how big the title is */
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;  /* space between letters */
  color: #FFFFFF; /* the letters themselves */
  /*outline around each letter cuz normal shadow would like sit on one side so gotta do allat to make it like- wrap around it. */
  text-shadow:
    -1px  0    0 #ff6b6b,
     1px  0    0 #ff6b6b,
     0   -1px  0 #ff6b6b,
     0    1px  0 #ff6b6b,
    -1px -1px  0 #ff6b6b,
     1px -1px  0 #ff6b6b,
    -1px  1px  0 #ff6b6b,
     1px  1px  0 #ff6b6b;
}


/* ============ NOTIF HEADER BUTTONS ========= */

/* the strip the three buttons sit in */
[class*="headerActions_"] {
  background: transparent !important;
  border: none !important;
  padding: 0;
  gap: 0.5rem; /* space between the buttons */
}

/* all three buttons, resting */
[class*="deleteAllButton_"],
[class*="markAllReadButton_"],
[class*="closeButton_"] {
  background: #730101;  /* button circle colour */
  color: #FFFFFF;   /* icon colour */
  border-radius: 50%;  /* 50% = circle, 0 = square */
  transition: color 500ms, background 500ms;   
}

/* all three buttons, hovered */
[class*="deleteAllButton_"]:hover,
[class*="markAllReadButton_"]:hover,
[class*="closeButton_"]:hover {
  background: #ff6b6b;
  color: #220000;
}

/* forces the icons to follow the button colour instead of their own */
[class*="deleteAllButton_"] svg,
[class*="markAllReadButton_"] svg,
[class*="closeButton_"] svg {
  color: inherit;
  fill: currentColor;
}


/* Scroll bar stuff */

[class*="notificationsList_"] {
  background: transparent;
  scrollbar-width: thin;                    /* firefox only */
  scrollbar-color: #ffb3b3 #150000;         /* firefox only: bar, then track */
}

[class*="notificationsList_"]::-webkit-scrollbar {
  width: 8px;  /* how thick the whole scrollbar is */
}

/* the draggable bar */
[class*="notificationsList_"]::-webkit-scrollbar-thumb {
  background: #ffb3b3;
  border-radius: 0;
}
[class*="notificationsList_"]::-webkit-scrollbar-thumb:hover {
  background: #ff6b6b;
}

/* the groove behind the bar */
[class*="notificationsList_"]::-webkit-scrollbar-track {
  background: #150000;
}

/* --- the little arrows at each */

[class*="notificationsList_"]::-webkit-scrollbar-button {
  display: block;
  height: 12px;                   /* how tall the arrow buttons are */
  background-color: #150000;      /* the square behind the arrow */
  background-repeat: no-repeat;
}

/* webkit shows two arrows at each end by default, which looks broken.
   this hides the duplicates so there's one arrow top and one bottom */
[class*="notificationsList_"]::-webkit-scrollbar-button:vertical:start:increment,
[class*="notificationsList_"]::-webkit-scrollbar-button:vertical:end:decrement,
[class*="notificationsList_"]::-webkit-scrollbar-button:horizontal {
  display: none;
}

/* UP arrow */
[class*="notificationsList_"]::-webkit-scrollbar-button:vertical:decrement {
  background-image:
    linear-gradient(to bottom right, transparent 49%, #ffb3b3 50%),
    linear-gradient(to bottom left,  transparent 49%, #ffb3b3 50%);
  background-size: 4px 5px, 4px 5px;        /* half-width, then height */
  background-position: 0 center, 4px center;
}

/* DOWN arrow */
[class*="notificationsList_"]::-webkit-scrollbar-button:vertical:increment {
  background-image:
    linear-gradient(to top right, transparent 49%, #ffb3b3 50%),
    linear-gradient(to top left,  transparent 49%, #ffb3b3 50%);
  background-size: 4px 5px, 4px 5px;
  background-position: 0 center, 4px center;
}

/* arrows on hover */
[class*="notificationsList_"]::-webkit-scrollbar-button:vertical:decrement:hover {
  background-image:
    linear-gradient(to bottom right, transparent 49%, #ff6b6b 50%),
    linear-gradient(to bottom left,  transparent 49%, #ff6b6b 50%);
}
[class*="notificationsList_"]::-webkit-scrollbar-button:vertical:increment:hover {
  background-image:
    linear-gradient(to top right, transparent 49%, #ff6b6b 50%),
    linear-gradient(to top left,  transparent 49%, #ff6b6b 50%);
}

[class*="notificationItem_"] {
  height: 125px;
  min-height: 125px;
  max-height: 125px;
  background: transparent;
  border-radius: 0;
  border-bottom: 2px solid #410101;   /* the line between notifications */
  width: 100%;
  overflow: hidden;/* clips anything taller than the row */
  padding: 0; /* must stay 0 or the image can't reach the edges */
  display: flex;
  align-items: stretch;
  gap: 0;
  position: relative; 
  transition: background 300ms;   /* how slowly the row fades on hover */
}

/* the row you're hovering over */
[class*="notificationItem_"]:hover {
  background: #410101;
}

[class*="notificationItem_"] > *:not([class*="unreadIndicator_"]) {
  background: transparent;
}

/* the vertical bar marking an unread notification */
[class*="unreadIndicator_"] {
  background: #ff6b6b;
  align-self: stretch; /* makes it run the full row height */
}

/* the column the image sits in */
[class*="avatarSection_"] {
  flex: 0 0 150px;  /* how WIDE the image column is */
  width: 150px; /* dont touch this */
  height: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* the frame that crops the image */
[class*="avatarContainer_"] {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  min-width: 0;
  overflow: hidden;/* this is what does the cropping */
}

/* the bot's picture */
[class*="characterAvatar_"] {
  position: absolute;
  top: 0;
  left: -25px;  /* CROPPING THE LEFT EDGE */
  width: calc(100% + 25px);
  height: 100%;
  object-fit: cover; /* fills the frame instead of squashing */
  object-position: 58% 42%;
  border-radius: 0;

  /* THE LOW TAPER FADE ON THE BOT IMAGE*/
  -webkit-mask-image: linear-gradient(to right, #000 52%, transparent 100%);
          mask-image: linear-gradient(to right, #000 52%, transparent 100%);

  /* hover zoom, see below */
  transform-origin: right center;
  transition: transform 600ms ease !important;   /* how slow the zoom is */
  will-change: transform;
}

/* HOVER ZOOM —  the image raise if u want it more dramatic but probably dont bc its dramatic enuff idk */
[class*="notificationItem_"]:hover [class*="characterAvatar_"] {
  transform: scale(1.12) !important;
}

/* the little profile picture, tucked in the bottom-left corner on comment notifs */
[class*="userAvatar_"] {
  position: absolute;
  left: 5px;
  bottom: 5px;
  width: 36px; /* size of the badge */
  height: 36px; /* keep the same as width to stay circular if u raise it this thang will be oval af. if u want a square see border-radius*/
  object-fit: cover;
  border: 2px solid #730101; /* ring around the badge */
  border-radius: 50%;
}


/* the block all the text sits in */
[class*="contentWrapper_"],
[class*="contentWrapperUnread_"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
  padding: 0.6rem 2.4rem 0.6rem 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  margin-left: -45px;/* Pulls the text leftwards so it sits on top of the faded part of the image, Raise for more room. */
  position: relative;
  z-index: 1;
}

/* THE NOTIFICATION TITLE (first line, e.g. "New comment on...") */
[class*="subject_"],
[class*="subjectUnread_"] {
  font-family: Cardo, Montserrat, serif;
  font-size: 1.12em; /* relative to the site's size, not fixed */
  color: #ff6b6b; 
  line-height: 1.3;

  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;     /* gap between text and the underline */
  text-decoration-color: #73010188;  /* last two digits = opacity higher number more visible or something*/

  background: unset;
  -webkit-text-fill-color: unset;
  overflow-wrap: anywhere; /* stops long words breaking the layout */

  /* clips the title to 2 lines. change the 2 to allow more or fewer. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* THE BODY TEXT (second line) */
[class*="notificationItem_"] [class*="body_"] {
  color: #DCDCDC;
  line-height: 1.35;
  overflow-wrap: anywhere;

  /* clips the message to 3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* THE DATE (third line) */
[class*="notificationItem_"] [class*="timestamp_"] {
  color: #ffb3b3;
  font-family: Montserrat, serif;
  opacity: 0.75;/* 1 = solid, lower = more faded */
}

/* BOT NAMES — */
[class*="highlightCharacter_"],
[class*="highlightCharacterBody_"] {
  color: #ffb3b3;
  font-family: Cardo, serif;
  font-size: 1.05em;
}

/* USERNAMES — dark pink */
[class*="highlightUsername_"] {
  color: #ff6b6b;
}

  /* Styling for the archive button, (The little trashcan that appears when u hover) */
.pp-top-bar-notifications-item-archive{
  box-shadow: none;
  border: 1px solid #220000;
}

.pp-top-bar-notifications-item-archive:hover{
background: #ff6b6b;
color: white; 
transform:unset;
box-shadow:none;/* Fuck this stupid thing Janitorai and their stupid box shadows jesus christ.*/
}


/* stops the little user badge growing on hover. as well as the stupoid ass shadow on hover*/
[class*="userAvatar_"],
[class*="userAvatar_"]:hover {
  transform: none !important;
  scale: none !important;
  transition: none !important;
    box-shadow: none !important;
  filter: none !important;
  outline: none !important;
}

/*  🩸🤍 ------------END OF HEADER SECTION  ---------- 🤍🩸 */


/*  🩸🤍 ------------ Profile Box  ---------- 🤍🩸 */
  .css-9qctsi { /* the edit profile buttons */
    z-index: 2;

  }
@media screen and (min-width: 62em) { /* switches the side the profile card appears on */
  .css-1wfbrwg {
    flex-direction: row-reverse;
  }
}
.pp-uc-followers-count {  /* Styling the followers count text */
  font-family: Cinzel;
  color: #ff6b6b;
  font-weight: 100;
  bottom: 0.9rem;
  position: relative;
}
.pp-uc-followers-count span:nth-of-type(2) {  /* Hides The "Followers" Text */
  font-size: 0;
}
.pp-uc-followers-count span:nth-of-type(2)::after { /* what the followers text is changed to */
  font-size: 1rem;
  content: "wanderers"; 
}

.pp-uc-background, .pp-uc-background > div:empty { /* profile card color */
  background: linear-gradient(to bottom, #220000, #410101, #220000) !important;
  Border: 1px solid #730101;
  border-radius: 1px;
}

.profile-badges { 
  background: rgb(34, 0, 0, 0.5);
  border: 2px solid #220000;
  border-radius: 16px;
}
.profile-badge {
  filter: brightness(0) saturate(100%) invert(7%) sepia(84%) saturate(5386%) hue-rotate(22deg) brightness(103%) contrast(120%);
}

.profile-info-hstack { /* sets pfp over user info */
  flex-direction: column;
  text-align: center;
  order: -1;
}
.profile-avatar-container {
  height: 400px;
  width: 100%;
  background: #730101;
  padding: 3px;
  position: relative;
}



.profile-avatar {
  height: 100%;
  width: 100%;
  object-position: 25% 15%;
  box-shadow: none;
  border-radius: 0;
  border: 4px solid #DCDCDC;
  outline: 1px solid #DCDCDC;
  outline-offset: -7px;
  position: relative; /* needed for pseudo-element */
}



.pp-uc-title {
  font-family: Cinzel Decorative, serif; 
}

.pp-uc-title::after {
  content: "pronouns / age / timezone"; /* THIS IS WHAT TO CHANGE FOR THE INFO BENEATH YOUR USERNAME (PRONOUNS AGE TIMEZONE ECT) */
  display: block;
  text-align: center;
  color: #ff6b6b;
  font-size: 14px;
  font-family: Cardo;
  margin-bottom: 5px;
}

.profile-about-me + div { /* follow button positioning */
  order: -1;
}

.profile-about-me + div > div { /* centering follow buttons */
  justify-content: center;
}
.pp-uc-follow-button, .pp-uc-options-menu { /* styling both the follow and more options buttons */
  background: #410101 !important;
  border-radius: 12px;
  border: 2px solid #730101;
  max-width: 15rem;
  width: 15rem;
  position: relative;
  overflow: hidden;
}
.profile-uc-follow-button::before { /* the black background on follow button */
  display: none;
}

.pp-uc-follow-button::after, .pp-uc-options-menu::after {/* THIS IS FOR THE ANIMATIONS ON HOVER */
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  transition: none;
}

.pp-uc-follow-button:hover::after, .pp-uc-options-menu:hover::after { /* MORE ANIMATIONS ON HOVER */
  animation: shimmer 0.7s ease forwards;
}

@keyframes shimmer {
  0%   { left: -100%; }
  100% { left: 150%; }
}


.pp-uc-follow-button span { /* this hides the original text */
  font-size: 0;
  width: auto;
}

.pp-uc-follow-button span::after { /* The replacement text for the follow button pre-follow */
  content: " Join us "; 
  font-size: 1rem;
  font-family: Cinzel;
  color: white;
}

.pp-uc-follow-button[data-following="true"] span::after {/*The text for after you follow */
  content: "Wandering with you"; 
}

.pp-uc-options-menu span:first-child {  /*This is the original follow text, keep this at 0 otherwise it'll break */
  font-size: 0;
}

.pp-uc-options-menu span:first-child::after {/*The options text, idk i just put more options bc I didn't know what else to put lololol change it to whatever u want */
  content: "More options";
  font-size: 1rem;
  color: white;
  font-family: Cinzel;
}
/*  🩸🤍 ------------ Profile Assets  ---------- 🤍🩸 */
/*  🤍 ----- Status Box  ----- 🤍 */
.radi-status-header {  /* Color of the box "Status: Is housed in" */
  background-color: #220000;
  padding: 1px 1rem;
  border-radius: 8px;
  max-width: 7rem;
  position: relative;
  bottom: 2rem;
  left: 1rem;
  z-index: 1;
  margin-top: 1rem; /* pushes everything down */
}

.radi-status-header h2 {  /* Styling the "status" text */
  margin: 0;
  color: #730101;
  font-size: 20px;
  font-family: cinzel, serif;
}

.radi-status-content {  /* The box the content is in */
  bottom: 3rem;
  position: relative;
  background-color: #730101;
  padding: 20px;
  box-shadow: 0 4px 1px #410101;
  border-radius: 16px;
  border: 3px solid #410101;
}

.radi-status-content p {  /* The text of the actual "status"  */
  color: #ff6b6b;
  line-height: 1.6;
  margin: 0;
  font-family: cardo;
}
/*  🤍 ----- End of Status Box  ----- 🤍 */
/*  🤍 ----- DIVIDERS  ----- 🤍 */
.divider {
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}

.divider img {
  max-width: 100%;
  max-height: 7rem;
  height: auto;
  filter: brightness(0) invert(1);
}
/*  🤍 ----- DIVIDERS  ----- 🤍 */

/*  🤍 ----- ABOUT ME SECTION  ----- 🤍 */
.about-box { /* Main container styling */
  background-color: #730101;
  border: 1px solid #ff6b6b;
  padding: 20px;
  border-radius: 8px;
  max-height: 280px;
  overflow-y: auto;
}

.about-box h1 { /* Main header styling */
  color: #DCDCDC;
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;
  font-family: cinzel decorative, serif;
  gap: 15px;
}

.about-box h1::after {
  content: "";
  flex: 1;
  height: 2px;
  background-color: #ff6b6b;
}

.about-box h2 { /* The stupid "About me and my content ahh styling" */
  color: #ff6b6b;
  font-size: 0.75rem;
  font-family: cardo;
  font-weight: normal;
  margin: 0 0 20px 0;
}

.about-box p { /* content color styling */
  color: white;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 30px 0;
  font-family: cardo;
}

.about-box h3 { /* Subheading styling */
  color: #ff6b6b;
  font-size: 1.25rem;
  font-family: cinzel;
  margin: 0 0 15px 0;
  display: flex;
  align-items: center;
  text-align: center;
  gap: 15px;
}

.about-box h3::before,
.about-box h3::after { /* The line color next to the "What I do and dont make" texts */
  content: "";
  flex: 1;
  height: 2px;
  background-color: #220000;
}

.about-box ul { /* the bullet point text colors */
  color: #220000;
  margin: 0 0 25px 0;
  padding-left: 20px;
}

.about-box ul li {
  margin-bottom: 8px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag { /* "Tags" styling*/
  background-color: #410101;
  border-radius: 15px;
  border: 2px solid #410101;
  color: #ff6b6b;
  font-size: 0.75rem;
  padding: 5px 12px;
  border-radius: 4px;
  margin-bottom: 1rem;
}

  scrollbar-width: thin;
  scrollbar-color: #f0f0f0;  /* thumb color | track color */
}

.about-box::-webkit-scrollbar-track {
  background: #f0f0f0;  /* track color */
  border-radius: 4px;
}

.about-box::-webkit-scrollbar-thumb {
  background: #ff6b6b;  /* thumb color  */
  border-radius: 4px;
}

.about-box::-webkit-scrollbar-thumb:hover {
  background: white;  /* color when hovering */
}


/*  🤍 ----- END OF ABOUT ME SECTION  ----- 🤍 */
.radi-extra-links {
    background: transparent;
    color: white;
    padding: 10px;
    font-family: cinzel;
    font-size: 25px;
    text-align: center;
    text-decoration: underline;
    text-decoration-color: white;
}
.radi-extra-links-container {
    margin-top: -30px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.radi-extra-link-box {
    background-color: #220000;
    border: 2px solid #410101;
    color: #ff6b6b;
    padding: 7px 12px;
    font-size: 14px;
    display: inline-block;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: Cardo, serif;
    text-decoration: none;
    max-width: 120px;
    width: 100%;
}
.radi-extra-link-box:hover {
    background-color: #730101;
    border-color: #730101;
    color: white;
    transform: translateY(-2px);
    text-decoration: none;
}
.radi-extra-link-box:hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.6),
        transparent
    );
    animation: shimmer 0.6s ease-in-out;
}
@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

    .radi-extra-links {
        font-size: 18px;
    }

.Radi-Credit-box-dont-remove-or-ill-castrate-you {
  background-color: transparent;
  padding: 20px;
  border-radius: 8px;
  font-size: 10px;
}

.Radi-Credit-box-dont-remove-or-ill-castrate-you a {
  color: white;
  font-size: 10px;
  text-decoration: none;

}

.Radi-Credit-box-dont-remove-or-ill-castrate-you a:hover {
  text-decoration: underline;
}
/*  🩸🤍 ------------ END OF PROFILE ASSETS  ---------- 🤍🩸 */

/*  🩸🤍 ------------ BOT CARDS  ---------- 🤍🩸 */

/* ===== LAYOUT ===== */
.pp-cc-list-container{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
.pp-cc-wrapper{
    flex: 0 1 350px;
    width: 350px;
    height: 350px;
    transition: all 300ms ease;
    border: 2px solid #220000;
    box-sizing: border-box;
    position: relative;
}
.css-1s5evre{
    background: transparent;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto 1fr auto;
    gap: 0px;
}
.css-1s5evre a{ display: contents; }

/* ===== COLORS ===== */

/* main botcard color */
.pp-cc-wrapper,.pp-cc-gradient-1,.pp-cc-gradient-2,.pp-cc-gradient-3,.pp-cc-wrapper>*:not(.css-1s5evre){
    background: #410101 !important;
}

/* bot name */
.pp-cc-name {
    font-family: cinzel decorative, serif;
    color: white;
    text-shadow: 0px 0px 6px #730101, 0px 0px 12px #730101;
    text-align: center;
    font-size: 16px;
    transition: color 300ms ease, text-shadow 300ms ease;
}

/* description */
.pp-cc-description,.pp-cc-description p {
    font-family: cardo, serif;
    color: #ff6b6b;
    transition: color 300ms ease;
}

/* star line */
.pp-cc-star-line{
    display: flex;
    grid-area: 3 / 2 / 4 / 3;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 175px;
    position: relative;
    border-top: 2px solid black;
    margin-top: -24px;
    transition: border-color 300ms ease;
}
.pp-cc-star-line::before,.pp-cc-star-line::after {
    content: '✦';
    position: absolute;
    font-size: 20px;
    transform: translateY(-20%);
    color: black;
    text-shadow: 0px 0px 4px black;
    transition: color 300ms ease, text-shadow 300ms ease;
}
.pp-cc-star-line::before { left: 25%; }.pp-cc-star-line::after { 
  right: 25%; 
  }
  .pp-cc-star {
    right: 28%;
    filter: brightness(0);
    transition: filter 300ms ease;
}

/* tags */
.pp-cc-tags-item {
    border: none;
    font-family: cardo, serif;
    color: #ff6b6b;
}
.pp-cc-tags-item:hover {
    border: none;
    color: #730101;
}

/* footer bars */
.css-1c9wmts, .css-10cv7r2 {
    background: #2a0000;
    transition: background 300ms ease;
}
.pp-cc-tokens-count,
.pp-cc-chats-count,
.pp-cc-chats svg {
    color: #ff6b6b;
    fill: #ff6b6b;
    transition: color 300ms ease, fill 300ms ease;
    font-size: 0.7rem;
    text-align: center;
    font-family: cardo, serif;
    font-weight: bold;
    text-shadow: none;
}

/* ===== HOVER ===== */

/* main botcard color */
.pp-cc-wrapper:hover {
    transform: translateY(-8px);
    box-shadow: 0 0 15px 5px #730101;
}
.pp-cc-wrapper:hover,.pp-cc-wrapper:hover .pp-cc-gradient-1,.pp-cc-wrapper:hover .pp-cc-gradient-2,.pp-cc-wrapper:hover .pp-cc-gradient-3,.pp-cc-wrapper:hover>*:not(.css-1s5evre){
    background: white !important;
}

/* Text that appears when u hover */
.pp-cc-wrapper::after {
    content: 'Free my spirit?';
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    text-align: center;
    font-family: cinzel, serif;
    font-size: 11px;
    color: white;
    opacity: 0;
    transition: opacity 300ms ease;
}
.pp-cc-wrapper:hover::after { opacity: 1; }

/* bot name */
.pp-cc-wrapper:hover .pp-cc-name {
    color: #730101;
    text-shadow: none;
}

/* description */
.pp-cc-wrapper:hover .css-199gcrh,.pp-cc-wrapper:hover .pp-cc-description,.pp-cc-wrapper:hover .pp-cc-description p {
    color: #730101;
}

/* star line */
.pp-cc-wrapper:hover .pp-cc-star-line { 
  border-top-color: #730101; 
}
.pp-cc-wrapper:hover .pp-cc-star-line::before,.pp-cc-wrapper:hover .pp-cc-star-line::after {
    color: #730101;
    text-shadow: 0px 0px 4px #730101;
}
.pp-cc-wrapper:hover .pp-cc-star {
    filter: brightness(0) saturate(100%) invert(15%) sepia(100%) saturate(1500%) hue-rotate(355deg) brightness(80%);
}

/* footer bars */
.pp-cc-wrapper:hover .css-1c9wmts,.pp-cc-wrapper:hover .css-10cv7r2 {
  background: #e0e0e0; 
}
.pp-cc-wrapper:hover .pp-cc-tokens-count,.pp-cc-wrapper:hover .pp-cc-chats-count,.pp-cc-wrapper:hover .pp-cc-chats svg {
    color: #730101;
    fill: #730101;
}

/* limitless tag */
.pp-cc-wrapper:hover .pp-tag-limitless::before,
.pp-cc-wrapper:hover .pp-tag-limitless::after {
    color: #730101;
    text-shadow: none;
}
.pp-cc-wrapper:hover .pp-tag-limitless::before { opacity: 0; }
.pp-cc-wrapper:hover .pp-tag-limitless::after { opacity: 1; }

/* image outline */
.pp-cc-wrapper:hover .css-1q7rmf0::before { background: #730101; }

/* image gradient */
.pp-cc-wrapper:hover .css-1q7rmf0::after {
    background: linear-gradient(to top, white, transparent);
}

/* ===== BOT IMAGE ===== */
.css-1q7rmf0 {
    grid-area: 1 / 1 / 6 / 2;
    margin: 0;
    border-radius: 0;
    overflow: visible;
    position: relative;
    z-index: 1;
}
.pp-cc-avatar {
    border-radius: 0;
    clip-path: path('M 87.5 0 C 67 14 0 40 0 116 L 0 320 L 175 320 L 175 116 C 175 40 108 14 87.5 0 Z');
    width: 175px;
    height: 320px;
    object-fit: cover;
    position: relative;
    z-index: 2;
}
.css-1q7rmf0::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -3px;
    width: 179px;
    height: 326px;
    background: white;
    clip-path: path('M 89.5 0 Q -8 55 -2 118 L -2 326 L 179 326 L 179 118 Q 187 55 89.5 0 Z');
    z-index: 1;
    transition: background 300ms ease;
}
.css-1q7rmf0::after {
    content: '';
    position: absolute;
    bottom: 25px;
    left: 0;
    width: 175px;
    height: 150px;
    background: linear-gradient(to top, #410101, transparent);
    z-index: 3;
    transition: background 300ms ease;
}

/* ===== BOT NAME ===== */
.css-nlxhw4 {
    grid-area: 1 / 2 / 2 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 175px;
    z-index: 2;
    padding: 4px 6px;
}

/* ===== DESCRIPTION ===== */
.css-199gcrh{
    grid-area: 2 / 2 / 3 / 3;
    margin: 0;
    max-height: 100px;
    height: 100%;
    overflow: hidden;
    padding-top: 6px;
}

/* ===== TAGS ===== */
.pp-cc-tags{
    grid-area: 4 / 2 / 5 / 3;
    margin-bottom: 0;
    padding-bottom: 0;
    max-height: 120px;
    height: 100%;
    overflow: hidden auto;
}
.css-k1urot{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
}
.pp-cc-tags-wrap{ 
  max-width: 100%; box-sizing: border-box; 
}
.css-k1urot span{
    display: block;
    width: 100%;
    max-width: 75px;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 auto;
}
.pp-cc-tags-regular::first-letter { /* thank u tigerdropped */
  font-size: 0; 
}
.pp-tag-deaddove { 
  font-size: 0; 
}
.pp-tag-deaddove::after {
    content: "Dead Dove";
    font-size: 0.75rem;
}

/* ===== LIMITLESS TAG ===== */
.pp-cc-tags-wrap:has(.pp-tag-limitless) { 
  grid-column: 1 / 3; width: 100%; 
}

.pp-tag-limitless {
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    background: transparent;
    border: transparent;
    font-size: 0;
    position: relative;
}
.pp-cc-tags-wrap:has(.pp-tag-limitless) span {
    max-width: 100%;
    overflow: visible;
    white-space: normal;
}
.pp-tag-limitless::before {
    content: 'Haunted Soul';
    font-size: 16px;
    font-family: cinzel, serif;
    position: absolute;
    left: 0;
    right: 0;
    opacity: 1;
    transition: opacity 400ms ease, color 300ms ease, text-shadow 300ms ease;
    color: white;
    text-shadow: 0px 0px 6px #730101, 0px 0px 12px #730101;
}
.pp-tag-limitless::after {
    content: '18+ Only';
    font-size: 16px;
    font-family: cinzel, serif;
    position: absolute;
    left: 0;
    right: 0;
    opacity: 0;
    transition: opacity 400ms ease, color 300ms ease, text-shadow 300ms ease;
    color: white;
    text-shadow: 0px 0px 6px #730101, 0px 0px 12px #730101;
}

/* ===== FOOTER BARS ===== */
.css-1c9wmts {
    grid-area: 5 / 2 / 6 / 3;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    left: unset;
    right: unset;
    padding: 4px 0;
    box-sizing: border-box;
}
.css-10cv7r2 {
    grid-area: 5 / 1 / 6 / 2;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    top: unset;
    bottom: unset;
    left: unset;
    right: unset;
    padding: 4px 0;
    box-sizing: border-box;
}
.pp-cc-ribbon {
    filter: none;
    position: relative;
    inset: auto;
}
.pp-cc-ribbon-wrap {
    clip-path: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

/* =====Misc ===== */
/* TOOLTIPS */
.css-jdhqy4>div {/* ===== Tooltips ===== */
  color: white;
  max-height: 20rem;
  overflow: hidden;
  font-family: cardo;
  font-weight: 100;
  border: 1px solid white;
  border-radius: 1px;
  background: #730101;
}

.chakra-tooltip__arrow {
  background-color: transparent !important
}

/* ===== HIDDEN ELEMENTS ===== */
.pp-cc-creator-name,.css-1wqmh16,.css-nip9dx img,.css-xrg4vd img,.css-1awld45,.css-1cui3us,.css-5v5qgx img,.css-itvw0n,.css-1henxb,.css-8828od svg {
    display: none;
}
/*  🩸🤍 ------------ BOT CARDS  ---------- 🤍🩸 */

/*  🩸🤍 ------------ HIDDEN ELEMENTS  ---------- 🤍🩸 */

.pp-uc-member-since { /* Join date */
display: none;
}
.pp-uc-background { /* so the dropdowns wont change the stupid profile card width lolw */
  width: 36rem;
}
._btnPrimary_1fl1d_80 { /* no purple button */
  display: none;
}

  .css-0 { /* the root of evil */
  display: contents;
}

.pp-uc-background:hover { /* No box shadow on hover for the profile card */
  box-shadow: none;
}
/*  🩸🤍 ------------ Mobile header and footer  ---------- 🤍🩸 */
 .css-1qf4tpw {
  background: #410101;
  box-shadow: none;
  border: 2px solid #730101;
}
.pp-mnb-item-icon { /* colors the svgs */
  color: white;
}
.pp-top-bar-title { /* "Profile of…"" text */
  font-size: 0;
  font-family: cinzel, serif;
}
.pp-top-bar-title::after { /* replacement text */
  font-size: 1rem;
  content: "The crimson Forest";
  color: white;
}
</style>