soooooooooooooo for the people who wants basic css code its righ here:

<style>

/* ═══════════════════════════════

🍒 CHERRIE BABES PROFILE

═══════════════════════════════ */

/* 🍒 Profile Avatar */

.pp-uc-avatar {

border-radius: 50% !important;

object-fit: cover !important;

border: 3px solid #ffc1d9 !important;

box-shadow:

0 0 5px #ffd6e5,

0 0 10px #ffb6d1,

0 0 20px rgba(255, 182, 209, 0.8) !important;

overflow: hidden !important;

}

/* 🍒 Profile Title */

.pp-uc-title {

font-size: 0 !important;

}

.pp-uc-title::after {

content: "🍒 Cherry pop 🍒" !important;

font-size: 28px !important;

color: #ad1047 !important;

font-weight: bold !important;

text-shadow: 0 0 8px #ffffff !important;

}

/* 🖤 Janitor AI Logo */

.pp-top-bar-logo-name {

width: auto !important;

font-size: 0 !important;

}

.pp-top-bar-logo > * {

display: none !important;

}

.pp-top-bar-logo::after {

content: "Cherrie Babes" !important;

display: inline-block !important;

font-size: 24px !important;

color: #d1859f !important;

font-weight: bold !important;

text-shadow: 0 0 6px #bc72df !important;

}

/* 🍷 Maroon Top Bar */

.pp-top-bar,

.profile-top-bar {

background: #7d0d34 !important;

background-color: #7d0d34 !important;

background-image: none !important;

border-bottom: 2px solid #ff70a5 !important;

box-shadow:

0 2px 12px rgba(230, 0, 84, 0.5) !important;

}

/* 🔔 Gold Notification Bell */

.pp-top-bar-notifications-icon {

color: #ffffff !important;

border: 2px solid #d4af37 !important;

border-radius: 50% !important;

box-shadow:

0 0 5px rgba(212, 175, 55, 0.7),

0 0 10px rgba(212, 175, 55, 0.35) !important;

transition: all 0.3s ease !important;

}

/* 🔔 Bigger Bell */

.pp-top-bar-notifications-icon svg {

width: 50px !important;

height: 50px !important;

}

/* ✨ Bell Hover */

.pp-top-bar-notifications-icon:hover {

color: #fffdf5 !important;

border-color: #f0d477 !important;

box-shadow:

0 0 7px rgba(240, 212, 119, 0.9),

0 0 16px rgba(212, 175, 55, 0.55) !important;

transform: scale(1.08);

}

/* ═══════════════════════════════

🌺 FLOWER FALL — LAYER 1

═══════════════════════════════ */

body::before {

content:

"🌺 🌺 🌺 🌺 🌺"

" 🌺 🌺 🌺 🌺"

"🌺 🌺 🌺 🌺 🌺"

" 🌺 🌺 🌺 🌺"

"🌺 🌺 🌺 🌺 🌺"

" 🌺 🌺 🌺 🌺"

"🌺 🌺 🌺 🌺 🌺"

" 🌺 🌺 🌺 🌺"

"🌺 🌺 🌺 🌺 🌺";

white-space: pre;

position: fixed;

top: -400px;

left: 0;

width: 100vw;

font-size: 32px;

line-height: 80px;

letter-spacing: 8px;

: 9999;

pointer-events: none;

animation: hibiscusFall 15s linear infinite;

filter:

drop-shadow(0 0 6px #ffd6e5);

}

/* ═══════════════════════════════

🌸 FLOWER FALL — LAYER 2

═══════════════════════════════ */

body::after {

content:

" 🌺 🌺 🌺 🌺"

"🌺 🌺 🌺 🌺"

" 🌺 🌺 🌺 🌺"

"🌺 🌺 🌺 🌺"

" 🌺 🌺 🌺 🌺";

white-space: pre;

position: fixed;

top: -600px;

left: 0;

width: 100vw;

font-size: 27px;

line-height: 95px;

letter-spacing: 12px;

: 9998;

pointer-events: none;

animation: hibiscusFallTwo 20s linear infinite;

animation-delay: -10s;

filter:

drop-shadow(0 0 6px #ffcce0);

}

/* ═══════════════════════════════

🌷 FLOWER FALL — LAYER 3

═══════════════════════════════ */

.pp-page-background::after {

content:

"🌺 🌺 🌺 🌺 🌺"

" 🌺 🌺 🌺 🌺"

"🌺 🌺 🌺 🌺 🌺"

" 🌺 🌺 🌺 🌺"

"🌺 🌺 🌺 🌺 🌺"

" 🌺 🌺 🌺 🌺"

"🌺 🌺 🌺 🌺 🌺"

" 🌺 🌺 🌺 🌺"

"🌺 🌺 🌺 🌺 🌺";

white-space: pre;

position: fixed;

top: -700px;

left: 0;

width: 100vw;

font-size: 23px;

line-height: 105px;

letter-spacing: 18px;

: 9997;

pointer-events: none;

opacity: 0.75;

animation: hibiscusFallThree 36s linear infinite;

animation-delay: -10s;

filter:

drop-shadow(0 0 5px #ffd6e5);

}

/* ═══════════════════════════════

🖤 FLOATING CORNER IMAGE

LEFT SIDE

═══════════════════════════════ */

.pp-page-background::before {

content: "" !important;

position: fixed !important;

left: 25px !important;

bottom: 25px !important;

width: 150px !important;

height: 150px !important;

background-image:

url("https://i.pinimg.com/1200x/f1/12/b5/f112b5dc27789cb8dd6366b267091567.jpg") !important;

background-size: contain !important;

background-repeat: no-repeat !important;

background-position: center !important;

: 9996 !important;

pointer-events: none !important;

filter:

drop-shadow(0 0 2px #d4af37)

drop-shadow(0 0 6px #7d0d34)

drop-shadow(0 0 12px rgba(212, 175, 55, 0.5)) !important;

animation:

cornerFloat 4s ease-in-out infinite !important;

}

/* ═══════════════════════════════

🌺 FLOWER ANIMATION 1

═══════════════════════════════ */

@keyframes hibiscusFall {

0% {

transform:

translateY(-400px)

rotate(0deg);

opacity: 0;

}

8% {

opacity: 1;

}

50% {

transform:

translateY(50vh)

rotate(5deg);

}

100% {

transform:

translateY(120vh)

rotate(-5deg);

opacity: 0;

}

}

/* ═══════════════════════════════

🌸 FLOWER ANIMATION 2

═══════════════════════════════ */

@keyframes hibiscusFallTwo {

0% {

transform:

translateY(-600px)

rotate(0deg);

opacity: 0;

}

10% {

opacity: 0.8;

}

50% {

transform:

translateY(50vh)

rotate(-6deg);

}

100% {

transform:

translateY(120vh)

rotate(6deg);

opacity: 0;

}

}

/* ═══════════════════════════════

🌷 FLOWER ANIMATION 3

═══════════════════════════════ */

@keyframes hibiscusFallThree {

0% {

transform:

translateY(-700px)

rotate(-2deg);

opacity: 0;

}

10% {

opacity: 0.75;

}

50% {

transform:

translateY(50vh)

rotate(7deg);

}

100% {

transform:

translateY(125vh)

rotate(-7deg);

opacity: 0;

}

}

/* ═══════════════════════════════

🖤 CORNER IMAGE FLOAT

═══════════════════════════════ */

@keyframes cornerFloat {

0% {

transform:

translateY(0)

rotate(0deg);

}

50% {

transform:

translateY(-10px)

rotate(1deg);

}

100% {

transform:

translateY(0)

rotate(0deg);

}

}

</style>

soo Eun this is what it looks like for now.... im just using my page just to test it on and i just wanted your opinion on if you want some changes