<style>
/*For Ami.*/
</style>

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


.pp-uc-background:hover {
  box-shadow: none;
}
</style>

<style>
  .profile-info-hstack{
    position: relative;
    grid-area: cover;
    margin-top: 300px;
    flex-direction: column-reverse;
    justify-content: flex-end;
    align-items: flex-start;
    z-index: 1
  }

  .pp-uc-member-since {
    font-size: 0;
  }

  .css-hjkukh {
  order: -1;
  color: #f4f4f0;
  white-space: nowrap;
  }

  .pp-uc-avatar{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    outline: 1px solid #fff;
    outline-offset: -10px;
  }

  .pp-uc-title {
    font-size: 0;
    font-family: Grenze Gotisch;
    color: #fff
  }
  .pp-uc-title::before{
    content: "Colgate";
    font-size: 3rem
  }

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

  .pp-uc-followers-count > span + span::after {
  content: "Psychos";
  }

  .pp-uc-followers-count, .pp-uc-followers-count > span + span::after{
    font-size: 1rem;
    font-family: jura
  }
</style>

<style>
  .pp-top-bar-title{
    font-size: 0
  }
</style>


<style>
  .sliding-cover{
  grid-area: cover;
  position: absolute;
  top: 0;
  min-width: 400px;
  height: 500px;
  max-width: 550px;
  overflow:hidden;
  z-index:0;
  border-radius: 20px;
  outline: 2px solid #fff;
  outline-offset: 5px;
}


.sliding-cover .slides{
  display:flex;
  height:100%;
  animation:slideLoop 16s infinite ease-in-out;
}


.sliding-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  flex-shrink:0;
}


.sliding-cover .bars{
  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:6px;
  background: none;
  justify-content: center;
}


.sliding-cover .bars span{
  width:26px;
  height:3px;
  background:#fff5;
  border-radius:10px;
  animation:barLoop 16s infinite;
}


.sliding-cover .bars span:nth-child(1){ animation-delay:0s; }
.sliding-cover .bars span:nth-child(2){ animation-delay:4s; }
.sliding-cover .bars span:nth-child(3){ animation-delay:8s; }
.sliding-cover .bars span:nth-child(4){ animation-delay:12s; }


@keyframes slideLoop{
  0%   { transform:translateX(0%); }
  20%  { transform:translateX(0%); }

  25%  { transform:translateX(-100%); }
  45%  { transform:translateX(-100%); }

  50%  { transform:translateX(-200%); }
  70%  { transform:translateX(-200%); }

  75%  { transform:translateX(-300%); }
  95%  { transform:translateX(-300%); }

  100% { transform:translateX(-400%); }
}


@keyframes barLoop{
  0%   { background:#fff; }
  25%  { background:#fff; }
  30%  { background:#fff5; }
  100% { background:#fff5; }
}
</style>
<div class="sliding-cover">
  <div class="slides">
    <img src="https://files.catbox.moe/6bffsa.jpg">
    <img src="https://files.catbox.moe/b4rc8f.png">
    <img src="https://files.catbox.moe/4jvcnh.jpg">
    <img src="https://files.catbox.moe/mn9qqx.jpg">
    <img src="https://files.catbox.moe/6bffsa.jpg">
  </div>

  <div class="bars">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>


<style>
  .lib-grid{
  grid-area: book;
  display:grid;
  grid-template-columns:repeat(2, 160px);
  gap:30px;
  justify-content:center;
}


.bk{
  width:160px;
  aspect-ratio:5 / 8;
  perspective:1400px;
}

.bk summary{
  list-style:none;
}
.bk summary::-webkit-details-marker{
  display:none;
}

.bk-shell{
  position:relative;
  width:100%;
  height:100%;
  cursor:pointer;
}


.bk-cover{
  position:absolute;
  inset:0;
  border-radius:14px;
  overflow:hidden;
  transform-origin:left center;
  transition:transform .9s ease, opacity .4s ease, box-shadow .9s ease;
  z-index:2;
}

.bk-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.bk-title{
  position:absolute;
  bottom:14px;
  left:0;
  right:0;
  text-align:center;
  color:#fff;
  font-family: grenze gotisch;
  font-size: 1.2rem;
  letter-spacing:.5px;
  text-shadow:0 2px 6px #000;
}

.bk-cover::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:6px;
  height:100%;
  background:linear-gradient(to right,#0007,#0000);
}


.bk-pages{
  position:absolute;
  inset:0;
  border-radius:14px;
  background:#f5f2ec;
  padding:12px;
  overflow-y:auto;
  opacity:0;
  transition:opacity .4s ease .45s;
}

.bk-text{
  font-size: 0.9rem;
  line-height:1.5;
  color:#000;
  font-family: share tech;
}


.bk[open] .bk-cover{
  transform:rotateY(-155deg) translateX(-6px);
  box-shadow:12px 0 20px #0005;
  opacity:0;
}

.bk[open] .bk-pages{
  opacity:1;
}
</style>
<div class="lib-grid">

<details class="bk">
<summary class="bk-shell">
<div class="bk-cover">
<img src="https://files.catbox.moe/hgqq7s.jpg">
<div class="bk-title">Abcd</div>
</div>
<div class="bk-pages">
<div class="bk-text">yap yap. it's scrollable</div>
</div>
</summary>
</details>

<details class="bk">
<summary class="bk-shell">
<div class="bk-cover">
<img src="https://files.catbox.moe/d8udos.jpg">
<div class="bk-title">efg</div>
</div>
<div class="bk-pages">
<div class="bk-text">yap yap yap yap</div>
</div>
</summary>
</details>

<details class="bk">
<summary class="bk-shell">
<div class="bk-cover">
<img src="https://files.catbox.moe/5ajcgp.jpg">
<div class="bk-title">hijk</div>
</div>
<div class="bk-pages">
<div class="bk-text">gsyegheyueuehhejeneben</div>
</div>
</summary>
</details>

<details class="bk">
<summary class="bk-shell">
<div class="bk-cover">
<img src="https://files.catbox.moe/2fp09z.jpg">
<div class="bk-title">lmnop</div>
</div>
<div class="bk-pages">
<div class="bk-text">add more info</div>
</div>
</summary>
</details>

</div>


<style>

.image-book{
  grid-area: sbook;
  width:220px;
  aspect-ratio:5 / 8;
  perspective:1400px;
  margin:50px auto;
}

.image-book summary{
  list-style:none;
}
.image-book summary::-webkit-details-marker{
  display:none;
}

.image-book-shell{
  position:relative;
  width:100%;
  height:100%;
  cursor:pointer;
}


.image-book-cover{
  position:absolute;
  inset:0;
  border-radius:14px;
  overflow:hidden;
  transform-origin:left center;
  transition:transform .9s ease, opacity .4s ease, box-shadow .9s ease;
  z-index:2;
}

.image-book-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.image-book-cover-title{
  position:absolute;
  bottom:10px;
  left:0;
  right:0;
  text-align:center;
  font-family: grenze gotisch;
  color:#fff;
  font-size: 1.5rem;
  font-weight:bold;
  text-shadow:0 2px 6px #000;
}


.image-book-pages{
  position:absolute;
  inset:0;
  border-radius:14px;
  background:#f5f2ec;
  padding:10px;
  overflow-y:auto;
  opacity:0;
  transition:opacity .4s ease .45s;
  display:flex;
  flex-direction:column;
  gap:14px;
}


.image-book-item{
  width:100%;
}


.image-box{
  display:block;
  width:100%;
  height:200px;
  position:relative;
  overflow:hidden;
  border-radius:10px;
  text-decoration:none;
}


.image-box img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .3s ease;
}

.image-box:hover img{
  transform:scale(1.08);
}


.image-book-text{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  text-align:center;
  font-size: 1rem;
  font-family: grenze gotisch;
  color:#000;
  background:#fff;
  padding:4px 0;
  opacity:0;
  transition:opacity .3s ease;
}

.image-box:hover .image-book-text{
  opacity:1;
}


.image-book[open] .image-book-cover{
  transform:rotateY(-155deg) translateX(-8px);
  box-shadow:12px 0 20px #0005;
  opacity:0;
}

.image-book[open] .image-book-pages{
  opacity:1;
}
</style>
<details class="image-book">
<summary class="image-book-shell">
<div class="image-book-cover">
<img src="https://files.catbox.moe/hgqq7s.jpg">
<div class="image-book-cover-title">My Favourite Book</div>
</div>
<div class="image-book-pages">
<div class="image-book-item">
<a class="image-box" href="https://example.com">
<img src="https://files.catbox.moe/hgqq7s.jpg">
<div class="image-book-text">frnd 1</div>
</a>
</div>
<div class="image-book-item">
<a class="image-box" href="https://example.com">
<img src="https://files.catbox.moe/d8udos.jpg">
<div class="image-book-text">frnd 2</div>
</a>
</div>
<div class="image-book-item">
<a class="image-box" href="https://example.com">
<img src="https://files.catbox.moe/5ajcgp.jpg">
<div class="image-book-text">frnd 3</div>
</a>
</div>
<div class="image-book-item">
<a class="image-box" href="https://example.com">
<img src="https://files.catbox.moe/2fp09z.jpg">
<div class="image-book-text">frnd 4</div>
</a>
</div>
</div>
</summary>
</details>


<style>
div:has(> .css-1s5evre),
div:has(~ .css-1s5evre) {
  background: transparent !important;
}


.pp-cc-wrapper {
  position: relative;
  height: 400px;
  overflow: hidden;
  box-shadow: none ! important;
  border: 1px solid #fff;
  transform: scale(.95);
  outline: 0;
  transition: transform 0.5s ease-in-out, outline 0.3s ease
  }

.pp-cc-wrapper:hover {
  transform: scale(1);
  outline: 1px solid #fff;
  outline-offset: 5px;
  }
  .profile-character-card-stack-link-component-box{
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 1
  }

.pp-cc-name{
  text-align: center;
  font-family: grenze gotisch;
  font-size: 1rem;
  color: #fff
}

  .profile-character-card-description-box{
    position: absolute;
    top: 50px;
    max-height: 145px;
    overflow-y: auto;
    opacity: 0;
    transition: opacity 0.5s ease-in-out
  }

  .pp-cc-wrapper:hover .profile-character-card-description-box{
    opacity: 1
  }

.pp-cc-avatar {
  filter: brightness(.8) contrast(1);
  transition: filter 0.25s ease;
}

.pp-cc-wrapper:hover .pp-cc-avatar {
  filter: brightness(.3) contrast(1.05);
}

  .pp-cc-description p{
    color: #fff;
    font-family: share tech
  }

  .pp-cc-description p:first-letter{
    font-family: grenze gotisch;
    font-size: 1.5rem;
    color: #866c54;
    text-shadow: 0 0 5px #000
  }

  .pp-cc-tags{
  position: absolute;
    bottom: 30px;
    max-height: 125px;
    overflow-y: auto;
    opacity: 0;
    transition: opacity 0.5s ease-in-out
  }

  .pp-cc-wrapper:hover .pp-cc-tags{
    opacity: 1
  }

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

  .profile-character-card-avatar-aspect-ratio{
    height: 400px;
  }

  .pp-cc-tags-item {
  display: inline-block;
  border: none;
  border-bottom: 1px solid #fff;
  border-radius: 0px;
  color: #fff;
  font-family: share tech;
  font-size: 12px;
}
.pp-cc-tags-item:hover{
  border: none;
  border-bottom: 1px solid #fff
}

  .pp-cc-tags-regular::first-letter {
  font-size: 0;
  }

  .profile-character-card-tags-wrap:has(.pp-tag-limitless), .pp-tag-limitless {
  flex: 1 1 100%;
  width: 100%;
  }

  .pp-tag-limitless{
    text-align: center;
    background: none
  }

  .pp-cc-star-line {
  position: absolute;
  top: 200px;
  border: 1px solid;
  border-color: #fff;
  width: 0;
  transition: width 0.5s ease-in-out;
}
.pp-cc-wrapper:hover .pp-cc-star-line {
  width: 100%;
}
.pp-cc-star {
  display: none;
}

  .profile-character-card-stats-box{
    position: absolute;
    width: 100%;
    top: 0;
  }

  .pp-cc-ribbon{
    right: unset;
    width: 100%;
    top: 0;
  }

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

  .pp-cc-chats{
    justify-content: center;
    background: #0005;
    height: 0;
    transition: 0.3s ease-in-out
  }

  .pp-cc-wrapper:hover .pp-cc-chats{
    height: 25px
  }

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

<style>
    .profile-info-stack:first-child {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 500px auto auto;
  grid-template-areas:
  "cover"
  "cover"
  "follow"
  "book"
  "sbook"
  ;
  gap: 50px
}
    </style>

<style>
  .pp-uc-about-me + div{
    grid-area: follow;
  }

  div:has(>.profile-uc-follow-flex){
  justify-content: center;

  }


.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%
}
</style>

<style>
.pp-cc-list-container {
    display: flex;
    overflow-x: auto;
    gap: 50px;
    padding: 10px;
}

.pp-cc-wrapper {
  flex: 0 0 190px
}
</style>



<style>
.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: "colgate's Bbs";
  font-family: Abril Fatface;
  font-size: 45px;
  color: #fff
}

  .pp-tabs-indicator{
  display: none
  }

  .pp-pg-total {
  background: #e0c4a0;
  border: #000 2px solid;
  height: 40px
  }

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


.pp-pg-total-count , .pp-pg-total-text::after {
  color: #000;
  font-family: share tech;
  font-size: 15px;
  text-shadow: none;
  font-weight: bold
  }



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


.pp-pg-total-text::after{
  content: " Joined the asylum";
}


.pp-pg-prev-button svg, .pp-pg-next-button svg {
  color: #fff ;
}

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

.pp-pg-page-button{
  background: #e0c4a0
}

.pp-fl-search-input {
  background: #6f4d38;
  font-family:  share tech;
  color: #fff;
  text-align: center;
  font-size: 1rem
}

  .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 #fff;
}

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





  .pp-fl-filter-button {
    background: #6f4d38;
    border: 1px solid #fff;
}


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


.css-1dljitb {
  background: #0006 !important;
  backdrop-filter: blur(14px)
}


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

._tag_1fwqk_6:hover{
  border: 1px solid #fff;
  background: #6f4d38;
  color: #fff;
}


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

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


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

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

<style>


.transparent .react-select__control {
  background: #e0c4a0;
  border-radius: 2px;
  height: 40px;
  width: 125px;
  border: 2px solid #000;
  border-radius: 10px
}


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


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


.transparent .react-select__value-container>div{
  color: #000;
  font-family: share tech;
  font-size: 15px;
  font-weight: bold;
}



.css-8mmkcg{
  fill: #000
}


.transparent .react-select__menu{
  background: #e0c4a0;
  border: 2px solid #000
}


.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: share tech;
  transition: letter-spacing .3s ease-in
}


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


.transparent .react-select__option:hover{
  background: #c58a5380;
  color: #000;
}

</style>


<style>

.pp-top-bar {
background: #6f4d38;
    border: 2px solid #e0c4a0;
    border-top: none;
  border-radius: 0px;
}

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

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

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


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

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

<style>

.pp-mnb-container {
    background: #6f4d38;
    border: 2px solid #e0c4a0;
    border-bottom: none;
}

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


<style>
.pp-top-bar-app-menu-list{
  background-color: #e0c4a0;
  border: 2px solid #6f4d38;
  justify-content: center;
}

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

}

.pp-top-bar-app-menu-list-item {
  color: #000
}

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


<style>
.glow-logo h2, .glow-logo p{
  color: white;
}

.pp-top-bar-search {
  background: #e0c4a033;
  box-shadow: 0 0 5px #fff;
}

.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: #fff;
  background: black
}
</style>

<style>
  [class*="notificationsPopover_"]{
    background: #6f4d38;
    box-shadow: none
  }

  [class*="popoverTitle_"]{
  color: #fff;
  font-family: grenze gotisch;
  font-size: 2rem
  }

  [class*="contentWrapper_"]{
  background: transparent ;
  }

  [class*="_subject_"],
[class*="_timestamp_"], [class*="_body_"]{
  color: #fff;
}

  [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: #fff;
}

  [class*="notificationsList_"] *:is([class*="notificationItem_"] img:nth-of-type(1)){
  box-shadow: 0 0 10px #e0c4a0
  }

  [class*="_unreadIndicator_"]{
  background: none;
  position: absolute;
  top: -5px;
  left: 320px;
  color: #e0c4a0;
  width: 200px;
  box-shadow: none
  }

  [class*="_unreadIndicator_"]:after{
  content: "New msg";
  font-family: share tech
}
</style>