Minimalist CSS Template

<style>

#root > div {
background: #f0ece3 !important;
}

.pp-page-background {
filter: none;
}

.pp-page-background::after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(240,236,227,0.3);
}

@media screen and (min-width: 1025px) {
.profile-page-flex {
flex-direction: row-reverse;
}
}

*:hover {
box-shadow: none !important;
}

header {
height: 4rem;
}

.pp-top-bar {
position: fixed;
top: 0;
width: 96%;
left: 2%;
border-radius: 0 0 20px 20px;
background: #faf8f3 !important;
border: 1px solid #d4cfc4 !important;
border-top: none !important;
}

.pp-top-bar-search {
background: #ede9e0 !important;
border: 1px solid #d4cfc4 !important;
border-radius: 99px !important;
}

#search-input::placeholder {
font-family: Raleway;
color: #b0aa9e;
}

.pp-top-bar-create-char {
font-family: Raleway !important;
color: #6a8a5a !important;
font-size: 0 !important;
}

.pp-top-bar-create-char::after {
content: 'Create a Character';
font-size: 13px !important;
color: #6a8a5a !important;
font-family: Raleway !important;
}

.glow-logo h2 {
font-family: Raleway !important;
font-weight: 700 !important;
color: #3a3530 !important;
}

.pp-top-bar-logo-sub-name {
display: none;
}

svg {
color: #8a9e7a !important;
}

.pp-top-bar-app-menu-list {
background: #faf8f3 !important;
border: 1px solid #d4cfc4 !important;
border-radius: 12px !important;
}

.pp-top-bar-app-menu-list a {
color: #5a5548 !important;
font-family: Raleway !important;
}

.css-1uodvt1 {
background: #faf8f3 !important;
border: 1px solid #ddd8ce !important;
border-radius: 12px !important;
}

.css-1uodvt1 * {
font-family: Raleway !important;
color: #5a5548 !important;
}

.pp-uc-title {
font-family: Raleway !important;
font-weight: 700 !important;
color: #3a3530 !important;
}

.pp-uc-avatar-container {
border: 3px solid #c8d4be !important;
border-radius: 10px !important;
}

.pp-uc-followers-count {
font-family: Raleway !important;
font-size: 11px !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
color: #a09888 !important;
}

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

.pp-uc-followers-count > span + span::after {
content: "followers";
font-size: 11px !important;
font-family: Raleway !important;
}

.pp-uc-member-since {
font-family: Raleway !important;
color: #b0aa9e !important;
font-size: 11px !important;
}

.pp-uc-about-me {
background: transparent !important;
border: none !important;
}

.pp-uc-about-me * {
font-family: Raleway !important;
color: #7a7060 !important;
}

.pp-uc-about-me a {
color: #6a8a5a !important;
}

.Btn {
background: #e8f0e0 !important;
border: 1px solid #c8d4be !important;
border-radius: 99px !important;
transition: all 0.2s !important;
}

.Btn:hover {
background: #d8e8d0 !important;
transform: none !important;
}

.Btn > span {
font-size: 0 !important;
}

.Btn span::after {
content: "Follow";
font-size: 12px !important;
color: #6a8a5a !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
font-family: Raleway !important;
}

.Btn[data-following=true] span::after {
content: "Unfollow";
color: #a09888 !important;
}

.css-15w88gn {
background: #faf8f3 !important;
border: 1px solid #d4cfc4 !important;
border-radius: 99px !important;
}

.pp-tabs-indicator {
background: #8a9e7a !important;
}

#profile-tabs::before {
content: 'Characters';
font-family: Raleway;
font-weight: 700;
font-size: clamp(1.8rem, 3vw, 2.4rem);
letter-spacing: -1px;
color: #3a3530;
width: 100%;
border-bottom: 2px solid #d4cfc4;
display: block;
margin-bottom: 8px;
}

#profile-tabs > div[role="tablist"] > button {
font-family: Raleway !important;
color: #a09888 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
font-size: 11px !important;
background: #faf8f3 !important;
border: 1px solid #d4cfc4 !important;
border-radius: 0 0 8px 8px !important;
}

#profile-tabs > div[role="tablist"] > button[aria-selected="true"] {
color: #3a3530 !important;
border-color: #8a9e7a !important;
}

.css-1y3jyt3 {
background: #d4cfc4 !important;
}

.Btn2-purple {
background: transparent !important;
border: 1px solid #d4cfc4 !important;
border-radius: 99px !important;
}

.Btn2-purple strong {
font-family: Raleway !important;
color: #a09888 !important;
}

.pp-pg-total p {
font-size: 0 !important;
}

.pp-pg-total p::after {
content: "bots";
font-size: 11px !important;
font-family: Raleway !important;
color: #a09888 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
}

.pp-fl-search-input {
font-family: Raleway !important;
background: #faf8f3 !important;
border: 1px solid #d4cfc4 !important;
border-radius: 99px !important;
color: #5a5548 !important;
}

.pp-fl-search-input:focus {
border-color: #8a9e7a !important;
box-shadow: none !important;
}

:is(.css-1n2in4t, .css-8l42c1) {
background: #faf8f3 !important;
border: 1px solid #d4cfc4 !important;
border-radius: 99px !important;
}

.css-b62m3t-container {
background: #faf8f3 !important;
border: 1px solid #d4cfc4 !important;
border-radius: 99px !important;
}

.react-select__control {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}

.react-select__single-value {
color: #7a7060 !important;
font-family: Raleway !important;
font-size: 13px !important;
}

.react-select__menu {
background: #faf8f3 !important;
border: 1px solid #d4cfc4 !important;
border-radius: 12px !important;
}

.react-select__option {
background: transparent !important;
color: #7a7060 !important;
font-family: Raleway !important;
}

.react-select__option:hover {
background: #e8f0e0 !important;
color: #3a3530 !important;
}

div:has(> div > .profile-character-card-stack) {
display: flex;
flex-flow: row wrap;
justify-content: center;
}

div:has(> .profile-character-card-stack) {
flex: 0 1 220px;
}

.profile-character-card-stack {
background: #faf8f3 !important;
border: 1px solid #ddd8ce !important;
border-radius: 8px !important;
transition: all 0.3s ease !important;
}

.pp-cc-wrapper:hover .profile-character-card-stack {
border-color: #8a9e7a !important;
transform: translateY(-3px) !important;
}

.profile-character-card-stack * {
font-family: Raleway !important;
color: #5a5548 !important;
}

.pp-cc-name {
font-weight: 700 !important;
color: #3a3530 !important;
letter-spacing: 1px !important;
}

.pp-cc-description p {
color: #9a9080 !important;
font-size: 12px !important;
line-height: 1.7 !important;
}

.pp-cc-avatar {
filter: brightness(0.95) !important;
mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
}

._content_1chl9_11 {
background: #8a9e7a !important;
box-shadow: none !important;
}

.pp-cc-chats {
color: #fff !important;
font-family: Raleway !important;
}

.pp-cc-chats-count {
color: #fff !important;
}

.pp-cc-star-line {
border-color: #ede9e1 !important;
}

.pp-cc-tags-item {
background: #e8f0e0 !important;
border: 1px solid #c8d4be !important;
border-radius: 99px !important;
color: #6a8a5a !important;
font-family: Raleway !important;
font-size: 11px !important;
}

.pp-tag-limitless {
background: #8a9e7a !important;
border-color: #7a8e6a !important;
color: #fff !important;
}

.pp-cc-creator-name {
display: none !important;
}

[class*="notificationsPopover"] {
background: #faf8f3 !important;
border: 1px solid #d4cfc4 !important;
border-radius: 12px !important;
}

[class*="notificationsPopover"] * {
font-family: Raleway !important;
color: #5a5548 !important;
}

[class*="popoverTitle"] {
color: #3a3530 !important;
font-weight: 700 !important;
}

[class*="notificationsBadge"] {
background: #8a9e7a !important;
}

[class*="unreadIndicator"] {
background: #8a9e7a !important;
}

[class*="timestamp"] {
color: #b0aa9e !important;
font-size: 11px !important;
}

.css-jdhqy4 > div {
background: #faf8f3 !important;
border: 1px solid #d4cfc4 !important;
border-radius: 8px !important;
color: #5a5548 !important;
font-family: Raleway !important;
}

footer * {
font-family: Raleway !important;
color: #b0aa9e !important;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #f0ece3; }
::-webkit-scrollbar-thumb {
background: #c8d4be;
border-radius: 99px;
}

</style>

<div style="font-family:Raleway,sans-serif;color:#5a5548;padding:16px 0;">

<div style="background:#faf8f3;border:1px solid #ddd8ce;border-radius:12px;padding:16px 20px;margin-bottom:12px;">
<div style="font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#8a9e7a;margin-bottom:8px;">Status</div>
<div style="border-left:2px solid #c8d4be;padding-left:12px;font-size:13px;color:#9a9080;line-height:1.8;font-style:italic;">write your current status here!</div>
</div>

<table style="width:100%;border-collapse:separate;border-spacing:12px 0;margin-bottom:12px;">
<tr style="vertical-align:top;">

<td style="width:55%;">
<div style="background:#faf8f3;border:1px solid #ddd8ce;border-radius:12px;padding:16px 20px;margin-bottom:12px;">
<div style="font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#8a9e7a;margin-bottom:8px;">About Me</div>
<div style="height:1px;background:#ede9e1;margin-bottom:10px;"></div>
<div style="font-size:13px;color:#7a7060;line-height:1.9;">write your about me here. tell people who you are, your age, pronouns, what you make.<br><br>second paragraph here!</div>
</div>
<div style="background:#faf8f3;border:1px solid #ddd8ce;border-radius:12px;padding:16px 20px;">
<div style="font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#8a9e7a;margin-bottom:8px;">Upcoming Bots</div>
<div style="height:1px;background:#ede9e1;margin-bottom:10px;"></div>
<table style="width:100%;border-collapse:separate;border-spacing:7px;">
<tr>
<td style="background:#f0ece3;border:1px solid #d4cfc4;border-radius:8px;padding:12px;vertical-align:top;">
<div style="font-size:12px;font-weight:700;color:#5a5548;margin-bottom:3px;">Bot Name</div>
<div style="font-size:11px;color:#9a9080;line-height:1.6;">short description here</div>
<div style="margin-top:7px;font-size:10px;letter-spacing:2px;color:#8a9e7a;text-transform:uppercase;">coming soon</div>
</td>
<td style="background:#f0ece3;border:1px solid #d4cfc4;border-radius:8px;padding:12px;vertical-align:top;">
<div style="font-size:12px;font-weight:700;color:#5a5548;margin-bottom:3px;">Bot Name</div>
<div style="font-size:11px;color:#9a9080;line-height:1.6;">short description here</div>
<div style="margin-top:7px;font-size:10px;letter-spacing:2px;color:#8a9e7a;text-transform:uppercase;">coming soon</div>
</td>
</tr>
</table>
</div>
</td>

<td style="width:45%;">
<div style="background:#faf8f3;border:1px solid #ddd8ce;border-radius:12px;padding:16px 20px;margin-bottom:12px;">
<div style="font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#8a9e7a;margin-bottom:8px;">Tags</div>
<div style="height:1px;background:#ede9e1;margin-bottom:10px;"></div>
<div style="margin-bottom:12px;">
<span style="display:inline-block;background:#e8f0e0;border:1px solid #c8d4be;border-radius:99px;padding:4px 13px;font-size:11px;color:#6a8a5a;margin:3px;">tag</span>
<span style="display:inline-block;background:#e8f0e0;border:1px solid #c8d4be;border-radius:99px;padding:4px 13px;font-size:11px;color:#6a8a5a;margin:3px;">tag</span>
<span style="display:inline-block;background:#e8f0e0;border:1px solid #c8d4be;border-radius:99px;padding:4px 13px;font-size:11px;color:#6a8a5a;margin:3px;">tag</span>
<span style="display:inline-block;background:#e8f0e0;border:1px solid #c8d4be;border-radius:99px;padding:4px 13px;font-size:11px;color:#6a8a5a;margin:3px;">tag</span>
<span style="display:inline-block;background:#e8f0e0;border:1px solid #c8d4be;border-radius:99px;padding:4px 13px;font-size:11px;color:#6a8a5a;margin:3px;">tag</span>
</div>
<div style="font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#c4826a;margin-bottom:8px;">No</div>
<div>
<span style="display:inline-block;background:#f5ece8;border:1px solid #e0c8be;border-radius:99px;padding:4px 13px;font-size:11px;color:#b07060;margin:3px;">no tag</span>
<span style="display:inline-block;background:#f5ece8;border:1px solid #e0c8be;border-radius:99px;padding:4px 13px;font-size:11px;color:#b07060;margin:3px;">no tag</span>
<span style="display:inline-block;background:#f5ece8;border:1px solid #e0c8be;border-radius:99px;padding:4px 13px;font-size:11px;color:#b07060;margin:3px;">no tag</span>
</div>
</div>

<div style="background:#faf8f3;border:1px solid #ddd8ce;border-radius:12px;padding:16px 20px;margin-bottom:12px;">
<div style="font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#8a9e7a;margin-bottom:8px;">Links</div>
<div style="height:1px;background:#ede9e1;margin-bottom:10px;"></div>
<table style="width:100%;border-collapse:separate;border-spacing:0 6px;">
<tr><td><a href="#" style="display:block;background:#e8f0e0;border:1px solid #c8d4be;border-radius:99px;padding:9px 16px;text-align:center;font-size:11px;letter-spacing:2px;color:#6a8a5a;text-decoration:none;text-transform:uppercase;">Discord</a></td></tr>
<tr><td><a href="#" style="display:block;background:#e8f0e0;border:1px solid #c8d4be;border-radius:99px;padding:9px 16px;text-align:center;font-size:11px;letter-spacing:2px;color:#6a8a5a;text-decoration:none;text-transform:uppercase;">Form Request</a></td></tr>
<tr><td><a href="#" style="display:block;background:#e8f0e0;border:1px solid #c8d4be;border-radius:99px;padding:9px 16px;text-align:center;font-size:11px;letter-spacing:2px;color:#6a8a5a;text-decoration:none;text-transform:uppercase;">Other Link</a></td></tr>
</table>
</div>

<div style="background:#faf8f3;border:1px solid #ddd8ce;border-radius:12px;padding:16px 20px;">
<div style="font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#8a9e7a;margin-bottom:8px;">Friends</div>
<div style="height:1px;background:#ede9e1;margin-bottom:10px;"></div>
<table style="width:100%;border-collapse:separate;border-spacing:5px;">
<tr>
<td style="width:33%;text-align:center;vertical-align:top;">
<span style="display:inline-block;width:100%;">
<a href="FRIEND_LINK"><img src="FRIEND_IMG" style="width:100%;border-radius:8px 8px 0 0;border:1px solid #ddd8ce;display:block;"></a>
<span style="display:block;background:#f0ece3;padding:5px 4px;text-align:center;font-size:9px;letter-spacing:2px;color:#8a9e7a;border:1px solid #ddd8ce;border-top:none;border-radius:0 0 8px 8px;text-transform:uppercase;">friend</span>
</span>
</td>
<td style="width:33%;text-align:center;vertical-align:top;">
<span style="display:inline-block;width:100%;">
<a href="FRIEND_LINK"><img src="FRIEND_IMG" style="width:100%;border-radius:8px 8px 0 0;border:1px solid #ddd8ce;display:block;"></a>
<span style="display:block;background:#f0ece3;padding:5px 4px;text-align:center;font-size:9px;letter-spacing:2px;color:#8a9e7a;border:1px solid #ddd8ce;border-top:none;border-radius:0 0 8px 8px;text-transform:uppercase;">friend</span>
</span>
</td>
<td style="width:33%;text-align:center;vertical-align:top;">
<span style="display:inline-block;width:100%;">
<a href="FRIEND_LINK"><img src="FRIEND_IMG" style="width:100%;border-radius:8px 8px 0 0;border:1px solid #ddd8ce;display:block;"></a>
<span style="display:block;background:#f0ece3;padding:5px 4px;text-align:center;font-size:9px;letter-spacing:2px;color:#8a9e7a;border:1px solid #ddd8ce;border-top:none;border-radius:0 0 8px 8px;text-transform:uppercase;">friend</span>
</span>
</td>
</tr>
</table>
</div>
</td>

</tr>
</table>

<div style="text-align:center;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#c4bfb4;padding-top:8px;">free template by @exoreli · credit if using please ♡</div>

</div>