<style>
/*🌸FOR ROSIE. Birthday gift*/
</style>

<style>
/*🌸pfp, username, followers and date joined aligning*/
    .profile-info-hstack{
    margin-top: 20px;
    flex-direction: column-reverse;
    text-align:center;
    gap: 30px;
    transition: all 0.5s ease
  }

/*custom username*/
.pp-uc-title::before {
  font-size: 5rem;
  font-family: Grenze Gotisch;
  color: #000;
  content: "Secret acc"
}
/*actual username hidden*/
.pp-uc-title {
  font-size: 0
}
/*Follower and member since*/
.pp-uc-followers-count, .pp-uc-member-since {
  font-size: 1rem;
  font-family: share tech;
  color: #000;
}
/*our pfp*/
.pp-uc-avatar{
  position: relative;
  width: 300px;
  height: 550px;
  border-radius: 150px 150px 0px 0px;
  outline: 1px solid #000;
  outline-offset: 15px;
  border: 1px solid #000;
  transition: all 0.5s ease-in-out
}
.pp-uc-avatar-container {
  position: relative;
}
.pp-uc-avatar-container::before {
  content: "✦︎";
  position: absolute;
  bottom: calc(50% - 120px);
  left: calc(50% - 176px);
  font-size: 25px;
  color: #000;
}
.pp-uc-avatar-container::after {
  content: "✦︎";
  position: absolute;
  top: calc(50% - 120px);
  right: calc(50% - 178px);
  font-size: 30px;
  color: #000;
}
/*user profile's main bg hidden*/
.pp-uc-background, .pp-uc-background > div {
  background: transparent !important;
  max-width: 100%
}
/*hide shadow*/
  .pp-uc-background:hover {
  box-shadow: none;
  }
</style>

<style>
/*🌸STATUS*/
.status-badge {
  position: relative;
  max-width: 280px;
  margin: 60px auto;
  padding: 20px 16px 16px;
  border: 2px solid #f7dae7;
  border-radius: 12px;
  transition: transform 0.3s ease, border-color 0.3s ease-in-out;
}

.status-badge:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px #f7dae7;
}

/*HEADING*/
.status-badge::before {
  content: "STATUS";
  position: absolute;
  top: -16px;
  left: 20px;
  padding: 2px 10px;
  font-size: 20px;
  font-family: Grenze Gotisch;
  font-weight: bold;
  border-radius: 6px;
  color: #111114;
  background: #fff;
  border: 2px solid #f7dae7;
  letter-spacing: 1px;
  transition: color 0.3s ease, background-color 0.3s ease;
}

/*STATUS DESCRIPTION*/
.status-text {
  font-family: jura;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  color: #000;
  transition: color 0.3s ease;
}
</style>
<div class="status-badge">
  <div class="status-text">
    yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap
  </div>
</div>

<style>
  /*🌸 DROPDOWN*/
  .shru-flex {
    display: flex;
    gap: 20px;
    justify-content: center;
    max-width: 100%;
    flex-wrap: wrap;
    overflow-x: auto;
    padding: 10px;
    box-sizing: border-box;
  }
  .shru-box {
    background: #fff;
    border: 2px solid #f7dae7;
    border-radius: 50px;
    color: #000;
    height: 250px;
    width: 50px;
    overflow: hidden;
    transition: all 0.4s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
  }
  .shru-box:hover {
    width: 200px;
    align-items: flex-start;
    padding: 10px;
  }
  .shru-heading {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-weight: bold;
    transition: all 0.4s ease;
    font-family: grenze gotisch;
    font-size: 1.5rem
  }
  .shru-box:hover .shru-heading {
    writing-mode: horizontal-tb;
    margin-bottom: 10px;
  }
  .shru-desc {
    opacity: 0;
    max-height: 0;
    overflow: auto;
    transition: opacity 0.5s ease, max-height 0.5s ease;
    font-size: 14px;
  }
  .shru-box:hover .shru-desc {
    opacity: 1;
    max-height: 150px;
    overflow: auto;
  }
/*IF U WANT TO ADD TEXT LINK*/
  .shru-desc a {
    color: #000;
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px dashed #000;
  }
</style>
<div class="shru-flex">
  <div class="shru-box">
    <div class="shru-heading">Box 1</div>
    <div class="shru-desc">
      yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap
    </div>
  </div>
  <div class="shru-box">
    <div class="shru-heading">Box 2</div>
    <div class="shru-desc">
      yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap
      yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap
    </div>
  </div>
  <div class="shru-box">
    <div class="shru-heading">Box 3</div>
    <div class="shru-desc">
      yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap
      yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap
      <a href="https://catbox.moe/">Read More</a>
    </div>
  </div>
</div>

<style>
/*🌸UR FRIENDS*/
  .friend-list {
  border: 2px solid #f7dae7;
  border-radius:15px;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
  position: relative;
  margin: 65px 0px;
}
/*HEADING*/
.friend-list::before {
  content: "my friends";
  position: absolute;
  left: 0;
  top: -70px;
  font-family: grenze gotisch;
  font-size: 3rem;
  font-weight: 600;
  color: #000;
}
.friends-scroll {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: 170px;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  height: 330px;
}
.friends-scroll::-webkit-scrollbar {
  display: none;
}

.friend-card {
  width: 160px;
  height: 150px;
  border-radius:15px;
  border: 1px solid #f7dae7;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}
.friend-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: all 0.5s ease-in-out
}
.friend-card:hover img {
  transform: scale(1.12);
}

.friend-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -40px;
  background: #0005;
  color: #fff;
  font-family: jura;
  text-align: center;
  padding: 6px 0;
  font-size: 15px;
  transition: bottom 0.4s ease;
}
.friend-card:hover .friend-name {
  bottom: 0;
}
</style>
<div class="friend-list">
  <div class="friends-scroll">
    <a class="friend-card" href="https://pin.it/7kCyUpytU">
      <img src="https://files.catbox.moe/wbi7h5.png" alt="friend">
      <div class="friend-name">Friend 1</div>
    </a>
    <a class="friend-card" href="https://pin.it/2d5ZwPTkb">
      <img src="https://files.catbox.moe/rkqf83.png" alt="friend">
      <div class="friend-name">Friend 2</div>
    </a>
    <a class="friend-card" href="https://catbox.moe/">
      <img src="https://files.catbox.moe/agu15d.png" alt="friend">
      <div class="friend-name">Friend 3</div>
    </a>
    <a class="friend-card" href="https://pin.it/7kCyUpytU">
      <img src="https://files.catbox.moe/wbi7h5.png" alt="friend">
      <div class="friend-name">Friend 4</div>
    </a>
    <a class="friend-card" href="https://pin.it/2d5ZwPTkb">
      <img src="https://files.catbox.moe/rkqf83.png" alt="friend">
      <div class="friend-name">Friend 5</div>
    </a>
    <a class="friend-card" href="https://catbox.moe/">
      <img src="https://files.catbox.moe/agu15d.png" alt="friend">
      <div class="friend-name">Friend 6</div>
    </a>
  </div>
</div>

<style>
/*Ur whatever links— DISCORD? KOFI? COMMISSION? OR FOR ANYTHING*/
.img-link-row{
  display:flex;
  justify-content:center;
  gap: 20px;
}
.img-link{
  position:relative;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.img-link img{
  width:120px;
  height:150px;
  object-fit:cover;
  border-radius:15px;
  transition:transform .4s ease;
}
.img-label{
  margin-top:10px;
  font-size: 1.2rem;
  font-weight:600;
  font-family: grenze gotisch;
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .3s ease, transform .3s ease, color .3s ease;
  color:#000;
}
.img-link:hover img{
  transform:scale(1.05);
}
.img-link:hover .img-label{
  opacity:1;
  transform:translateY(0);
}
</style>
<div class="img-link-row">
  <a class="img-link" href="https://catbox.moe/">
    <img src="https://files.catbox.moe/agu15d.png">
    <span class="img-label">First Link</span>
  </a>
  <a class="img-link" href="https://pin.it/2d5ZwPTkb">
    <img src="https://files.catbox.moe/rkqf83.png">
    <span class="img-label">Second Link</span>
  </a>
  <a class="img-link" href="https://pin.it/7kCyUpytU">
    <img src="https://files.catbox.moe/wbi7h5.png">
    <span class="img-label">Third Link</span>
  </a>
</div>

<style>
/*🌸FLOATING STICKER*/
  .sticker {
  position: fixed;
  bottom: 5px;
  left: 10px;
  z-index: 1000;
  width: 140px;
  height: 180px;
  animation: floaty 3s ease-in-out infinite;
  cursor: pointer;
}
.sticker img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
@keyframes floaty {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
.sticker::after {
  content: "mdni";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  background: #fff;
  color: #d3869d;
  border-radius: 20px;
  border: 2px solid #d3869d;
  font-size: 1rem;
  font-family: grenze gotisch;
  padding: 6px 18px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.sticker:hover::after {
  opacity: 1;
}
.sticker:active::after {
  opacity: 1;
}
</style>
<div class="sticker">
  <img src="https://files.catbox.moe/wbi7h5.png" alt="sticker">
</div>

<style>
/*🌸 JUST STRUCTURING TGE LAYOUT OF SEARCH, CHAR COUNT, TAG BOX, LATEST BOX*/
  .character-list-pagination-flex{
  flex-flow: row wrap;
  gap: 20px;
  justify-content: center;
  align-items: center;
}


.profile-filters-flex-inner, .profile-filters-flex-outer, .css-m8ywhg>div:nth-child(1){
  display: contents;
}


.profile-filters-flex-inner-hassearchfilter{
order: -2;
width: 100%
}
.profile-pagination-flex-outer{
  align-self: center;
  order: -1;
  position: sticky;
  top: 70px;
  z-index: 5
}
</style>

<style>
/*CHARACTERS SECTION*/
.pp-tabs-wrapper {
  width: 100%;
  height: 55px;
  background: transparent;
  justify-content: center;
  align-items: center;
  border-bottom: none;
  border-radius: 5px;
  margin-bottom: 50px;
}


.pp-tabs-button{
  font-size: 0;
  width: 100%
}


.pp-tabs-button::before{
  content: "Doll's Menu";
  font-family: grenze gotisch;
  font-size: 45px;
  color: #000
}

  .pp-tabs-indicator{
  display: none
  }
/*NO. OF CHARACTERS SECTION*/
  .pp-pg-total {
  background: #fff;
  border: #d3869d 2px solid;
  height: 40px;
  border-radius: 50px;
  }

.pp-pg-total:before{
  display: none;
}


.pp-pg-total-count , .pp-pg-total-text::after {
  color: #000;
  font-family: grenze gotisch;
  font-size: 1.25rem;
  text-shadow: none;
  font-weight: normal
  }



.pp-pg-total-text{
  font-size: 0;
}

.pp-pg-total-count::before {
  content: "Serving ";
}
.pp-pg-total-text::after{
  content: "Babies";
}

/* SECTION OF COUNTING PAGE i.e. < 1 > thingy*/
.pp-pg-prev-button svg, .pp-pg-next-button svg {
  color: #000;
}

.pp-pg-page-button{
  color: #000 ;
  border: #000 2px solid
}

.pp-pg-page-button{
  background: #fff
}
/*SEARCH SECTION*/
.pp-fl-search-input {
  font-family:  Grenze gotisch;
  color: #000;
  text-align: center;
  font-size: 1.25rem
}

  .pp-fl-search-input ~ div svg {
  color: #000 ! important;
  }

  .pp-fl-search-input,
.pp-fl-search-input:is(:hover, :focus) {
  box-shadow: none;
  border: 2px solid #d3869d;
  border-radius: 50px
}

  .pp-fl-search-input::placeholder {
  color: #000;
    text-align: center;
  }

 /*TAGS FILTER SECTION*/
  .pp-fl-filter-button {
    border: 2px solid #d3869d;
    border-radius: 50px
}


.pp-fl-filter-button svg {
    fill: #000;
}


.css-1dljitb {
  background: #fff !important;
}


._tag_1fwqk_6, ._tag_1fwqk_6:hover{
  border: 1px solid #000;
  font-family: grenze gotisch;
  background: pink;
  color: #000;
}

._tag_1fwqk_6:hover{
  background: #fff;
  box-shadow: none;
}


.css-dcyl1x{
  font-size: 3rem
}

.css-178jenf{
  font-size: 2rem
}


.css-dcyl1x, .css-178jenf {
  font-family: Alegreya Sans SC;
  color: #000;
  font-weight: 5;
  text-align: center;
  font-weight: bold;
}

._expandButton_1lgbq_153, ._expandButton_1lgbq_153:hover{
  background: #fff;
  border: #000 solid 1px
}
</style>

<style>
/*LATEST SECTION*/
.transparent .react-select__control {
  background: #fff;
  border-radius: 2px;
  height: 40px;
  width: 125px;
  border: 2px solid #d3869d;
  border-radius: 50px
}


.transparent .react-select__control:hover{
  border: 2px solid #000;
}


.css-1wy0on6 span{
  display: none
}


.transparent .react-select__value-container>div{
  color: #000;
  font-family: grenze gotisch;
  font-size: 1.25rem;
}



.css-8mmkcg{
  fill: #000
}


.transparent .react-select__menu{
  background: #fff;
  border: 2px solid #f7dae7
}


.react-select__option:nth-of-type(1), .react-select__option:nth-of-type(2), .react-select__option:nth-of-type(3), .react-select__option:nth-of-type(4) {
  color: #000;
  border: none;
  font-family: grenze gotisch;
  transition: letter-spacing .3s ease-in
}


.transparent .react-select__option--is-selected {
  background: #a55166;
  color: #fff
}


.transparent .react-select__option:hover{
  background: #a5516650;
  color: #000;
  letter-spacing: 1.2px
}

</style>

<style>
/*🌸HEADER*/
.pp-top-bar {
background: #fff;
    border: 2px solid #f7dae7;
    border-top: none;
  border-radius: 0px;
}

.pp-top-bar-back-button svg {
  display: none;
}
.pp-top-bar-back-button p {
  color: #d3869d;
  font-size: 0;
}

.pp-top-bar-back-button p::before{
  content: "❤︎ bye";
  font-size: 1rem;
}

.css-7f563p svg{
  fill: #d3869d
}


.pp-top-bar-title {
  font-size: 0;
  font-family: Grenze gotisch;
}

.pp-top-bar-title::after {
  font-size: 1.2rem;
  content: "Doll House";
  color: #d3869d;
  font-weight: bold;
}
</style>

<style>
 /*🌸FOOTER*/
  .pp-mnb-container {
    background: #fff;
    border: 2px solid #f7dae7;
    border-bottom: none;
    justify-content: flex-end;
    gap: 40px;
    padding: 8px 20px
}

.pp-mnb-container svg{
  fill: #d3869d;
}
</style>

<style>
/*PROFILE, CREATE A CHARACTER, MY CHARACTER, ETC THINGYS SECTION*/
.pp-top-bar-app-menu-list{
  background: #fff;
  border: 2px solid #f7dae7;
  justify-content: center;
}

.pp-top-bar-app-menu-list-item:hover {
  background: #f7dae7;
  border-radius: 5px;

}

.pp-top-bar-app-menu-list-item {
  color: #d3869d;
  font-family: grenze gotisch
}

.pp-top-bar-app-menu-list-item:hover{
  color: #000;
}
</style>

<style>
/*DESKTOP HEADER*/
.glow-logo h2, .glow-logo p{
  color: #000;
}

.pp-top-bar-search {
  background: #fff3;
  box-shadow: 0 0 5px #fff;
  border: 2px solid #f7dae7
}

.css-bar9lc div:has(svg) {
  color: #000;
  opacity: 1;
}

#search-input::placeholder, #search-input:hover {
  opacity: 1;
  color: #000;
  font-weight: bold;
  font-family: share tech;
}

.pp-top-bar-create-char {
  opacity: 1;
  color: #000;
  background: #fff;
  border: 2px solid #f7dae7
}

.pp-top-bar-search {
    color: #000;
}
</style>

<style>
/*BOT CARD*/
div:has(> .css-1s5evre),
div:has(~ .css-1s5evre) {
  background: transparent !important;
}
div:has(> div > .css-1s5evre) {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
/*main box*/
.pp-cc-wrapper {
  position: relative;
  height: 290px;
  width: 400px;
  overflow: hidden;
  border-radius: 0;
  transform: scale(0.9);
  transition: all 0.5s;
  display: flex;
  flex-direction: row;
}
.pp-cc-wrapper:hover {
  box-shadow: none;
  transform: scale(1)
}
.pp-cc-wrapper:nth-of-type(even) .css-1q7rmf0, .pp-cc-wrapper:nth-of-type(even) .pp-cc-name {
  right: 17px;
}
/*Bot img*/
.css-1q7rmf0 {
  position: absolute;
  top:0;
  border: 2px solid #d3869d;
  width: 200px;
  height: 290px;
  border-radius: 100px 100px 0 0;
}
.pp-cc-name {
  position: absolute;
  font-family: Grenze gotisch;
  color: #fff;
  -webkit-text-stroke: 0.5px #d3869d;
  text-shadow: 0 0 10px #000;
  text-align: center;
  width: 200px;
  z-index: 1;
  bottom: 0;
  font-size: 1.5rem
}
.pp-cc-ribbon-wrap {
  display: none;
}
.css-1c9wmts {
  display: none;
}
.pp-cc-star-line,
.pp-cc-star {
  display: none;
}
/*desc*/
.css-199gcrh p {
  color: #d3869d;
  text-align: center;
}
.css-199gcrh p:first-letter{
  font-size: 2rem;
  font-family: grenze gotisch
}
.pp-cc-description {
  position: absolute;
  width: 45%;
  bottom: 40px;
  right: 17px;
  height: 170px;
  overflow: auto;
  background: #fff;
  border-radius: 100px 100px 0 0;
  border: 2px solid #d3869d;
  padding: 45px 5px;
  border-bottom: none;
}
.pp-cc-wrapper:nth-of-type(even) .pp-cc-description, .pp-cc-wrapper:nth-of-type(even) .pp-cc-tags {
  left:0
}
.pp-cc-description::-webkit-scrollbar, pp-cc-tags::-webkit-scrollbar {
  display: none;
}
/*Tags*/
.pp-cc-tags * {
  display: inline-block;
  white-space: nowrap;
  }
.pp-cc-tags {
  position: absolute;
  width: 45%;
  height: 40px;
  bottom: -16px;
  right: 17px;
  overflow-x: auto;
  background: #fff;
  border: 2px solid #d3869d;
  border-top: none;
}
.pp-tag-limitless {
  background: transparent ;
  text-align: center;
}
.pp-cc-tags-item {
  display: inline-block;
  line-height: unset;
  background: #d3869d;
  border-radius: 10px;
  color: #fff;
  font-family: courgette;
  font-size: .7rem;
  transition: 500ms;
}
.pp-cc-tags-item:hover{
  border: none;
  background: #d3869d90;
  color: #000
}

.pp-cc-tags-regular::first-letter {
  font-size: 0;
}
.pp-cc-creator-name {
  display: none;
}
.pp-cc-avatar {
  border-radius: 0;
}
</style>

<style>
/*FOLLOW N OPTIONS SECTION*/
div:has(>.profile-uc-follow-flex){
  justify-content: center
}
.Btn {
  background: none;
  border: 1px solid #d3869d;
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.3s ease;

}
.Btn::before {
  content: '';
  background: #fff;
  transition: left 0.4s ease;
  pointer-events: none;
}
.Btn:hover {
  transform: scale(1.05);
}
.Btn > span {
  font-size: 0;
  font-family:  grenze gotisch;
}
.Btn span::after {
  content: "U in?";
  font-size: 1rem;
  color: #000;
}
.Btn[data-following=true] span::after {
  content: "Welcome!!";
  font-size: 1rem;
  color: #000;
  transition: 0.3s all ease;
}
.css-15w88gn {
  background: #fff;
  border: 1px solid #d3869d;
  border-radius: 20px;
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  color: #000
}
.css-15w88gn:hover, .css-15w88gn:active, .css-15w88gn[data-active] {
  transform: scale(1.03);
}

#menu-list-public-profile-block-menu{
    background: transparent;
    box-shadow: none;
    display: grid;
    gap: 10px
}

.pp-uc-options-menu-item {
  background: #fff;
  color: #000;
  border: 1px solid #d3869d;
  border-radius: 20px;
  height: 30px;
  font-family: share tech
}

.pp-uc-options-menu span {
  font-family: grenze gotisch;
  font-size: 1rem
}
</style>

<style>
/* 🌸 Watermark or credit*/
.credit {
    position: absolute;
    top: -27px;
    right: 10px;
    font-family: 'Courgette', cursive;
    font-size: 14px;
    color: #000;
    padding: 4px 8px;
    border-radius: 4px;
}
.credit a {
    color: #000;
    text-decoration: none;
}
.credit a:hover {
  text-decoration: underline;
  text-shadow: 0 0 15px #d3869d;
}
</style>
<div class="credit">
   css by <a href="https://janitorai.com/profiles/eff11c02-441d-4da4-9839-19800ae55be5_profile-of-fictional-fairy">@fictional_fairy</a>
</div>