Sebastian Sallow

Note: The base for this isn't mine! I did tweek it and add new things to it. Here is the link to the base of it I used.

Link: https://janitorai.com/characters/2e3e3206-787c-4779-816d-20a48d078f5c_character-coffee-shop-free-css-theme

<style>
.css-1wfbrwg div:first-child:hover{
  box-shadow: none!important;
}
</style>

<style>
.css-1uodvt1 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 15px !important;
    text-align: center !important;
}

.css-18bnokj {
    order: 1 !important;
}

.css-o5an2m,
.css-hjkukh {
    order: 2 !important;
}

.css-1x04uxb {
    order: 3 !important;
}

.css-18bnokj {
    width: 300px !important;
    height: 300px !important;
    border: 5px solid #10b981 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    padding: 5px !important;
    background-color: #0b130e !important;
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.8), 0 0 12px rgba(217, 119, 6, 0.7) !important;
}
</style>

<style>
.profile-title-heading {
    color: #ffffff !important;
    text-shadow: 0 0 10px #10b981, 2px 2px 0px #0b130e !important;
    font-size: 1.6rem !important;
    text-align: center !important;

    background: #0b130e !important;
    padding: 12px 11px !important;
    border-radius: 19px !important;
    border: 2px solid #10b981 !important;
    display: inline-block !important;
    margin-top: 10px !important;
}
</style>

<style>
.profile-title-heading {
    font-family: 'Georgia', 'Trebuchet MS', serif !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
}
</style>

<style>
.css-1uodvt1 {
    padding-top: 0px;
    flex-direction: column;
    justify-items: center;
    text-align: center;
}
</style>

<style>
.profile-title-heading::after {
    content: " | 🐍📜⚡" !important;
    display: inline-block !important;
    font-size: 1.5rem !important;
    margin-left: 4px !important;
    vertical-align: middle !important;
}
</style>

<style>
.character-list-pagination-flex {
  align-items: center;
  flex-direction: column;
  gap: 12px;
}

.profile-badge-flex-outer {
  background: #0b130e;
  color: #10b981 !important;
  border: 2px solid #10b981 !important;
  border-radius: 6px;
  font-family: 'Georgia', serif;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.5);
  text-shadow: 0 0 6px rgba(217, 119, 6, 0.6);
}

.profile-character-search-input {
  background: #132219;
  color: #ffffff;
  caret-color: #10b981;
  font-family: 'Georgia', serif;
}

.profile-character-search-input,
.profile-character-search-input:is(:hover, :focus) {
  border: 2px solid #10b981;
  border-radius: 8px 0 0 8px;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.7);
}

.profile-character-search-input::placeholder {
  color: #10b981a0;
}

.profile-character-search-input ~ div svg {
  color: #10b981 !important;
  transform: scale(1.3);
}

.profile-filter-button {
  background: #132219 !important;
  border: 2px solid #10b981;
  border-radius: 6px;
}

.profile-filter-button svg {
  color: #10b981 !important;
}

#root ~ *:has(> .profile-filter-modal-modal-overlay)
[data-focus-lock-disabled] > * > * {
  background: #0b130e !important;
  border: 2px solid #10b981;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.7);
}

.profile-filter-modal-body-tags-flex-box-heading {
  text-align: center;
  font-family: 'Georgia', serif;
  color: #ffffff;
  letter-spacing: 1px;
}

[class*="_tagsContainer_"] {
  background: #0b130e;
  border: 2px solid #10b981;
}

[class*="_collapsedContainer_"] [class*="_tag_"] {
  border: 1px solid #10b981;
  background: #132219;
  color: #ffffff;
}

[class*="_collapsedContainer_"] [class*="_tag_"]:not([class*="_tagSelected_"]):hover {
  background: #10b981;
  color: #0b130e;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.8);
}

[class*="_collapsedContainer_"] [class*="_tagSelected_"] {
  background: #d97706;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(217, 119, 6, 0.8);
}

[class*="_navigationButton"] {
  background: #132219;
  border: 1px solid #10b981;
  color: #ffffff;
}

#root .react-select__control {
  background: #132219;
  border: 2px solid #10b981 !important;
}

#root .react-select__single-value {
  color: #ffffff;
  font-family: 'Georgia', serif;
}

#root .react-select__dropdown-indicator svg {
  color: #10b981;
}

.profile-pagination-prev-hstack svg {
  color: #10b981;
}

.profile-badge-flex-outer {
  height: 45px;
  background: #0b130e !important;
  color: #10b981 !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
  border: none !important;
  border-bottom: 3px solid #d97706 !important;
  border-radius: 0;
  font-family: 'Georgia', serif;
  letter-spacing: 1px;
  text-shadow: 0 0 6px rgba(217, 119, 6, 0.5);
}

.profile-badge-flex-outer,
.profile-badge-total-text::after {
  font-size: 1.0rem !important;
}

.profile-badge-total-text {
  font-size: 0 !important;
}

.profile-badge-total-text::after {
  content: "The Undercroft Stash 🐍";
  letter-spacing: 1px;
  color: #ffffff;
}

.profile-tabs-wrapper {
  visibility: hidden !important;
}
</style>

<style>
.torn-paper {
    background-color: #0b130e !important;
    color: #ffffff !important;
    padding: 30px !important;
    border-radius: 6px !important;
    font-family: 'Georgia', serif !important;
    position: relative !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6) !important;
    margin: -9px auto !important;
    max-width: 100% !important;
    border: 3px solid #10b981 !important;
}

.torn-paper h3 {
    text-transform: uppercase !important;
    border-bottom: 2px solid #d97706 !important;
    margin-bottom: 15px !important;
    padding-bottom: 5px !important;
    color: #10b981 !important;
}
</style>

<div class="torn-paper">
    <h3>Whatever It Takes 🐍</h3>
    <p>If the Dark Arts hold the key to breaking Anne's curse, then I'll turn every forbidden page in Hogwarts to find it. Ominis preaches caution, but caution won't save my sister. Meet me in the Undercroft—and keep this between us. 📜✨</p>
</div>

<style>
.torn-paper {
    position: relative !important;
}

.torn-paper::before {
    content: "🐍📜 ˚₊‧" !important;
    position: absolute !important;
    top: 5px !important;
    left: 5px !important;
    font-size: 1.2rem !important;
    z-index: 1 !important;
}

.torn-paper::after {
    content: "˙✧˖°⚡ SCRIPTORTIUM SECRETS! ༘ ⋆｡˚" !important;
    position: absolute !important;
    bottom: 5px !important;
    right: 5px !important;
    font-size: 1.2rem !important;
    z-index: 1 !important;
}
</style>

<div class="cafe-button-container">
    <a href="#" class="cafe-btn">Button</a>
    <a href="#" class="cafe-btn">Button</a>
    <a href="#" class="cafe-btn">Button</a>
</div>

<style>
.cafe-button-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 20px 0;
}

.cafe-btn {
    background: #0b130e !important;
    color: #10b981 !important;
    padding: 10px 25px !important;
    border: 2px solid #10b981 !important;
    border-radius: 25px !important;
    font-family: 'Georgia', serif !important;
    font-weight: bold !important;
    text-decoration: none !important;
    transition: 0.3s !important;
    box-shadow: 2px 4px 6px rgba(0,0,0,0.5) !important;
}

.cafe-btn:hover {
    background: #10b981 !important;
    color: #0b130e !important;
    border: 2px solid #d97706 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.9) !important;
    cursor: pointer;
}
</style>

<div class="wood-divider"></div>
<style>
.wood-divider {
  width: 80%;
  height: 12px;
  margin: 20px auto;
  border-radius: 6px;
  background: repeating-linear-gradient(
    -45deg,
    #0b130e,
    #0b130e 12px,
    #10b981 12px,
    #10b981 24px,
    #d97706 24px,
    #d97706 36px
  );
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.6);
}
</style>

<div class="cork-board">
    <h2 class="board-title">Undercroft Journal</h2>
    <div class="pinned-note">
        <p><strong>Relic Research</strong><br>Salazar Slytherin's lost spellbook holds answers. Uncle Solomon refuses to see reason, but I won't give up on Anne.</p>
    </div>
    <div class="pinned-note">
        <p><strong>Ominis & The Gaunts</strong><br>Keep Ominis calm. He worries about the Dark Magic, but as long as we control it, we control our own fate.</p>
    </div>
    <div class="pinned-note">
        <p><strong>Feldcroft Expedition</strong><br>Search the catacombs outside the village. The relic pieces must be assembled before it's too late.</p>
    </div>
</div>

<style>
.cork-board {
    background-color: #0b130e !important;
    border: 4px solid #10b981 !important;
    padding: 20px !important;
    margin: 20px auto !important;
    max-width: 500px !important;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.7) !important;
    border-radius: 12px !important;
}

.cork-board h2 {
    font-family: 'Georgia', serif !important;
    color: #10b981 !important;
    font-size: 2rem !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    text-align: center !important;
    text-shadow: 2px 2px #d97706 !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    background: transparent !important;
}

.pinned-note {
    background-color: #132219 !important;
    color: #ffffff !important;
    padding: 15px !important;
    margin: 10px 0 !important;
    border-radius: 8px !important;
    font-family: 'Georgia', serif !important;
    border-left: 5px solid #d97706 !important;
    position: relative !important;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.5) !important;
}

.pinned-note::before {
    content: "🐍" !important;
    position: absolute !important;
    top: -12px !important;
    right: 15px !important;
    font-size: 1rem !important;
}
</style>

<div class="status-indicator">
    <div class="status-dot"></div>
    <span class="status-text">UNDERCROFT LOCATION: SECRET 🐍</span>
</div>

<style>
.status-indicator {
    position: absolute !important;
    top: 300px !important;
    left: 60px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: rgba(11, 19, 14, 0.95) !important;
    padding: 6px 12px !important;
    border-radius: 15px !important;
    border: 1px solid #10b981 !important;
    z-index: 10 !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.8) !important;
}

.status-dot {
    width: 10px !important;
    height: 10px !important;
    background-color: #10b981 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 8px #10b981 !important;
}

.status-text {
    color: #ffffff !important;
    font-family: 'Georgia', serif !important;
    font-weight: bold !important;
    font-size: 0.8rem !important;
}

@media (max-width: 768px) {
    .status-indicator {
        top: 300px !important;
        left: 5px !important;
        padding: 3px 6px !important;
    }
    .status-text {
        font-size: 0.7rem !important;
    }
}
</style>

<div class="wood-divider"></div>

<style>
.profile-character-card-wrapper {
  margin-bottom: 0.5rem;
  transition: 500ms ease;
}
.profile-character-card-wrapper, .profile-character-card-wrapper > div:empty {
  background: transparent !important;
  box-shadow: none;
}
.profile-character-card-wrapper:hover {
  box-shadow: none;
  transform: translateY(-4px) scale(1.01);
}
.profile-character-card-stack {
  background: #0b130e;
  border: 2px solid #10b981;
  border-radius: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}
.profile-character-card-stack-link-component {
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: nowrap;
  justify-content: center;
}

.profile-character-card-name-box {
  color: #10b981;
  font-family: 'Georgia', serif;
  font-size: 1.1rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 1px 1px 2px #d97706;
  text-align: center;
}

.profile-character-card-stats-box {
  position: absolute;
  display: flex;
  top: -0.75rem;
  right: unset;
  align-content: center;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.profile-character-card-stats-box * {
  width: 100%;
}
.profile-character-card-ribbon {
  position: static;
  overflow: visible;
  filter: none;
}
.profile-character-card-ribbon-wrap {
  padding: 0;
  clip-path: polygon(25% 0, 75% 0, 70% 50%, 75% 100%, 25% 100%, 30% 50%);
  box-shadow: none;
  background: #d97706;
  overflow: visible;
  border-radius: 0;
  transition: all 500ms;
}
.profile-character-cards-chat-count-tbmessages {
  display: none;
}
.profile-character-card-chats-count::before {
  content: "| 🐍 ";
  font-weight: normal;
}
.profile-character-card-chats-count::after {
  content: " Spells |";
  font-weight: normal;
}
.profile-character-card-chats-count {
  text-align: center;
  color: #ffffff;
  font-family: 'Georgia', serif;
  font-weight: bold;
}

.profile-character-card-avatar-aspect-ratio {
  margin: 10px;
}
.profile-character-card-avatar-image {
  border-radius: 8px;
  border: 2px solid #10b981;
}

.profile-character-card-creator-name-link {
  display: none;
}

.profile-character-card-description-markdown-container * {
  font-family: 'Georgia', serif;
  color: #ffffff !important;
  text-align: center !important;
}

.profile-character-card-star-line {
  border-color: #10b981;
}
.profile-character-card-star {
  display: none;
}
.profile-character-card-star-line::after {
  content: "🐍📜";
  position: absolute;
  color: #10b981;
  font-size: 0.9rem;
  right: -25px;
  top: -15px;
}

.profile-character-card-tags ul {
  justify-content: center;
  padding-bottom: 10px;
}
.profile-character-card-tags-wrap:has(.profile-character-card-tag-limitless), .profile-character-card-tag-limitless {
  flex: 1 1 100%;
  width: 100%;
}
.profile-character-card-tags-wrap:has(.profile-character-card-tag-limitless) {
  padding-top: 2px;
  padding-bottom: 2px;
  background: rgba(16, 185, 129, 0.3);
  border-radius: 20px;
}
.profile-character-card-tag-limitless {
  border: none;
  font-size: 0;
  background: transparent;
}
.profile-character-card-tag-limitless::before, .profile-character-card-tag-limitless::after {
  font-size: 0.9rem;
  font-family: 'Georgia', serif;
  font-weight: bold;
  color: #10b981;
  text-align: center;
  position: absolute;
  transition: opacity 500ms ease;
}
.profile-character-card-tag-limitless::before {
  content: "⚡ Undercroft Dueling Practice";
}
.profile-character-card-tag-limitless::after {
  content: "🐍 CRUCIAL UNFORGIVABLE CURSE!";
  opacity: 0;
}
.profile-character-card-wrapper:hover .profile-character-card-tag-limitless::before {
  opacity: 0;
}
.profile-character-card-wrapper:hover .profile-character-card-tag-limitless::after {
  opacity: 1;
  transition-delay: 250ms;
}
.profile-character-card-tags-wrap:not(:has(.profile-character-card-tag-limitless)) {
  border: 1px solid #10b981;
  border-radius: 15px;
}
.profile-character-card-tags-wrap a {
  display: flex;
}
.pp-cc-tags-regular {
  font-size: 0;
  display: inline;
  border: none !important;
}
.pp-cc-tags-regular::first-letter {
  font-size: 0.9rem;
}
.pp-cc-tags-item:hover:not(.profile-character-card-tag-limitless) {
  background: rgba(16, 185, 129, 0.3);
}
.pp-cc-tags-custom {
  border: none !important;
  color: #10b981;
  font-family: 'Georgia', serif;
  font-weight: 600;
}

.profile-character-card-tokens-count {
  color: #10b981;
  text-shadow: none;
  font-family: 'Georgia', serif;
  font-weight: 500;
}

.profile-character-card-box ~ div {
  display: none;
}
</style>

<div class="cafe-chalkboard-menu">
  <div class="chalkboard-frame">
    <div class="chalkboard-surface">
      <h3 class="chalk-title">Three Broomsticks & Undercroft Rations 🍺</h3>
      <ul class="chalk-items">
        <li>🍺 Foamy Warm Butterbeer Pitcher</li>
        <li>🥧 Hearty Feldcroft Meat Pie</li>
        <li>🧪 Wiggenweld Healing Draught</li>
        <li>🍏 Crisp Green Hogwarts Apples</li>
        <li>🍬 Fizzing Whizbees & Sugar Quills</li>
        <li>🍗 Roasted Pheasant & Herb Potatoes</li>
      </ul>
      <div class="chalk-footer">"Knowledge comes at a price, but coffee is on me."</div>
    </div>
  </div>
</div>

<style>
.css-p641ht {
    background-color: #0b130e !important;
    border-bottom: 4px solid #10b981 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6) !important;
}

.css-1qj3ulc {
    font-size: 0 !important;
    visibility: hidden !important;
    position: relative !important;
    display: inline-block !important;
}

.css-1qj3ulc::after {
    content: "Sallow.Sebastian 🐍" !important;
    visibility: visible !important;
    font-family: 'Georgia', serif !important;
    font-size: 1.6rem !important;
    font-weight: bold !important;
    color: #10b981 !important;
    letter-spacing: 2px !important;
    text-shadow: 2px 2px 0px #d97706 !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    white-space: nowrap !important;
}

.cafe-page-doll {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    z-index: 9999 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    pointer-events: auto !important;
    user-select: none !important;
}

.doll-graphic {
    font-size: 3rem !important;
    line-height: 1 !important;
    filter: drop-shadow(3px 3px 0px #0b130e) !important;
    animation: dollFloat 3s ease-in-out infinite !important;
}

.doll-steam {
    color: #10b981 !important;
    font-family: Arial, sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: bold !important;
    opacity: 0 !important;
    transform: translateY(10px) !important;
    animation: dollSteam 3s ease-in-out infinite !important;
}

.doll-shadow {
    width: 30px !important;
    height: 6px !important;
    background: rgba(16, 185, 129, 0.5) !important;
    border-radius: 50% !important;
    margin-top: 5px !important;
    animation: dollShadow 3s ease-in-out infinite !important;
}

@keyframes dollFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@keyframes dollShadow {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(0.7); opacity: 0.2; }
}

@keyframes dollSteam {
    0% { transform: translateY(5px) scale(0.8); opacity: 0; }
    50% { opacity: 0.8; }
    100% { transform: translateY(-15px) scale(1.2); opacity: 0; }
}

.cafe-chalkboard-menu {
    margin: 25px auto !important;
    max-width: 480px !important;
    width: 300% !important;
    box-sizing: border-box !important;
}

.chalkboard-frame {
    background: #0b130e !important;
    border: 4px solid #10b981 !important;
    border-radius: 8px !important;
    padding: 10px !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.5) !important;
}

.chalkboard-surface {
    background: #132219 !important;
    border: 1px dashed #10b981 !important;
    padding: 15px !important;
    text-align: center !important;
}

.chalk-title {
    color: #10b981 !important;
    font-family: 'Georgia', serif !important;
    font-size: 1.3rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-bottom: 1px solid rgba(217, 119, 6, 0.6) !important;
    padding-bottom: 8px !important;
    margin-bottom: 12px !important;
}

.chalk-items {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.chalk-items li {
    color: #ffffff !important;
    font-family: 'Georgia', serif !important;
    font-size: 0.95rem !important;
    margin: 8px 0 !important;
    text-align: left !important;
}

.chalk-footer {
    color: #d97706 !important;
    font-family: 'Georgia', serif !important;
    font-size: 0.85rem !important;
    font-style: italic !important;
    margin-top: 15px !important;
}

@media (max-width: 768px) {

    .css-1qj3ulc::after {
        font-size: 1.3rem !important;
    }

.cafe-page-doll {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    z-index: 9999 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    pointer-events: auto !important;
    user-select: none !important;
}

.doll-graphic {
    font-size: 3rem !important;
    line-height: 1 !important;
    filter: drop-shadow(3px 3px 0px #0b130e) !important;
    animation: dollFloat 3s ease-in-out infinite !important;
}

.doll-steam {
    color: #10b981 !important;
    font-family: Arial, sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: bold !important;
    opacity: 0 !important;
    transform: translateY(10px) !important;
    animation: dollSteam 3s ease-in-out infinite !important;
}

.doll-shadow {
    width: 30px !important;
    height: 6px !important;
    background: rgba(16, 185, 129, 0.5) !important;
    border-radius: 50% !important;
    margin-top: 5px !important;
    animation: dollShadow 3s ease-in-out infinite !important;
}

@keyframes dollFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@keyframes dollShadow {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(0.7); opacity: 0.2; }
}

@keyframes dollSteam {
    0% { transform: translateY(5px) scale(0.8); opacity: 0; }
    50% { opacity: 0.8; }
    100% { transform: translateY(-15px) scale(1.2); opacity: 0; }
}

.cafe-chalkboard-menu {
    margin: 25px auto !important;
    max-width: 480px !important;
    width: 300% !important;
    box-sizing: border-box !important;
}

.chalkboard-frame {
    background: #0b130e !important;
    border: 4px solid #10b981 !important;
    border-radius: 8px !important;
    padding: 10px !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.5) !important;
}

.chalkboard-surface {
    background: #132219 !important;
    border: 1px dashed #10b981 !important;
    padding: 15px !important;
    text-align: center !important;
}

.chalk-title {
    color: #10b981 !important;
    font-family: 'Georgia', serif !important;
    font-size: 1.3rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-bottom: 1px solid rgba(217, 119, 6, 0.6) !important;
    padding-bottom: 8px !important;
    margin-bottom: 12px !important;
}

.chalk-items {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.chalk-items li {
    color: #ffffff !important;
    font-family: 'Georgia', serif !important;
    font-size: 0.95rem !important;
    margin: 8px 0 !important;
    text-align: left !important;
}

.chalk-footer {
    color: #d97706 !important;
    font-family: 'Georgia', serif !important;
    font-size: 0.85rem !important;
    font-style: italic !important;
    margin-top: 15px !important;
}

@media (max-width: 768px) {

    .css-1qj3ulc::after {
        font-size: 1.3rem !important;
    }

    .cafe-page-doll {
        bottom: 15px !important;
        right: 15px !important;
        transform: scale(0.8) !important;
        opacity: 0.8 !important;
    }

    .cafe-chalkboard-menu {
        max-width: 90% !important;
        padding: 0 10px !important;
    }
}
</style>

<style>
.profile-top-bar {
  background: rgba(11, 19, 14, 0.95);
  backdrop-filter: blur(5px);
  box-shadow: none;
  border-bottom: 3px solid #10b981;
}
.profile-top-box-flex-inner, .profile-top-bar-logo-box {
    min-width: fit-content;
}

.profile-top-bar-logo-name:hover { text-shadow: none; }
.profile-top-bar-logo { background: transparent; }

.pp-uc-followers-count span + span { font-size:0; }

.pp-uc-followers-count span + span::after {
content: "Slytherin Allies";
font-size:1rem;
}

.sonner-toast-container [data-sonner-toast][data-type=success]{
background: #0b130e!important;
color: #10b981!important;
border: 2px solid #d97706!important;
}
</style>