/* Audio player mockup */

.playerwrap {
  position: absolute;
  margin-inline: auto;
  width: 100%;
  max-width: 350px;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-flow: row nowrap;
  padding: 10px;
  gap: 10px;
  background: #171717BF;
  border-radius: 8px;
}

.playerimg {
  max-height: 125px;
  flex: 1 0 25%;
  width: auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
}

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

.playerflex {
  padding: 10px;
  flex: 1 1 70%;
  gap: 5px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
}

.playertext {
  flex: 0 0 40%;
  overflow: hidden;
}

.playertext h3 {
  text-overflow: ellipsis;
  font-size: 1rem;
  color: light-dark(#171717, white);
  font-family: 'DM Sans';
}

.playertext h3 span {
  color: light-dark(#090909, #AAAAAA);
  font-size: 0.8rem;
}

.bar {
  position: relative;
  background: light-dark(#17171780, #FFFFFF80);
  height: 8px;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
}

.bar span {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 8px;
  width: 100%;  
  background: light-dark(#171717, white);
  transform: translateX(-100%);
  animation: runtime 339s linear;
  animation-fill-mode: forwards;
}

@keyframes runtime {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.buttons {
  display: flex;
  flex-flow: row nowrap;
  flex: 0 0 40%;
  justify-content: center;
  align-items: flex-end;
  height: 100%;
}

.buttons .center {
  height: 20px;
  width: 20px;
  background: light-dark(#171717, white);
  clip-path: polygon(evenodd, 0% 0%, 10% 0, 10% 100%, 35% 100%, 35% 0%, 65% 0, 65% 100%, 90% 100%, 90% 0);
}

body {
  color-scheme: light dark;
  background: #171717 !important;
}

/* No ugly */
*:not(.css-1s5evre, .css-1bn1yyx *, .css-mzi0gq *, .css-1g1g04k *) { box-shadow: none !important; }
*:not(.css-1s5evre, .css-1bn1yyx *, .css-mzi0gq *, .css-1g1g04k *):hover { box-shadow: none !important; }

/* { outline: red 1px solid } */

.firstbox {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  margin: 0 -3rem;
  width: calc(100% + 6rem);
}

.firstbox > span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:#99ffe6;
background-image:
radial-gradient(at 9% 0%, hsla(300,90%,77%,1) 0px, transparent 50%),
radial-gradient(at 90% 10%, hsla(281,90%,70%,1) 0px, transparent 50%),
radial-gradient(at 20% 66%, hsla(34,76%,69%,1) 0px, transparent 50%),
radial-gradient(at 62% 27%, hsla(25,87%,60%,1) 0px, transparent 50%),
radial-gradient(at 70% 12%, hsla(173,65%,77%,1) 0px, transparent 50%),
radial-gradient(at 90% 52%, hsla(283,92%,63%,1) 0px, transparent 50%),
radial-gradient(at 0% 7%, hsla(346,99%,70%,1) 0px, transparent 50%);
  animation: hueloop 20s linear infinite;
}

@keyframes hueloop {
  from { filter: hue-rotate(0); }
  to { filter: hue-rotate(360deg); }
}

.wrap {
  width: 100%;
  position: relative;
  padding: 0 3rem;
  gap: 10px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  max-width: 1500px;
}

.pfpcont {
  position: relative;
  margin-top: 4rem;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  max-height: 600px;
  overflow: visible;
  flex: 0 1 100%;
  height: 100%;
}

@media only screen and (max-width:767px) {
  .pfpcont {
    right: 7rem;
  }
}

.pfpcont img {
  max-height: 600px;
  object-fit: cover;
  object-position: top left;
}

.profilecont {
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  max-width: 60%;
  position: absolute;
  justify-content: center;
  top: 0;
  right: 3rem;
  gap: 10px;
}

.profileinfo {
  padding: 20px;
  display: flex;
  flex-flow: column nowrap;
  height: auto;
  border-radius: 8px;
  background: light-dark(#FFFFFFBF, #171717BF);
  box-shadow: 0 2px 5px #00000040;
  backdrop-filter: blur(5px);
  z-index: 2;
  color: light-dark(#171717, white);
  font-family: 'DM Sans' !important;
}

.profileinfo h1 {
  text-transform: uppercase;
  font-size: clamp(1.5rem, 5vw, 5rem);
  font-family: 'DM Sans';
  font-weight: 1000;
}

.profileinfo h3 {
  font-size: clamp(1rem, 2vw, 3.5rem);
  font-family: 'DM Sans';
  font-weight: 700;
}

.profileinfo p {
  font-size: clamp(0.8rem, 1.5vw, 2.25rem);
  font-weight: light;
}

.textbox img {
  position: absolute;
  width: auto;
  top: -93px;
  left: -12px;
}

.textbox span:first-of-type {
  position: absolute;
  top: -20px;
  right: 10px;
  font-size: 0.75rem;
  color: #FFFFFFBF;
}


.textbox span:nth-of-type(2) {
  position: absolute;
  top: -130px;
  left: 20px;
  font-size: 0.5rem;
  color: #171717;
  background: #FFFFFF;
  box-shadow: 0 2px 5px #00000040;
  padding: 8px;
  font-family: Silkscreen;
  border-radius: 8px;
}

.textbox a {
  color: #FFFFFF;
}






/* Profile card remake setup */
/* Hide pointless stuff */
.css-dgc4sj {
  display: none;
}

.css-14l6kwv {
  padding: 0;
}

/* ESSENTIAL ADJUSTMENTS */

/* This is for column in both desktop and mobile */
.css-1wfbrwg {
  flex-direction: column !important;
  flex-wrap: nowrap;
}

/* Column adjustment */
.css-vqimyu {
  padding: 0;
  max-width: unset;
}

/* Html container VERY IMPORTANT 123 */
.css-1bn1yyx {
  width: 100%;
  margin: 0;
}

.css-1bn1yyx:not(:empty) {
  margin: 0;
}

.css-1uodvt1,
.css-1uodvt1 .css-8g8ihq {
  display: contents;
  gap: 0;
}

.css-15vqpxh > .css-8g8ihq {
  gap: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

/* REMOVING ELEMENTS AND REARRANGING OTHERS */

/* follower count */



.css-1ciz3n {
  order: 10;
}

/* Follow button and options button */
.css-fdshcw {
  order: 11;
}

/* Disappearing replaceables */

.css-1uodvt1 .css-79elbk,
.css-1uodvt1 .css-8g8ihq *:not(.css-1ciz3n, .css-hjkukh, .css-1x04uxb, .css-1igwmid) {
  display: none;
}
/* Profile card backgrounds */
.css-1wfbrwg > div,
.css-1wfbrwg > div > div:nth-child(-n+3) {
  background: transparent !important;
}

/* extend profile card */
.css-1wfbrwg {
  flex-direction: column !important;
  flex-wrap: nowrap;
}

.css-1wfbrwg > div:has(> .css-0) {
  max-width: unset;
  padding: 0;
}

/* Container of bot cards */
div:has(> div > .css-1s5evre) {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 40px;
}

/* Bot cards */
div:has(> .css-1s5evre) {
  flex: 0 1 400px;
  width: auto;
  height: auto;
  max-height: 400px;
  position: relative;
} 

/* Hide all backgrounds */
div:has(> .css-1s5evre),
div:has(~ .css-1s5evre) {
  background: transparent !important;
}

/* Visualize grid items 
.css-1s5evre > *,
.css-1s5evre > a > * {
  outline: red solid 1px;
} */

/* Bot card flairs */
/* Pink square */
div:has(> .css-1s5evre)::before {
  content: "not gonna sugarcoat it!";
  font-size: 0.5rem;
  color: #171717;
  font-family: 'DM Sans';
  font-weight: 500;
  position: absolute;
  width: auto;
  height: 12px;
  padding: 4px 6px;
  left: 0px;
  bottom: -20px;
  border-radius: 8px 0px 8px 8px;
  z-index: 0;
  background: pink;
  transition: all 500ms;
}

/* Blue circle */
div:has(> .css-1s5evre)::after {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  right: -10px;
  top: -10px;
  border-radius: 50%;
  z-index: 0;
  background-color:#99e4ff;
background-image:
radial-gradient(at 81% 41%, hsla(271,67%,75%,1) 0px, transparent 50%),
radial-gradient(at 68% 46%, hsla(67,68%,76%,1) 0px, transparent 50%),
radial-gradient(at 94% 72%, hsla(347,71%,68%,1) 0px, transparent 50%),
radial-gradient(at 6% 37%, hsla(296,94%,66%,1) 0px, transparent 50%),
radial-gradient(at 8% 51%, hsla(245,92%,71%,1) 0px, transparent 50%),
radial-gradient(at 85% 98%, hsla(243,88%,74%,1) 0px, transparent 50%),
radial-gradient(at 20% 0%, hsla(325,73%,76%,1) 0px, transparent 50%);
  transition: transform 30s;
  transform-origin: -50% 150%;
}

.css-1s5evre::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 50px;
  right: 0;
  top: 0;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  background: linear-gradient(115.58deg, #00FC19 0%, #1700A4 100.22%), radial-gradient(92.72% 100% at 50% 0%, #EBFFCB 0%, #651200 100%), radial-gradient(92.72% 100% at 50% 0%, #FAFF00 0%, #820000 100%), radial-gradient(109.21% 213.32% at 100% 0%, #FF4D00 0%, #00C2FF 100%), linear-gradient(127.43deg, #D50000 0%, #7856FF 100%);
background-blend-mode: lighten, overlay, lighten, screen, normal;
  z-index: -1;
  transition: all 30s;
}

div:hover > .css-1s5evre::before {
  filter: hue-rotate(540deg);
}

/* Bot card horizontal setup */
.css-1s5evre {
  position: relative;
  background: light-dark(#17171720, #FFFFFF20);
  box-shadow: 0 2px 5px #00000040;
  display: grid;
  grid-template-rows: 25px auto 25px;
  padding: 20px 20px 20px 0;
  grid-template-columns: 40% auto auto;
  grid-template-areas:
    "display name name"
    "display info info"
    "display count tokens";
  align-items: center;
  margin: 0;
  margin-left: 20px;
  gap: 10px 0;
  width: auto;
  height: 225px;
  z-index: 1;
  transition: all 500ms;
}

@media only screen and (max-width:767px) {
  div:nth-child(even) > .css-1s5evre {
    padding: 20px 20px 20px 0;
    grid-template-columns: 40% auto auto;
    grid-template-areas:
      "display name name"
      "display info info"
      "display count tokens";
    margin-left: 20px;
  }

  div:nth-child(odd) > .css-1s5evre {
    padding: 20px 0 20px 20px;
    grid-template-columns: auto auto 40%;
    grid-template-areas:
      "name name display"
      "info info display"
      "count tokens display";
    margin-right: 20px;
    margin-left: 0;
  }
  div:nth-child(odd):has(> .css-1s5evre)::before {
  border-radius: 0px 8px 8px 8px;
  left: unset;
  right: 0px;
}

}

/* Grid item adjustments */

.css-1s5evre > a { display: contents; }

.css-1q7rmf0 {
  z-index: 2;
  transform-origin: center;
  overflow: visible;
  position: relative;
  grid-area: display;
  border-radius: 8px;
  filter: drop-shadow(0px 2px 2px #00000080);
  left: -20px;
  max-width: 150px;
  height: 100%;
  transition: all 300ms;
}

@media only screen and (max-width:767px) {
  div:nth-child(even) > .css-1s5evre .css-1q7rmf0 {
    left: -20px;
  }

  div:nth-child(odd) > .css-1s5evre  .css-1q7rmf0 {
    right: -20px;
    left: unset;
  }

  div:nth-child(odd) > .css-1s5evre .css-199gcrh::before {
    left: 20px;
  }
}

/* FX TEST */
div:has(> .css-1s5evre):hover .css-1q7rmf0 {
  transform: scale(1.1);
  filter: drop-shadow(0px 4px 8px #00000080);
}

.css-1q7rmf0 img {
  border-radius: 8px;
  transition: all 300ms;
}

.css-1q7rmf0:hover img {
  transform: scale(1.025) rotate(3deg);
}

.css-1q7rmf0:hover {
  filter: drop-shadow(0px 5px 10px #00000080) !important;
}

/* Name container */
.css-nlxhw4 {
  position: relative;
  padding: 0;
  grid-area: name;
  height: 100%;
  overflow: hidden;
}

/* Topic */
.css-199gcrh::before {
  font-family: 'DM Sans';
  font-weight: 700;
  font-size: 0.75rem;
  color: #171717;
  position: absolute;
  left: calc(40% - 7.2px);
  top: 8px;
  content: "Topic:";
}

/* Name */
.css-nlxhw4 > div {
  color: #171717;
  font-family: Lato;
  font-size: 1rem;
  font-weight: Bold;
  text-transform: unset;
  letter-spacing: 0;
  text-shadow: none;
}

/* Desc container */
.css-199gcrh {
  grid-area: info;
  padding: 5px 0;
  margin-bottom: -20px;
}

.css-199gcrh * {
  color: light-dark(#171717, white) !important;
  font-family: Lato !important;
}

/* Tags container */
.css-4ofde4 {
  z-index: 1;
  margin: 0;
  padding: 0;
  width: 100%;
  height: calc(100% - 50px);
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 1;
  overflow: hidden;
  border-radius: 0 0 8px 8px;
}

/* Tags container 2 */
.css-k1urot {
  align-content: center;
  overflow: hidden;
  gap: 5px;
  position: relative;
  right: 0;
  background: light-dark(white, #171717);
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  padding-right: 20px;
  padding-left: calc(50% - 40px);
  transform: translateY(calc(100% + 1px));
  transition: all 300ms;
}

/* Hover FX */

div:has(> .css-1s5evre):hover .css-k1urot {
  transform: none;
}

/* Mobile adjustments */
@media only screen and (max-width:767px) {
div:has(> .css-1s5evre):nth-child(odd) .css-k1urot {
    padding-left: 20px;
    padding-right: calc(50% - 40px);
  }
  div:has(> .css-1s5evre):nth-child(odd) .css-123m5uu {
    right: unset;
    left: 0;
  }
}

/* .css-k1urot * {
  padding: 0;
  margin: 0;
} */

.css-k1urot span {
  border: 0;
}

/* Limitless tag */
.css-123m5uu {
  z-index: 0;
  position: absolute;
  right: 0;
  transform: translateY(50%) rotate(-45deg);
  bottom: 50%;
}

.css-123m5uu span {
  font-size: 0;
  color: light-dark(#17171720, #FFFFFF20);
  background: transparent;
  font-family: Lato;
  font-weight: 1000;
}

.css-123m5uu span::after {
  font-size: 3rem;
  content: "LIMITLESS";
}

/* Normal tags */

.css-1yp4ln {
  z-index: 1;
  align-items: center;
  justify-content: center;
}

.css-1yp4ln span {
  display: flex;
  color: light-dark(#171717, white);
  font-family: Lato;
  font-weight: normal;
  border-radius: 16px;
  padding: 2px 5px;
}

.css-1yp4ln span:hover {
  background: light-dark(#17171740, #FFFFFF40);
  border: 0;
}

/* removes the original text for the "dead dove" tag */
a[href*="/search?mode=all&sort=popular&tag_id=49&page=1"] .css-x2gqu0 { /* the href is different for every tag. locate them in inspect element. */
    font-size: 0;
}

/* replaces the text for the "dead dove" tag */
a[href*="/search?mode=all&sort=popular&tag_id=49&page=1"] .css-x2gqu0::after {
    content: "🕊️ Dead Dove";
    font-size: 0.75rem;
}

/* Random tag related codes */

.css-1yp4ln:has(a[href*="/search?mode=all&sort=popular&tag_id=48&page=1"]) {
  order: -2;
}

a[href*="/search?mode=all&sort=popular&tag_id=48&page=1"] span {
  font-size: 0;
}

a[href*="/search?mode=all&sort=popular&tag_id=48&page=1"] .css-x2gqu0::after {
  content: "👩‍❤️‍💋‍👩 WLW";
  font-size: 0.75rem;
}

/* Custom tag section */
.\.customenabled span {
  font-size: 0;
}

.\.customenabled span::after {
  font-size: 0.75rem;
}

.\.feeltheheat span::after {
  content: "🔥 Feel the Heat!";
}

.\.streetsofkamurocho span::after {
  content: "⛩️ Streets of Kamurocho";
}

.\.likeadragonAU span::after {
  content: "🐲 Like a Dragon AU";
}

.\.musicmania2 span::after {
  content: "📀 Music Mania 2";
}

.\.valentine2025 span::after {
  content: "🩷 Valentine 2025";
}

.\.agegap span::after {
  content: "👭 Age Gap";
}

.\.divorcedchar span::after {
  content: "🌧️ Divorced";
}

.\.archeologist span::after {
  content: "⚜️ Archeologist";
}

.\.toxic span::after {
  content: "😈 Toxic";
}

.\.oldmoney span::after {
  content: "💸 Old Money";
}

.\.polish span::after {
  content: "🇵🇱 Polish";
}

.\.british span::after {
  content: "🇬🇧 British";
}

.\.korean span::after {
  content: "🇰🇷 Korean";
}

.\.mexican span::after {
  content: "🇲🇽 Mexican";
}

.\.trackteam span::after {
  content: "🏃‍♀️ Track Team";
}

.\.acerunner span::after {
  content: "🏅 Ace Runner";
}

.\.wuhluhwuh span::after {
  content: "👩‍❤️‍👩 Wuhluhwuh";
}

.\.winnerslovewinning span::after {
  content: "👩‍❤️‍💋‍👩 Winners Love Winning";
}

.\.latina span::after {
  content: "🧡 Latina";
}

.\.anxiety span::after {
  content: "😣 Anxiety";
}

.\.shutin span::after {
  content: "🚪 Shut In";
}

.\.agoraphobia span::after {
  content: "🌑 Agoraphobia";
}

.\.christmas span::after {
  content: "🎄 Christmas";
}

/* Bot card tag specific designs */

/* STREETS OF KAMURO */

.css-1s5evre:has(.\.streetsofkamurocho)::before {
  background: radial-gradient(50% 123.47% at 50% 50%, #00FF94 0%, #720059 100%), linear-gradient(121.28deg, #669600 0%, #FF0000 100%), linear-gradient(360deg, #0029FF 0%, #8FFF00 100%), radial-gradient(100% 164.72% at 100% 100%, #6100FF 0%, #00FF57 100%), radial-gradient(100% 148.07% at 0% 0%, #FFF500 0%, #51D500 100%);
background-blend-mode: screen, color-dodge, overlay, difference, normal;
}

div:has(> .css-1s5evre .\.streetsofkamurocho)::after {
  background-color:#99c0ff;
background-image:
radial-gradient(at 32% 52%, hsla(238,80%,73%,1) 0px, transparent 50%),
radial-gradient(at 21% 22%, hsla(188,81%,65%,1) 0px, transparent 50%),
radial-gradient(at 35% 70%, hsla(266,65%,63%,1) 0px, transparent 50%),
radial-gradient(at 0% 36%, hsla(215,74%,74%,1) 0px, transparent 50%),
radial-gradient(at 13% 73%, hsla(218,98%,72%,1) 0px, transparent 50%),
radial-gradient(at 75% 66%, hsla(237,65%,79%,1) 0px, transparent 50%),
radial-gradient(at 62% 36%, hsla(245,79%,70%,1) 0px, transparent 50%);
}

div:has(> .css-1s5evre .\.streetsofkamurocho)::before {
  background: #52b7ff;
  content: "streets of kamurocho!";
}












/* Chat count container */
.css-10cv7r2,
.css-10cv7r2 *:not(:has(> span)) {
  display: contents;
}

.css-euh5x6 {
  align-self: flex-end;
  width: 100%;
  grid-area: count;
  color: light-dark(#171717, white);
  font-family: Lato;
  font-size: 0.8rem;
  line-height: 1;
}

.css-euh5x6 span::before {
  content: "Replies: ";
}

/* Token count container */
.css-1c9wmts {
  position: relative;
  left: unset;
  right: unset;
  bottom: unset;
  grid-area: tokens;
  padding: 0;
  margin: 0;
  align-self: flex-end;
}

.css-1c9wmts p {
  opacity: 1;
  color: light-dark(#171717, white);
  font-family: Lato;
  text-shadow: none;
  text-transform: unset;
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0;
  text-align: right;
  width: 100%;
}




/* Safe tap experiment 
div:has(> .css-1s5evre)::before {
  z-index: 5;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: auto;
  transition: all 200ms;
} */

div:has(> .css-1s5evre):hover::before {
  z-index: -2;
}

/* Hide pointless elements */
.css-1s5evre > a:not(:first-child),
.css-1s5evre > div:nth-of-type(2),
.css-1s5evre > *:last-child:not(.css-1c9wmts) {
  display: none;
}

/* Bot card numbers */

.css-1s5evre::after {
  position: absolute;
  width: 100px;
  height: 50px;
  left: 0;
  top: 0;
  z-index: 0;
  text-align: left;
  font-size: 28px;
  line-height: 19px;
  color: #00000040;
  font-family: Lato;
}

@media only screen and (max-width: 767px) {
 div:nth-child(odd) > .css-1s5evre::after {
    text-align: right;
    left: unset;
    right: 0;
  }
}

div:last-child > .css-1s5evre::after {
  content: "#1";
}

div:nth-last-child(2) > .css-1s5evre::after {
  content: "#2";
}

div:nth-last-child(3) > .css-1s5evre::after {
  content: "#3";
}

div:nth-last-child(4) > .css-1s5evre::after {
  content: "#4";
}

div:nth-last-child(5) > .css-1s5evre::after {
  content: "#5";
}

div:nth-last-child(6) > .css-1s5evre::after {
  content: "#6";
}

div:nth-last-child(7) > .css-1s5evre::after {
  content: "#7";
}

div:nth-last-child(8) > .css-1s5evre::after {
  content: "#8";
}

div:nth-last-child(9) > .css-1s5evre::after {
  content: "#9";
}

div:nth-last-child(10) > .css-1s5evre::after {
  content: "#10";
}

div:nth-last-child(11) > .css-1s5evre::after {
  content: "#11";
}

div:nth-last-child(12) > .css-1s5evre::after {
  content: "#12";
}

div:nth-last-child(13) > .css-1s5evre::after {
  content: "#13";
}

div:nth-last-child(14) > .css-1s5evre::after {
  content: "#14";
}

div:nth-last-child(15) > .css-1s5evre::after {
  content: "#15";
}

div:nth-last-child(16) > .css-1s5evre::after {
  content: "#16";
}

div:nth-last-child(17) > .css-1s5evre::after {
  content: "#17";
}



/* Headers and footers */
/* Container */
.headercont {
  z-index: 3000;
  position: fixed;
  width: 100vw;
  top: 0;
  left: 0;
  background: light-dark(#FFFFFFBF, #171717BF);
  box-shadow: 0 2px 5px #00000040;
  backdrop-filter: blur(5px);
  height: 4rem;
  display: flex;
}

/* Container for items */
.topbar {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 10px;
  height: auto;
  padding: 1rem 20px;
}

/* Items */
.topbar a {
  display: flex;
  align-items: center;
  height: 2rem;
  color: light-dark(#171717, white);
  font-family: 'DM Sans';
  padding: 0 6px;
  border-radius: 20px;
}

.css-17xq282,
.css-p641ht .css-wd8hou > *:not(.css-bu13fv, .css-18yip8r, .css-18yip8r + div),
.css-bqd4p6 > div:not(.css-7f563p),
.css-7f563p > div:first-of-type, 
.css-avv0po > a {
  display: none;
}

.css-anekkm,
.css-p641ht,
.css-p641ht .css-wd8hou,
.css-bqd4p6,
.css-7f563p,
.css-1qf4tpw,
.css-avv0po,
.css-1ib4t17,
.css-dvxtzn {
  display: contents;
}

/* Profile menu button */
.css-bu13fv,
.css-18yip8r {
  height: 2rem;
  min-width: 2rem;
  padding: 0;
  display: flex;
  position: fixed;
  z-index: 3002;
}

.css-18yip8r {
  top: 1rem;
  right: calc(2.5rem + 30px);
}

.css-18yip8r svg {
  color: light-dark(#171717, white) !important;
}



.css-bu13fv {
  transform: none;
  top: 1rem;
  right: 20px;
}

/* Mobile nav bar */

/* Mobile menu button*/

.css-nhknnx {
  height: 2rem;
  min-width: 2rem;
  padding: 0;
  display: flex;
  position: fixed;
  z-index: 3002;
  right: 20px;
  bottom: 10px;
  right: 20px;
}

/* Profile Menu */
/* Menu box desktop */
.css-mzi0gq {
  height: auto;
  position: fixed !important;
  right: 1rem !important;
  left: unset !important;
  padding-top: 5rem;
  transform: unset !important;
}

/* System menu */

/* Fixes */

/* Background of box */
.css-19h42zx {
  display: flex;
  flex-flow: column nowrap;
  gap: 10px;
  height: auto;
  transform-origin: top right !important;
  background: light-dark(#FFFFFFBF, #171717BF);
  padding: 20px;
  box-shadow: 0 2px 5px #00000040;
  backdrop-filter: blur(5px);
  border-radius: 8px;
}

/* Pc shit */
@media only screen and (min-width: 768px) {
  .wrap { margin-top: 4rem; }
  .css-mzi0gq {
    top: 0 !important;
    bottom: unset !important;
  }
  .css-1qq679y {
    padding-top: 5rem;
  }
}

/* Mobile bar adjustments */
@media screen and (max-width: 767px) {
  .headercont {
    top: unset;
    bottom: 0;
    height: auto;
    box-shadow: 0 -2px 5px #00000040;
  }
  .topbar {
    padding: 10px 20px;
  }
  .css-18yip8r {
    position: fixed;
    height: 2rem;
    width: 2rem;
    top: unset;
    bottom: 10px;
    right: calc(2.5rem + 30px);
  }
  .css-mzi0gq {
    top: unset !important;
    bottom: 0 !important;
    padding-bottom: calc(3rem + 20px);
    padding-top: unset;
  }
  .css-19h42zx {
    transform-origin: bottom right !important;
  }
  .css-1qq679y section {
    transform-origin: bottom center !important;
  }
}

/* Menu options */

/* Profile */
.css-19h42zx > a:first-child {
  color: #171717;
  background-color:#ff99f5;
background-image:
radial-gradient(at 6% 33%, hsla(267,75%,76%,1) 0px, transparent 50%),
radial-gradient(at 37% 7%, hsla(337,94%,63%,1) 0px, transparent 50%),
radial-gradient(at 13% 27%, hsla(47,68%,63%,1) 0px, transparent 50%),
radial-gradient(at 91% 56%, hsla(205,79%,78%,1) 0px, transparent 50%),
radial-gradient(at 68% 3%, hsla(175,63%,79%,1) 0px, transparent 50%),
radial-gradient(at 54% 99%, hsla(52,63%,77%,1) 0px, transparent 50%),
radial-gradient(at 1% 34%, hsla(289,93%,77%,1) 0px, transparent 50%);
  backdrop-filter: unset;
  box-shadow: 0 2px 5px #00000040;
}

/* Options in-between */
.css-19h42zx > a {
  font-family: 'DM Sans';
  font-weight: 700;
  color: light-dark(#171717, white);
  border-radius: 8px;
  transition: all 300ms;
}

/* Log out */
.css-19h42zx > a:last-child:not(.css-60o2eb) {
  margin-top: 10rem;
  color: #FFFFFF;
  background-color:#ad99ff;
background-image:
radial-gradient(at 70% 31%, hsla(241,77%,69%,1) 0px, transparent 50%),
radial-gradient(at 30% 41%, hsla(286,97%,64%,1) 0px, transparent 50%),
radial-gradient(at 90% 95%, hsla(296,87%,70%,1) 0px, transparent 50%),
radial-gradient(at 73% 57%, hsla(276,62%,60%,1) 0px, transparent 50%),
radial-gradient(at 91% 26%, hsla(274,94%,65%,1) 0px, transparent 50%),
radial-gradient(at 78% 4%, hsla(122,77%,79%,1) 0px, transparent 50%),
radial-gradient(at 43% 81%, hsla(320,79%,67%,1) 0px, transparent 50%);
  box-shadow: 0 2px 5px #00000040;
}

/* Lines between options */

.css-19h42zx > hr {
  display: none;
}

/* Menu options hover */

.css-19h42zx > a:hover {
  background: light-dark(white, #171717);
  color: light-dark(#171717, white);
  transform: scale(1.05);
  box-shadow: 0 2px 5px #00000040;
}

/* Notif menu div fix */
.css-1qq679y {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: unset !important;
  right: 0 !important;
  width: auto;
  height: 100%;
  transform: unset !important;
  z-index: 3000;
}

/* new notifications menu */
/* Notif menu buttons icon colors */
.css-1g1g04k svg:not(.css-q0xxaj svg) {
  color: light-dark(#171717, white) !important;
}

.css-1qq679y button {
  border-radius: 32px !important;
}

.css-q0xxaj svg {
  color: #171717 !important;
}

/* Hide all backgrounds */
.css-1rl3sf5 > div:empty {
  background: transparent !important;
}

/* Background and font, border, colors */
.css-v8syye {
  background: light-dark(#FFFFFFBF, #171717BF);
  box-shadow: 0 2px 5px #00000040;
  padding: 20px;
  padding-top: 0;
  backdrop-filter: blur(5px);
  border-radius: 8px;
  font-family: 'DM Sans'; /* applies to almost all text */
  font-weight: 700; /* same as above */
}

/* Scrollbar bar (lol) (only works on mobile or webkit based browsers that don't override it with normal scrollbar properties (which are disabled)) */
.css-v8syye::-webkit-scrollbar-thumb {
  background: light-dark(#171717, white) !important; /* color of scrollbar */
  border-radius: 8px !important; /* optional */
  /* Everything needs the important */
}

/* Notif menu: top bar (optional) */
.css-tspj11 {
  padding-top: 1.25rem; /* looks nice */
  background-color:#ff99f5;
background-image:
radial-gradient(at 6% 33%, hsla(267,75%,76%,1) 0px, transparent 50%),
radial-gradient(at 37% 7%, hsla(337,94%,63%,1) 0px, transparent 50%),
radial-gradient(at 13% 27%, hsla(47,68%,63%,1) 0px, transparent 50%),
radial-gradient(at 91% 56%, hsla(205,79%,78%,1) 0px, transparent 50%),
radial-gradient(at 68% 3%, hsla(175,63%,79%,1) 0px, transparent 50%),
radial-gradient(at 54% 99%, hsla(52,63%,77%,1) 0px, transparent 50%),
radial-gradient(at 1% 34%, hsla(289,93%,77%,1) 0px, transparent 50%);
}

/* Notif menu top bar: header text */
.css-tspj11 h4 {
  font-size: ; /* optional */
  font-weight: 1000;
  font-family: 'DM Sans';
  text-transform: uppercase;
  color: #171717 !important; /* needs the important */
}

/* Notifications */
/* Notification boxes */
.css-tspj11 + div > div {
  background: light-dark(white, #171717);
  border-radius: 8px;
}

/* On hover */
.css-tspj11 + div > div:hover {
  background: light-dark(white, #171717);
  transform: scale(1.05);
  box-shadow: 0 2px 5px #00000040;
}

/* Notification box: first line of text (title) */
.css-mrzuup p:first-of-type {
  color: light-dark(#171717, white);
  font-weight: 700;
}

/* Notification: 2nd line of text (content) */
.css-mrzuup p:not(:first-of-type, :last-child) {
   color: light-dark(#171717, white);
   font-weight: normal;
}

/* Notification: Date text */
.css-mrzuup p:last-child {
  color: light-dark(#17171780, #FFFFFF80);
  font-weight: 700;
  font-family: 'DM Sans'; /* to replace monospace font */
}

/* New/unread notification boxes */
.css-tspj11 + div > div:has(div:empty) {
  /* Use this only in case you want new notifications to have a different background or other stuff */
}

/* New/unread notification bar */
.css-tspj11 + div > div > div:empty {
  width: 4px; /* default width */
  background-image: unset; /* or remove background and use a gradient here */
  background-color:#99ffe6;
background-image:
radial-gradient(at 9% 0%, hsla(300,90%,77%,1) 0px, transparent 50%),
radial-gradient(at 90% 10%, hsla(281,90%,70%,1) 0px, transparent 50%),
radial-gradient(at 20% 66%, hsla(34,76%,69%,1) 0px, transparent 50%),
radial-gradient(at 62% 27%, hsla(25,87%,60%,1) 0px, transparent 50%),
radial-gradient(at 70% 12%, hsla(173,65%,77%,1) 0px, transparent 50%),
radial-gradient(at 90% 52%, hsla(283,92%,63%,1) 0px, transparent 50%),
radial-gradient(at 0% 7%, hsla(346,99%,70%,1) 0px, transparent 50%);
  transition: all 300ms;
}

/* New/unread notification bar: change when hovering notification */
.css-tspj11 + div > div:has(div:empty):hover > div:empty {
  background: ;
}

/* Load more box and text */
.css-130w8n4 {
  border-radius: 8px;
  color: #FFFFFF;
  background-color:#ad99ff;
background-image:
radial-gradient(at 70% 31%, hsla(241,77%,69%,1) 0px, transparent 50%),
radial-gradient(at 30% 41%, hsla(286,97%,64%,1) 0px, transparent 50%),
radial-gradient(at 90% 95%, hsla(296,87%,70%,1) 0px, transparent 50%),
radial-gradient(at 73% 57%, hsla(276,62%,60%,1) 0px, transparent 50%),
radial-gradient(at 91% 26%, hsla(274,94%,65%,1) 0px, transparent 50%),
radial-gradient(at 78% 4%, hsla(122,77%,79%,1) 0px, transparent 50%),
radial-gradient(at 43% 81%, hsla(320,79%,67%,1) 0px, transparent 50%);
  box-shadow: 0 2px 5px #00000040;
  border: none; /* or remove it */
  font-family: 'DM Sans';
}

/* Load more box hover */
.css-130w8n4:hover,
.css-130w8n4:active {
  background: light-dark(white, #171717);
  color: light-dark(#171717, white);
}

/* END */



/* Background of the page */
.css-f6i8vf {
  background: light-dark(#FFF, #171717);
}

.css-1skvcpg,
.css-1j5h71i {
  opacity: 0;
  pointer-events: none;
}

.css-sdza1q {
  display: none;
}