Purple theme🪻💜

<style>
.cm-editor {
   height: 100px;
}
.css-m4ysq9 {
  transform: scale(0.7) !important;
  left: 7vh
}
</style>


<style>
/*🌸 I hope u know the basics to understand this cause I don't have time to explain it (it will be better for your own good. you won't be lost 🫠)*/

/*thanks puppy for collecting all class selectors like Pokemon 💗✌🏻*/

/*MY WATERMARK*/
  .credit {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff5;
    font: 12px "Share Tech", sans-serif;
    text-shadow: 0 0 15px #000;
    z-index: 2;
    transition: all 0.5s ease
}

.credit a {
    color: #600b9a90;
}

.credit:hover {
    letter-spacing: 1.2px
}
</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>

<style>
  .pp-uc-background, .pp-uc-background > div {
    background: transparent ! important;
}

  .pp-uc-background:hover{
  box-shadow: none
}

  .pp-page-background {
    background: #000 !important
  }

.profile-page-flex {
  flex-direction: column
}

  .pp-uc-avatar-container, .pp-uc-member-since{
    display: none;

  }

  .pp-uc-title {
  font: 2.25rem Notable;
  transform: rotate(180deg);
  color: #600b9a;
  text-shadow: -4px 4px 5px #600b9a70, -4px 4px 6px #600b9a70
}
  .pp-uc-title::before {
    content: "a.k.a. shru";
    display: block;
    font: 1rem cinzel;
}

   .profile-info-hstack {
     position: absolute;
     writing-mode: vertical-lr;
     text-align: center;
     display: flex;
     flex-direction: column;
 }


  .pp-uc-followers-count{
    font: 1rem cinzel;
    transform: rotate(180deg);
    margin: 0 -40px
  }

  .pp-uc-followers-count span:nth-of-type(2){
    font-size: 0;
  }

  .pp-uc-followers-count span:nth-of-type(2):after{
    content: "Sinners";
    font-size: 1rem
  }

  .profile-badge {
    filter:
    sepia(55%)
    saturate(75%)
    hue-rotate(300deg)
    brightness(93%)
    contrast(90%);
    margin: 10px 260px
  }
</style>


<div class="my-sona">

  <div class="slider">
    <img src="https://file.garden/ae9deQfELjoYT24s/retouch_2026042717450054.png" class="slide s1">
    <img src="https://file.garden/ae9deQfELjoYT24s/retouch_2026042717454084.png" class="slide s2">
    <img src="https://file.garden/ae9deQfELjoYT24s/retouch_2026042717461854.png" class="slide s3">
    <img src="https://file.garden/ae9deQfELjoYT24s/retouch_2026042717455598.png" class="slide s4">
  </div>

</div>

<style>
/*🌸 Sliding sona*/
.my-sona {
  width: 350px;
  margin: auto;
  overflow: visible;
}


.slider {
  position: relative;
  width: 100%;
  height: 700px;
  overflow: visible;
}



.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}




.s1 { animation: sonaLoop 20s infinite; }
.s2 { animation: sonaLoop 20s infinite 5s; }
.s3 { animation: sonaLoop 20s infinite 10s; }
.s4 { animation: sonaLoop 20s infinite 15s; }



@keyframes sonaLoop {


  0% {
    opacity: 0;
    transform: translateX(90px);
  }


  10% {
    opacity: 1;
    transform: translateX(25px);
  }


  20% {
    opacity: 1;
    transform: translateX(25px);
  }


  25% {
    opacity: 0;
    transform: translateX(60px);
  }


  100% {
    opacity: 0;
    transform: translateX(60px);
  }
}

</style>


<div class="am">
  <h2>Velvet Diary</h2>

  <div class="left-container">
    <div class="photo-card small top">
      <img src="https://files.catbox.moe/wzogw0.jpeg" alt="">
    </div>
    <div class="photo-card small bottom">
      <img src="https://files.catbox.moe/d6flp4.jpeg" alt="">
    </div>
  </div>

  <div class="right-container">
    <div class="description-box">
      <div class="desc-scroll">
        <p>
  yap all you want. it's about me section. scrollable thing
  <br><br>
          use br to write from new line
        </p>
      </div>
    </div>
  </div>

</div>

<style>
/*🌸 About Me(you)*/
.am {
  position: relative;
  display: flex;
  gap: 20px;
  max-width: 450px;
  margin: 100px auto;
  font-family: courgette;
  height: 400px;
}


.am h2 {
  position: absolute;
  top: -70px;
  left: 50%;
  transform: translateX(-50%);
  color: #600b9a;
  font-family: cinzel decorative;
  font-size: 1.7rem;
  white-space: nowrap
}


.left-container {
  position: relative;
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.photo-card {
  position: absolute;
  background: #600b9a;
  padding: 5px;
  box-shadow: 0 0 100px #600b9a;
  transform-origin: center;
  z-index: 1;
  transition: transform 0.75s;
}

.photo-card img {
  display: block;
  width: 100%;
  height: auto;
}

.photo-card.small {
  width: 130px;

}

.photo-card.top {
  top: 0;
  transform: rotate(-10deg);
}

.photo-card.bottom {
  bottom: 0;
  left: 5px;
  transform: rotate(15deg);
}

.photo-card.top:hover {
  transform: rotate(-10deg) scale(1.05);
}

.photo-card.bottom:hover {
  transform: rotate(15deg) scale(1.05);
}


.right-container {
  width: 50%;
}

.description-box {
  height: 390px;
  display: flex;
  flex-direction: column;
  color: #ffffff;
  overflow-y: auto;

}


.description-box::-webkit-scrollbar {
  display: none;
  }
</style>



<div class="f-list">

<div class="f-side">
<div class="f-head1">Pretty</div>
<div class="f-head2">poison</div>
</div>

<div class="f-wrap">

<div class="f-card">
<a href="https://janitorai.com/profiles/513927c4-3172-44fc-9a5f-c491d50929e5_profile-of-didireally">
<img src="https://files.catbox.moe/6pe8dm.png">
</a>
<div class="f-name">Ruri</div>
</div>

<div class="f-card">
<a href="https://janitorai.com/profiles/8afb6826-bbbc-4bb1-a21b-3711233c96d2_profile-of-florazul">
<img src="https://files.catbox.moe/l2j8r4.png">
</a>
<div class="f-name">Maru</div>
</div>

<div class="f-card">
<a href="#">
<img src="Mera-img.jpg">
</a>
<div class="f-name">In</div>
</div>

<div class="f-card">
<a href="#">
<img src="Mera-img.jpg">
</a>
<div class="f-name">kim</div>


</div>

</div>
</div>

<style>
/*🌸 F-list stands for friend list… or FAV LIST! (U didn't think something else, right?/silly)*/
.f-list{
position:relative;
display:flex;
align-items:flex-start;
gap:20px;
width:100%;
overflow:hidden;
}

.f-side{
min-width:130px;
padding-top:4px;
line-height:.9;
}

.f-head1{
font-size: 3rem;
font-family:Times New Roman;
font-weight:700;
color:#600b9a;
letter-spacing:-3px;
white-space: nowrap
}

.f-head2{
margin: 0px 10px;
font-size:25px;
font-family:cursive;
font-style:italic;
color:#600b9a;
letter-spacing:1px;
}


.f-wrap{
display:flex;
gap:14px;
overflow-x:auto;
overflow-y:hidden;
padding-bottom:5px;

}

.f-wrap::-webkit-scrollbar{
height:0;
}

.f-card{
flex:0 0 auto;
width:115px;
transition:.45s ease;
}

.f-card a{
display:block;
position:relative;
overflow:hidden;
text-decoration:none;
}

.f-card a:before{
content:"";
position:absolute;
inset:0;
border:1px solid #600b9a30;
z-index:2;
transition:.45s ease;
}

.f-card img{
width:100%;
height:140px;
object-fit:cover;
display:block;
transition:.45s ease;
transform:scale(1.05);
}


.f-card:hover img{
transform:scale(.99);
}

.f-card:hover a:before{
border-color:#600b9a;
}

.f-name{
margin-top:7px;
text-align:center;
font-size:20px;
font-family:Times New Roman;
color:#600b9a;
opacity:.55;
letter-spacing:.5px;
transition:.45s ease;
}

.f-card:hover .f-name{
opacity:1;
}
</style>



<div class="yap-corner">

<div class="yap-wrap">

<div class="yap-card">

<div class="yap-num">1</div>

<div class="yap-info">

<div class="yap-head">Cursed Creations</div>

<div class="yap-text">
<p>
  Here are my bots
  <br><br>

  I create characters for my own fulfillment —
  <b style="color:#600b9a;">to complete the stories in my head </b>exactly the way I want,
  and then I bring them to life here
  <br><br>

  Most of my bots are male (or honestly, I only create male characters for now). But who knows? that might change in the future. Because like I said, whatever pops into my head ends up here!

<br>
<i style="color:#600b9a;"> <b>Note :</b>  English is not my first language. Be mindful of it, my fairies</i>
</p>
</div>

</div>

</div>



<div class="yap-card">

<div class="yap-num">2</div>

<div class="yap-info">

<div class="yap-head">Fairy's Favourites</div>

<div class="yap-text">
<p>
  My my, here u are ~
<br><br>

  Here are my fragile lil obsessions gathered from shadows

 <br>

<span class="fairy-favs">

<a href="https://janitorai.com/profiles/90f584a9-085f-419d-9f69-6993d40847b3_profile-of-adeline-09">Adeline09</a>

<a href="https://janitorai.com/profiles/42a6cfed-1bf5-492b-aa85-a03f5458c394_profile-of-bluem">Bluem</a>

<a href="https://janitorai.com/profiles/02eba29a-ca87-4c19-994c-8a0b7d86ecde_profile-of-camicloud">Cami</a>

<a href="https://janitorai.com/profiles/1d05c6d9-486b-44a0-964e-f4f58ec018d0_profile-of-%F0%9D%93%92-%F0%9D%93%B8-%F0%9D%93%B5-%F0%9D%93%B0-%F0%9D%93%AA-%F0%9D%93%BD-%F0%9D%93%AE">Colgate</a>

<a href="https://janitorai.com/profiles/f5e2c992-2273-484a-b550-431ea77e8018_profile-of-dandayi">Dandayi</a>

<a href="https://janitorai.com/profiles/64562e35-d6de-4322-b11d-ccfabb0a7300_profile-of-dimension-otaku">Dimension Otaku</a>

<a href="https://janitorai.com/profiles/7a8e84a4-7f4a-476d-8115-c3bd7e6f2695_profile-of-effitoryy">Effitoryy</a>


<a href="https://janitorai.com/profiles/dbccf445-37ee-48da-b87e-e554a423d9e4_profile-of-henbane">Henbane</a>
</span>

<span style="font:17px Fascinate;">
And these are honestly worth trying
</span>
</p>
</div>

</div>

</div>



<div class="yap-card">

<div class="yap-num">3</div>

<div class="yap-info">

<div class="yap-head">Closing Note</div>

<div class="yap-text">
<p>
  First thing furst—

  1 . MDNI!

  2 . <b style="color: #600b9a"> Haters, Racists, Bullies </b>
— I manifest u all stay away from me. Shut the freak up before saying something that crosses the line.
<span style="color: #600b9a">Veryyy IMP: I don't hate anyone unless u give me a reason to</span>

3 . The inspo for my profile came from pinterest. this one:

<img src="https://files.catbox.moe/cx9907.jpg"> <br> I reshaped this into my imagination <br> <br>

&amp; i made it from my mobile.....
  <span style="font:20px Fascinate;">🧍🏻‍♀️🙂
  </span>

</p>
</div>

</div>

</div>

</div>



<div class="yap-image">
<a href="https://youtu.be/PkMKJEkE8Mo?si=KugDyzSOrdYvzXA3">
<img src="https://files.catbox.moe/hsb2h4.gif">
</a>
</div>

</div>

<style>
/*🌸 Boxes to write extra things (maybe ur rules, about ur bots, etc etc.)*/
.yap-corner{
position:relative;
display:flex;
align-items:flex-start;
gap:18px;
max-width:100%;
padding:10px 0;
overflow:hidden;
box-sizing:border-box;
}

.yap-wrap{
display:flex;
gap:16px;
width:100%;
overflow-x:auto;
overflow-y:hidden;
padding-bottom:6px;
}

.yap-wrap::-webkit-scrollbar{
height:4px;
}

.yap-wrap::-webkit-scrollbar-track{
background:#600b9a24;
}

.yap-wrap::-webkit-scrollbar-thumb{
background:#600b9a88;
}

.yap-card{
flex:0 0 auto;
width:280px;
height:165px;
display:flex;
align-items:flex-start;
gap:14px;
padding:14px;
background:#ffffff05;
border:1px solid #600b9a1f;
transition:.45s ease;
box-sizing:border-box;
overflow:hidden;
}

.yap-card:hover{
transform:scale(.985);
border-color:#600b9a55;
}

.yap-num{
font-size:52px;
font-family:Times New Roman;
font-style:italic;
line-height:1;
color:#600b9a;
}

.yap-info{
display:flex;
flex-direction:column;
gap:8px;
width:100%;
}

.yap-head{
font-size:18px;
font-family:Times New Roman;
letter-spacing:.5px;
color:#600b9a;
}

.yap-text{
height:95px;
overflow-y:auto;
padding-right:4px;
font:12px Crimson text;
line-height:1.7;
color:#ffffff;
}



.yap-text::-webkit-scrollbar{
width:3px;
}

.yap-text::-webkit-scrollbar-track{
background:#600b9a14;
}

.yap-text::-webkit-scrollbar-thumb{
background:#600b9a66;
}

.yap-image{
width:clamp(120px, 28vw, 350px);
height:165px;
flex:0 0 auto;
}

.yap-image a{
display:block;
width:100%;
height:100%;
overflow:hidden;
}

.yap-image img{
width:100%;
height:100%;
object-fit:cover;
display:block;

transition:.45s ease;
border:1px solid #600b9a26;
box-sizing:border-box;
}

.yap-image:hover img{
transform:scale(.97);
border-color:#600b9a;
}

.fairy-favs{
display: inline-flex;
flex-wrap:wrap;
gap: 5px
}

.fairy-favs a{
display:inline-flex;
align-items:center;
padding:5px 12px;
border-radius:999px;
background:#600b9a50;
border:1px solid #600b9a;
font-size:11px;
line-height:1.5;
color:#e7d7dc;
text-decoration:none;
transition:.35s ease;
max-width:100%;
}

.fairy-favs a:hover{
background:#600b9a1a;
border-color:#600b9a77;
transform:scale(.97);
}
</style>



<style>
  .pp-mnb-wrapper {
    width: 45px;
    border-radius: 50px;
    background: #600b9a50;
    outline: 1px solid #600b9a;
    outline-offset: 5px;
    margin: 10px 15px
  }

  .pp-mnb-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .pp-mnb-container svg , .css-7f563p svg{
    fill: #fff;

    opacity: 0.5;
    transition: all 0.45s ease
  }

  .pp-mnb-container svg:hover, .css-7f563p svg:hover{
    transform: scale(1.2);
    opacity: 1
  }

  .pp-mnb-container img{
    border-radius: 50%;
    outline: 1px solid #fff;
    outline-offset: 2px
  }
</style>







<div class="shru-status">

<details>

<summary class="shru-trigger">
<span>s</span>
</summary>

<div class="shru-panel">

<div class="shru-box">

<div class="shru-head">
Shru's status
</div>

<div class="shru-sub">
hmmmmm
</div>

<div class="shru-text">
Finally done with my css!
  <br> <br>

  ***

  <br>
writing!!
</div>

</div>
</div>

</details>

</div>

<style>

/*🌸 Status box*/
.shru-status{
position:fixed;
left: 12px;
bottom:250px;
z-index:101;
font-family:Times New Roman;
}


.shru-status details{
position:relative;
}


.shru-status summary{
list-style:none;
}

.shru-status summary::-webkit-details-marker{
display:none;
}


.shru-trigger{
width:55px;
height:55px;
outline:1px solid #600b9a;
outline-offset: 5px;
border-radius:100%;
display:flex;
align-items:center;
justify-content:center;
color: #fff;
font-size: 28px;
font-style: italic;
cursor:pointer;
background:#600b9a50;
transition:.45s ease;
overflow:hidden;
backdrop-filter:blur(10px);

}


.shru-trigger:hover{
transform:scale(.96);
}


.shru-status details[open] .shru-trigger{
border-radius:7px;
transform:rotate(45deg);
}


.shru-trigger span{
transition:.45s ease;
}

.shru-status details[open] .shru-trigger span{
transform:rotate(-45deg);
}


.shru-panel{
position:absolute;
left:90px;
top: 0px;

width:350px;
height:250px;

opacity:0;
transform:translateY(8px) scale(.96);

pointer-events:none;
overflow:hidden;

transition:
opacity .45s ease,
transform .45s ease;
}


.shru-status details[open] .shru-panel{
opacity:1;
transform:translateY(0) scale(1);
pointer-events:auto;
}


.shru-box{
width:300px;
padding:20px;
box-sizing:border-box;
overflow:hidden;
border:1px solid #600b9a30;
background:#600b9a50;
backdrop-filter:blur(10px);
}


.shru-head{
font-size:22px;
letter-spacing:.5px;
color: #600b9a;
margin-bottom:10px;
}


.shru-sub{
font-size:13px;
letter-spacing:2px;
text-transform:uppercase;
color:#600b9a;
margin-bottom:10px;
}


.shru-text{
height: 100px;
overflow-y:auto;
padding-right:4px;
font-size:12px;
line-height:1.7;
color:#fff;
}


.shru-text::-webkit-scrollbar{
width:3px;
}

.shru-text::-webkit-scrollbar-track{
background:#600b9a12;
}

.shru-text::-webkit-scrollbar-thumb{
background:#600b9a50;
}
</style>



<style>
  div:has(>.profile-uc-follow-flex) {
    flex-direction: column;
    align-content: center
  }

  .profile-uc-follow-flex {
    width: 100%;
  }

  .pp-uc-follow-button{
    position: relative;

    background: transparent;
    width: 100%;
  }
  .pp-uc-follow-button::before{
    content: "";
    position: absolute;
    background: #600b9a50;

    top: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    transition: all 0.5s ease;
}

.pp-uc-follow-button:hover::before{
    width: 00%;
}

  .profile-uc-follow-text{
    font: 1rem times new roman;
    color: #600b9a
  }

.pp-uc-options-menu{
    position: relative;
    background: transparent !important;
    width: 100%;
    font: 1rem Times New Roman;
    color: #600b9a;
    text-transform: uppercase;
    z-index: 1;
}

.pp-uc-options-menu::before{
    content: "";
    position: absolute;
    background: #600b9a50;
    border-radius: 10px;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    z-index: -1;
    transition: width 0.75s ease !important;
}

.pp-uc-options-menu:hover::before{
    width: 0%;
}

  .pp-uc-options-menu svg {
    display: none
  }

</style>

<style>
  .pp-top-bar{
    background: #600b9a50;
    width: fit-content;
    margin-left: auto;
    margin-right: 6px;
    margin-top: 7px;
    border-radius: 50px;
    outline: 1px solid #600b9a;
    outline-offset: 5px
  }

   .pp-top-bar-back-button , .pp-top-bar-title,.profile-top-bar-create-char, .profile-top-bar-logo-sub-name, .profile-top-box-search-input-spacer-bottom{
    display: none;
  }


  [class*="notificationsPopover_"] {
    background: #600b9a50;
    width: 300px;
    box-shadow: none;
    margin-left: auto;
    margin-right: 0px;
}


body:has([class*="notificationsPopover_"])::before {
    content: "";
    position: fixed;
    inset: 0;
    background: #00000080;
    backdrop-filter: blur(10px);
    pointer-events: auto;
    z-index: 100;
}

  [class*="notificationsPopover_"]::before {
    content: "";
    background: #600b9a50;
    backdrop-filter: blur(10px);
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
  }

  [class*="avatarSection_"] {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
  [class*="avatarContainer_"] ,
  [class*="notificationItem_"] img:nth-of-type(1) {
    position: absolute;
    width: 100%;
    inset: 0px;
    filter:
    sepia(55%)
    saturate(75%)
    hue-rotate(300deg)
    brightness(93%)
    contrast(90%);
}

  [class*="notificationItem_"] img:nth-of-type(1):hover {
    filter: grayscale ! important
  }

  [class*="contentWrapper_"] {
    background: none
  }

  [class*="popoverTitle_"]{
    display: none
  }

  [class*="deleteAllButton_"],
  [class*="markAllReadButton_"],
  [class*="closeButton_"] {
    border: none;
    outline: 1px solid #600b9a;
    outline-offset: 5px
  }

  [class*="deleteAllButton_"]:hover ,
  [class*="markAllReadButton_"]:hover,
  [class*="closeButton_"]:hover {
    box-shadow: none;
    background: none
  }

  [class*="headerActions_"] {
    gap: 37px;
  }


[class*="_subject_"],
[class*="_timestamp_"], [class*="_body_"]{
  color: #600b9a;
  text-shadow: 0px 0px  4px #000000
}



[class*="_body_"]{
  font-family: Crimson text;
  font-size: 0.85rem
}


[class*="_subject_"]{
  font-family: grenze gotisch;
  font-size: 1rem
}


[class*="_subjectUnread_"] {
background: unset;
-webkit-background-clip: unset;
-webkit-text-fill-color: unset;
background-clip: unset;
color: #600b9a;
}

[class*="notificationsBadge"] {
  background: #600b9a;
  border: 1px solid #600b9a;
  color: white;
  font-family:  share tech
}
</style>

<style>
.pp-top-bar-app-menu-list {
  background-color: #600b9a50;
  border: 1px solid #600b9a;
  backdrop-filter: blur(10px)
}


.pp-top-bar-app-menu-list-item:nth-of-type(1), .pp-top-bar-app-menu-list-item {
  color: #fff;
  opacity: .5;
  transition: all 0.45s ease;
  font-family: share tech
}

.pp-top-bar-app-menu-list-item:nth-of-type(1):hover, .pp-top-bar-app-menu-list-item:hover {
  color: #fff;
  opacity: 1;
  letter-spacing: 1.1px
}

</style>



<style>
/*🌸 Bot card*/
.pp-cc-list-container{
  display:flex;
  flex-wrap:nowrap;

  overflow-x:auto;
  overflow-y:hidden;

  gap:25px;
  padding:10px;
}

.pp-cc-list-container::-webkit-scrollbar-track{
background:#600b9a14;
}

.pp-cc-list-container::-webkit-scrollbar-thumb{
background:#600b9a66;
}

.pp-cc-list-container::-webkit-scrollbar{
height:4px;
}

.pp-cc-wrapper:hover {
  box-shadow: none
}

div:has(> .profile-character-card-stack),
div:has(~ .profile-character-card-stack){
  flex:0 0 370px;
  background:transparent !important;
  box-shadow: none;
}

.css-1henxb, .css-effh3d{
  display:none;
  box-shadow: none;
}

.profile-character-card-stack a{
  display:contents;
}



.profile-character-card-stack{
  width:100%;
  height:400px;

  display:grid;

  grid-template-columns:35px 170px 1fr;
  grid-template-rows:40px 1fr auto;

  grid-template-areas:
    "name pfp chats"
    "name pfp ."
    "name pfp desc"
    "name tags tags";

  gap: 8px;
  padding:8px;

  position:relative;
  overflow:hidden;

  border-radius:12px;
  background:transparent;
}



.profile-character-card-stack-link-component-box{
  grid-area:name;

  position:relative;

  writing-mode:vertical-rl;
  text-orientation:mixed;

  transform:rotate(180deg);

  display:flex;
  justify-content:center;
  align-items:center;

  width:35px;
  height:100%;
  border: 1px solid #600b9a;


  background:#600b9a50;
  border-radius:8px;



  overflow:hidden;
}



.pp-cc-name{
  transition:opacity .35s ease;
  color: #600b9a;
  font: 1rem cinzel decorative;

  display:flex;
  justify-content:center;
  align-items:center;

  width:100%;
  height:100%;
}



.profile-character-card-stack-link-component-box::after{
  content:"Non Series";
  color: #600b9a;
  font: 1rem cinzel decorative;

  position:absolute;
  inset:0;

  display:flex;
  justify-content:center;
  align-items:center;

  opacity:0;
  transition:opacity 0.4s ease;

  padding:4px;

  text-align:center;
}



.pp-cc-wrapper:has(.pp-tag-urbanhearts)
.profile-character-card-stack-link-component-box::after{
  content:"Urban Hearts";
}

.pp-cc-wrapper:has(.pp-tag-kanjanawatfamily)
.profile-character-card-stack-link-component-box::after{
  content:"Kanjanawat Family";
}

.pp-cc-wrapper:hover .profile-character-card-stack-link-component-box::after{
  opacity:1;
}

.pp-cc-wrapper:hover .pp-cc-name{
  opacity:0;
}



.profile-character-card-avatar-aspect-ratio{
  grid-area:pfp;

  width:170px;
  height:100%;
  border: 1px solid #600b9a;

  overflow:hidden;
  border-radius:10px;
}

.pp-cc-avatar{
  width:100%;
  height:100%;
  object-fit:cover;
  transition: all 0.5s ease;
  transform: scale(1.1);
}


.pp-cc-wrapper:hover .pp-cc-avatar{
  transform: scale(1)
}


.profile-character-card-stats-box{
  grid-area:chats;
  position: relative;
}

.pp-cc-ribbon-wrap {
  clip-path: unset;
  box-shadow: none;
  background: none;
}

.pp-cc-ribbon {
  position: absolute;
  left: -8px;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(to right, transparent, #600b9a, transparent) 1;
}

.pp-cc-chats {
  color: white;
  justify-content: center;
  align-items: center;
  font: 13px share tech
}

.pp-cc-chats:before {
  content: 'Chats:';
  color: #600b9a;
  font: 1rem cinzel decorative
}


.profile-character-card-description-box{
  grid-area:desc;

  height:170px;
  border: 1px solid #600b9a;

  overflow-y:auto;

  padding:10px;

  border-radius:10px;
  background:#600b9a50;

  backdrop-filter:blur(10px);
}

.profile-character-card-description-box::-webkit-scrollbar {
  display: none
}

.pp-cc-description p  {
  color: #600b9a;
  font: 12px share tech;
  text-align: center;
  line-height: 1.5;
}

  .pp-cc-description p::selection {
  background: transparent !important;
  }

.pp-cc-description p:first-letter{
  color: white;
  font: 1.5rem cinzel decorative
}



.pp-cc-tags{
  grid-area:tags;

  display:flex;
  border: 1px solid #600b9a;
  border-radius: 10px;

  max-height:60px;
  overflow-y: auto
}

.pp-cc-tags::-webkit-scrollbar {
  display: none;
}

.pp-cc-tags-item, .pp-tag-limitless {
  background: none;
  border: none;
  font: 13px share tech;
  color: white;
  transition: all 0.3s ease;

}

.pp-cc-tags-item:hover, .pp-tag-limitless:hover {
  border: none;
  background: none;
  color: pink;
  letter-spacing: 1px
}


.pp-cc-tags * {
  display: inline-block;
}


.profile-character-card-box,
.pp-cc-star-line,
.pp-cc-star,
.profile-character-card-creator-name-link, .pp-cc-chats svg{
  display:none !important;
}

</style>


<style>
/*🌸 Overall structure of our profile. It's grid tbh*/
html,
body{
  overflow-x: clip;
}



.my-sona,
.profile-info-hstack{
  grid-area: sona;
}



.profile-info-hstack{

  writing-mode: vertical-lr;

  display:flex;
  flex-direction:column;
  gap:10px;

  text-align:center;

  position:relative !important;

  align-self:start;
  justify-self:start;
}

.my-sona{
  min-width:0;
  max-width:100%;
}



@media screen and (min-width:769px){

  .pp-uc-background{
    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr);

    grid-template-areas:
      "sona follow"
      "sona am"
      "flist flist"
      "yap yap";

    gap:50px;

    align-items:start;

    max-width:1500px;
    margin:auto;
  }

  .profile-info-stack > div:last-child{
    grid-area:follow;

    justify-self:end;

    width:100%;
  }

  .am{
    grid-area:am;
  }

  .f-list{
    grid-area:flist;
  }

  .yap-corner{
    grid-area:yap;
  }

  .pp-uc-background > *{
    min-width:0;
  }

  .am,
  .f-list,
  .yap-corner{
    align-self:start;
  }
}



@media screen and (max-width:768px){

  .pp-uc-background{
    display:grid !important;

    grid-template-columns:minmax(0,1fr);

    grid-template-areas:
      "sona"
      "am"
      "flist"
      "yap"
      "follow";

    gap:30px;

    width:100%;
    padding:10px;
  }

  .my-sona{
    width:100%;
    max-width:350px;

    margin:auto;
  }

  .profile-info-hstack{
    align-items:center;
    text-align:center;
  }

  .profile-info-stack > div:last-child{
    grid-area:follow;
    width:100%;
  }

  .am,
  .f-list,
  .yap-corner{
    width:100%;
    max-width:100%;
  }
}



.profile-info-wrapper-box,
.profile-info-stack,
.pp-uc-about-me{
  display:contents !important;
}





</style>


<style>

.pp-tabs-indicator{
  display: none
}


.character-list-pagination-flex, .character-list-pagination-box, .profile-filters-flex-outer {
  display: contents;
}
.profile-filters-flex-inner-hassearchfilter {
  flex: 1;
}


.profile-pagination-flex-outer{
  align-self: center;
  order: -1
}



.pp-tabs-wrapper {
  width: 100%;
  height: 55px;
  background: transparent;
  align-items: center;
  border: none;
}


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


.pp-tabs-button::before{
  content: "Gnarly";
  font: italic 45px Abril Fatface;
  color: #600b9a
}



.pp-pg-total {
  background: transparent;
  border: none;
  box-shadow: none
}

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


.pp-pg-total-count , .pp-pg-total-text::after {
  color: #fff;
  font: italic 15px share tech
  }


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


.pp-pg-total-text::after{
  content: "creations";
}


.pp-pg-prev-button svg, .pp-pg-next-button svg, .pp-pg-page-button{
  color: #600b9a ;
}



.pp-pg-page-button{
  background: none
}




.pp-fl-search-input {
  font: italic 15px  Crimson Text;
  color: #fff;
}


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


.pp-fl-search-input,
.pp-fl-search-input:is(:hover, :focus) {
  box-shadow: none;
  border: 1px solid #600b9a;
  background: #600b9a50
}


.pp-fl-search-input::placeholder {
  color: #fff;
}

.pp-fl-filter-button {
    background: #600b9a50;
    border: 1px solid #600b9a;
}


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

.css-16r55pk{
  background: #00000099;
  backdrop-filter: blur(10px)
}

.css-1n6p0lj {
  background: #600b9a50 ! important;
  box-shadow: none;
  border: 1px solid #600b9a
}

._tag_fgxac_6 {
  background: #600b9a50;
  color: #600b9a;
  font: 15px Crimson text;
  border: 1px solid #600b9a
}

._tag_fgxac_6:hover {
  background: #600b9a50;
  color: #600b9a;
  box-shadow: none;
  border: 1px solid #600b9a
}

.profile-filter-modal-body-tags-flex-box-heading {
  font: italic 15px Crimson text
}

.css-dcyl1x {
  font: italic 2rem cinzel decorative
}

._expandButton_14k4u_153 {
  background: #600b9a50;
  border: 1px solid #600b9a;
  box-shadow: none
}

._expandButton_14k4u_153:hover {
  background: #600b9a50;
}

._expandButton_1lgbq_153 svg {
  fill: #600b9a ! important
}</style>




<style>
.transparent .react-select__control {
  background: #600b9a50;
  width: 150px;
  border: 1px solid #600b9a;
}


.transparent .react-select__control:hover{
  border: 1px solid #600b9a;
}


.css-1wy0on6 span{
  background: #600b9a ! important
}


.transparent .react-select__value-container>div{
  color: #fff;
  font: italic 15px Crimson Text;
}


.css-8mmkcg{
  fill: white
}


.transparent .react-select__menu{
  background: #600b9a50;
  border: 1px solid #600b9a
}


.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: #600b9a;
  font: 1rem share tech;
  opacity: 0.5;
  transition: all 0.45s ease;
}


.transparent .react-select__option--is-selected {
  background: #600b9a60;
  color: white;
  opacity: 1
}


.transparent .react-select__option:hover{
  letter-spacing: 1.1px;
  background: #600b9a;
  color: white;
  opacity: 1
}
</style>

<style>
/*🌸 My final touch. Those flashing blue things u see at the beginning of images, and on a few things like links and text? If u have sharp eyes, u'll notice what I'm referring to*/
*{
  -webkit-tap-highlight-color: transparent;
}
</style>