F2U Template 01

<div class="intro">
  <p style="text-align: center">❝ Lorem ipsum dolor sit amet, consectetur adipiscing elit. ❞</p>
</div>

<p style="text-align: center; margin-bottom:10px">──── <span style="color:#ff00c6">୨୧</span> ────</p>

<img src="https://file.garden/ZxfgYtARnGdkL9Y1/JanitorAI/nagumo1.JPG" class="header">

<p style="text-align: center; margin-bottom:10px">──── <span style="color:#ff00c6">୨୧</span> ────</p>

<div class="box">
  <h3>About me</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<div class="box">
  <h3>About my bots</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<div class="box">
  <h3>About misc.</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<p style="text-align: center; margin-bottom:10px">──── <span style="color:#ff00c6">୨୧</span> ────</p>

<div class="credit"><p>template by <a href="https://janitorai.com/profiles/bcac6244-4071-492d-a82a-75481930eb73_profile-of-fishie-78">@fishie78</a></p></div>

<style>
.header {
box-sizing: border-box;
max-width: 100%;
flex-shrink: 1;
min-width: 0;
display: block;
margin: auto;
margin-bottom: 14px;
border-radius: 8px;
filter: contrast(108%) grayscale(1)
}
.intro p {
color:#c8c8c8;
font-family: "DM Sans";
font-size: 14px;
padding: 10px
}
.box {
box-sizing: border-box;
max-width: 100%;
color: #c8c8c8;
font-size: 14px;
border-radius: 5px;
border: 1px solid rgb(255,255,255,.1);
padding: 8px !important;
margin:0px 0px 15px 0px;
background: rgb(255,255,255,.05);
}
.box h3 {
font-family: "DM Sans";
font-size: 18px;
color: #ffffff;
}
.box p {
font-size: 14px;
color:#c8c8c8;
font-family: "DM Sans";
}
.credit p, .credit a{
color:#8c8c8c;
font-size: 14px;
}
.credit a:hover {
color: #b4b4b4;
transition: all 0.3s ease;
}
.pp-page-background {
background: linear-gradient(#ffffff,#c8c8c8) !important;
opacity: .95;
}
.css-0 {
background: none !important;
}
svg {
fill: #ffffff;
}
._bar_1lgb1_26 {
background: rgb(30,30,30,.7);
border-bottom: 1px solid #1e1e1e;
}
.css-13ge4f2 {
content: "";
color: #b8b8b8;
background: transparent;
font-family: "DM Sans";
}
.css-18v9xq {
color: #b8b8b8;
font-family: "DM Sans";
font-weight: 600;
}
._inputContainer_1d69i_26 {
border-radius: 8px;
font-family: "DM Sans";
border: 1px solid #646464;
background: rgb(255,255,255,.7);
padding-right: .5rem;
}
._searchIcon_1d69i_21 {
color:#7f7f7f;
opacity: .9;
}
._searchIcon_1d69i_21 svg {
fill: transparent;
}
._inputContainer_1d69i_26 {
color: grey;
}
._inputContainer_1d69i_26  input {
color: black;
}
.glow-on-hover {
background: #8e8e8e;
color: #646464;
border: 1px solid #505050;
border-radius: 11px;
padding:3px 7px;
font-family: "DM Sans";
font-weight: 600;
}
.glow-on-hover::before, .glow-logo:hover {
background: none;
color: #646464;
text-shadow: none;
}
.glow-on-hover::after {
background: #787878;
}
._container_1bfxv_1 a:hover {
color: #646464
}
._notificationsButton_fdp8b_7 svg {
fill: #ffffff
}
.css-fsfp0u img {
border-radius: 4px;
filter: grayscale(1);
}
.pp-top-bar-app-menu-list {
background: #373737;
border-radius: 7px;
}
.pp-top-bar-app-menu-list-item {
color: white;
font-family: "DM Sans";
font-size: 18px;
}
.pp-top-bar-app-menu-list-item:hover {
color: #ff00c6
}
.pp-top-bar-auth-buttons-login, .pp-top-bar-auth-buttons-register {
color: #b8b8b8;
font-family: "DM Sans";
font-weight: 600;
box-shadow: none;
}
.pp-top-bar-auth-buttons-login:hover, .pp-top-bar-auth-buttons-register:hover {
color: #969696
}
.pp-uc-background, .profile-background-box-1, .profile-background-box-2 {
background: transparent;
max-width: 0;
width: 100%;
overflow: hidden;
}
.pp-uc-background:hover {
box-shadow: none !important;
}
.profile-background-box-3 {
background: linear-gradient(#282828, #1e1e1e);
border: none;
border-radius: 10px;
box-shadow: none;
}
.css-1uodvt1 {
padding-top: 0px;
display: flex !important;
align-items: flex-start !important;
justify-content: flex-start !important;
margin: 0 auto 0px 0px !important;
position: relative !important;
width: 100% !important;
height: 100% !important;
}
.css-1uodvt1 > .css-8g8ihq {
flex: 1 !important;
background: transparent !important;
padding: 10px !important;
border-radius: 4px !important;
min-height: 120px !important;
}
.pp-uc-avatar {
height: 130px;
width: 130px;
border-radius: 5px;
border: none !important;
box-shadow: none !important;
top: 1px;
left:10px;
position: relative;
filter: grayscale(1) contrast(108%);
}
.pp-uc-title {
color: #ff00c6 !important;
font-size: 26px !important;
font-family: "DM Sans", sans-serif !important;
padding: 3px 12px !important;
}
.pp-uc-followers-count, .pp-uc-member-since {
font-family: "DM Sans", sans-serif !important;
font-weight: 400;
font-size: 13px;
color: #969696;
background: transparent;
line-height: .7;
text-align: left;
padding-left: 12px;
}
.css-hjkukh {
display: none;
}
.css-p5wazl:not(:empty) {
margin-top: 10px;
}
.Btn {
display: inline-block;
position: relative;
background-color: #AAA;
background-image: linear-gradient( hsla(0, 0%, 100%, 0.6), hsla(0, 0%, 100%,0), hsla(0, 0%, 0%, 0.3) 50%, hsla(0, 0%, 100%, 0.2));
font-family: "DM Sans";
font-size: 18px;
font-weight: 600;
color: white;
padding: 9px 12px;
text-shadow: 0 0 15px hsla(0, 0%, 100%, 1), 0 2px 4px hsla(0, 0%, 0%, 0.7);
border: none;
border-radius: 13px;
box-shadow: inset 0 -5px 20px hsla(0, 0%, 0%, 0.4), inset 0 5px 20px hsla(0, 0%, 100%, 0.4),  -8px 8px 5px hsla(0, 0%, 0%, 0.15), 5px 18px 10px hsla(0, 0%, 0%, 0.2);
cursor: pointer;
background-color: #ff00c6
}
.Btn[data-following='false']:before {
content: '';
display: block;
position: absolute;
left: 8px;
width: 85px;
top: 4px;
height: 10px;
border-radius: 17px;
background: linear-gradient(hsla(0, 0%, 100%, 0.8), hsla(0, 0%, 100%, 0));
}
.Btn[data-following='true']:before {
content: '';
display: block;
position: absolute;
left: 8px;
width: 115px;
top: 4px;
height: 10px;
border-radius: 17px;
background: linear-gradient(hsla(0, 0%, 100%, 0.8), hsla(0, 0%, 100%, 0));
}
.css-e9kr8m {
font-family: "DM Sans";
font-size: 18px;
}
.pp-tabs-wrapper {
border-color: transparent;
background: transparent;
}
.css-1jj3srb[aria-selected="true"], .css-1y3jyt3, .css-1jj3srb[data-selected] {
display:none;
}
.pp-tabs-indicator {
display: none;
}
.Btn2-purple, .Btn2-purple:before {
transition: none;
background: transparent;
border: none;
box-shadow: none;
font-family: "DM Sans";
}
.Btn2-purple:hover {
text-shadow: none;
pointer-events: none;
}
.pp-pg-total-count, .pp-pg-total-text {
font-weight: 500;
color: #646464;
font-size: 15px;
}
._searchInput_1tkkb_1 {
color:#a0a0a0;
font-family: "DM Sans";
font-size: 14px;
border: 1px solid #a0a0a0;
border-radius: 5px;
background: rgb(0, 0, 0, 0);
}
._searchInput_1tkkb_1:hover, ._searchInput_1tkkb_1:focus {
border: 1px solid #a0a0a0;
box-shadow: none;
outline: none;
background: rgb(0, 0, 0, .1);
}
._searchInput_1tkkb_1::placeholder {
color:#a0a0a0 !important;
}
.pp-fl-filter-button {
outline: 1px solid #a0a0a0;
outline-offset: 0px;
border-radius: 5px;
padding: 0px 5px 0px 5px;
background: transparent;
}
.pp-fl-filter-button svg {
fill: #a0a0a0;
}
.pp-fl-filter-button:hover {
outline: 1px solid #a0a0a0;
outline-offset: -1px;
border-radius: 5px;
padding: 0px 5px 0px 5px;
background: rgb(0, 0, 0, .1);
}
 ._tag_1fwqk_6 {
border: none !important;
border-radius: 5px;
color: #c8c8c8;
background: rgba(255, 255, 255, 0.1);
font-family: "DM Sans";
}
._tag_1fwqk_6:hover {
color: #ff00c6;
 }
._motionDiv_1lgbq_142 {
flex-shrink: 0;
will-change: transform;
border: none;
border-radius: 5px;
background: transparent;
}
._tagSelected_1fwqk_42 {
box-shadow: 0 0 20px color-mix(in srgb,#ff00c6 40%,transparent),inset 0 0 20px color-mix(in srgb,#ff00c6 15%,transparent);
color: color-mix(in srgb,#ff00c6 90%,white);
text-shadow: 0 0 15px color-mix(in srgb,#ff00c6 40%,transparent),0 0 25px color-mix(in srgb,#ff00c6 30%,transparent);
}
.transparent .react-select__control, .transparent .react-select__single-value {
border-color: #a0a0a0;
border-radius: 5px;
color:#a0a0a0;
font-family: "DM Sans";
font-size: 14px;
font-weight: 400;
}
.transparent .react-select__control:hover {
border-color: #a0a0a0;
border-radius: 5px;
color:#a0a0a0;
font-family: "DM Sans";
font-size: 14px;
font-weight: 400;
background: rgb(0, 0, 0, .1);
}
.transparent .react-select__indicator-separator {
background-color: #a0a0a0;
}
.transparent .react-select__control svg {
fill: #a0a0a0;
}
.dark .react-select__menu,
.colored .react-select__menu,
.transparent .react-select__menu,
.react-select__menu-portal .react-select__menu {
font-family: "DM Sans";
font-weight: 600;
}
.dark .react-select__option,
.colored .react-select__option,
.transparent .react-select__option,
.react-select__menu-portal .react-select__option {
color: #ff00c6;
}
.pp-cc-wrapper, profile-character-card-wrapper, .pp-cc-gradient-1, .pp-cc-gradient-2, .pp-cc-gradient-3 {
background: transparent !important;
border-color: transparent !important;
}
.pp-cc-wrapper:hover {
box-shadow: none;
}
.profile-character-card-stack {
border-radius: 8px;
background: linear-gradient(#282828, #1e1e1e);
box-shadow: none !important;
}
.profile-character-card-stack:hover {
transform: translateY(-6px);
transition: all 0.3s ease;
}
.profile-character-card-stack-link-component-box {
border-bottom: 1px solid #1e1e1e;
border-radius: 8px 8px 0 0;
padding: 3px !important;
background: #1e1e1e  !important;
}
.pp-cc-name {
font-family: "DM Sans";
font-size: 14px;
letter-spacing: .4px;
color: #ffffff;
text-align: center;
text-shadow: none !important;
text-transform: none;
}
.pp-cc-name:before {
content:"› ";
color: #ff00c6;
font-weight: 700;
}
.profile-character-card-avatar-image {
border-radius: 0px;
filter: grayscale(1) contrast(108%);
border-left: 1px solid #282828;
border-right: 1px solid #282828;
}
.profile-character-card-avatar-image:hover {
border-radius: 0px;
filter: grayscale(0) contrast(108%);
transition: all 0.3s ease;
}
.pp-cc-ribbon-wrap {
background: #ff00c69e !important;
}
.pp-cc-ribbon-wrap svg {
fill: #ff00c69e !important;
}
.css-euh5x6, .pp-cc-chats-count {
color:#ffffff !important;
font-family: "DM Sans" !important;
font-weight: 500 !important;
}
.profile-character-card-creator-name-box {
display: none !important;
}
.pp-cc-description {
color: #c8c8c8 !important;
font-family: "DM Sans";
font-size: 12px;
}
.pp-cc-star-line {
border-top: 1px solid #646464;
width: 100%;
}
.pp-cc-star {
display: none;
visibility: hidden;
}
.pp-cc-tags {
margin-bottom: 18px;
}
.pp-tag-limitless, .pp-cc-tags-regular, .pp-cc-tags-custom {
border-radius: 3px;
border:1px solid #5d5d5d;
background: transparent;
font-family: "DM Sans";
font-weight: 300;
color: #b4b4b4;
padding: 2px 3px;
box-shadow: none !important;
}
.pp-cc-tags-regular:hover, .pp-cc-tags-custom:hover {
border-radius: 3px;
border:1px solid #5d5d5d;
background: transparent;
font-family: "DM Sans";
font-weight: 300;
color: #b4b4b4;
box-shadow: none !important;
transform: scale(1.04);
}
.pp-cc-tokens-count, .css-s6yl5v {
font-family: "DM Sans";
font-weight: 500;
color: #7f7f7f;
margin-bottom: 2px;
text-shadow: none !important;
}
.css-nip9dx, .css-xrg4vd, .css-5v5qgx, .css-1wqmh16 {
display: none !important;
}
._pageButtonActive_5a6y6_130 {
color: #f0f0f0;
background: rgb(0,0,0,.2) !important;
border: none !important;
padding: 1px 11px;
}
._navButton_5a6y6_84 svg {
fill: #a0a0a0;
}
._footer_b4zg4_1 {
padding: 12px 16px;
background: transparent;
color: rgb(0,0,0,.5);
font-size: 14px;
font-family: "DM Sans";
min-height: 48px;
z-index: 1;
}
._container_b4zg4_23 a {
color: rgb(0,0,0,.5);
}
._separator_b4zg4_68 {
color: rgb(0,0,0,.5);
}
.css-1rokoft, .profile-top-bar-title {
font-family: "DM Sans";
}
.pp-mnb-container svg {
fill: rgb(255,255,255,.6);
}
</style>