My code:

⎗
✓
<div class="css-cardthingie">

<p class="t-color1 t-title">
  title
</p>

<p class="t-color2 t-subtitle">
  subtitle
</p>

<p class="p-spacer"></p>

<span class="t-color2" style="
  font-style: italic;">
  "quote"
  <span style="font-style: normal">
    — quote author
  </span>
</span>

<p class="css-spacer"></p>

<div class="t-terminal">   <!-- Change 'user' to what you want to be called by, and change 'computerName' to whatever you want. -->
  <div class="titlebar">
    user@computerName: ~ — Terminal
  </div>
  <div class="content">
    <div class="host">
      user@computerName: ~
    </div>
    <span class="prompt">
      user@computerName:~$
    </span>
    <span>     <!-- Change 'sudo rm -rf /*' to whatever code you want. -->
      sudo rm -rf /*</span><span class="cursor">_</span>
  </div>
</div>

<p class="css-spacer"></p>

<div class="tags-wrap">
  <div class="tags">     <!-- Change 'Series1', 'Series2', etc to the tag of the series. Change 'Series 1', 'Series 2', etc to the name of the series. Change 'Username' to your username. -->
    <a href="https://janitorai.com/search/Series1?search=Username" class="tag">Series 1</a>
    <a href="https://janitorai.com/search/Series2?search=Username" class="tag">Series 2</a>
    <a href="https://janitorai.com/search/Series3?search=Username" class="tag">Series 3</a>
    <a href="https://janitorai.com/search/Series4?search=Username" class="tag">Series 4</a>
    <a href="https://janitorai.com/search/Series5?search=Username" class="tag">Series 5</a>
  </div>
</div>

<p class="css-spacer"></p>

<p class="t-color2" style="
  font: 700 188%/1.33 Jura;">
  Bot Suggestions Status
</p>
<p class="t-color1">
  Bot suggestions status subtitle
</p>

<p class="css-spacer"></p>

<details class="details">
  <summary>
    <div class="section-background"></div>
    <div class="menu-p">
      <div class="r-circle"></div>
      <div class="y-circle"></div>
      <div class="g-circle"></div>
    </div>
    <span class="t-color1 details-button">
      ❖ Information
    </span>
    <small class="t-color2 block details-subtitle">
      Clickable
    </small>
  </summary>
  <div class="content">
    <div class="content-grid">
      <p class="p-spacer"></p>
      <strong style="color: red;">
        [insert disclaimer]
      </strong>
      <p> </p>
      <p>
        [paragraph 1]
      </p>
      <p style="height: 1em;"></p>
      <p>
        [paragraph 2]
      </p>
      <p class="p-spacer"></p>
      <p>
        [extra info]
      </p>
    </div>
  </div>
</details>

<p class="css-spacer"></p>

<details class="details">
  <summary>
    <div class="section-background"></div>
    <div class="menu-p">
      <div class="r-circle"></div>
      <div class="y-circle"></div>
      <div class="g-circle"></div>
    </div>
    <span class="t-color1 details-button">
      ❖ Favorite Anime
    </span>
    <small class="t-color2 block details-subtitle">
      Clickable
    </small>
  </summary>
  <div class="content">
    <div class="content-grid">
      <p style="height: 2em"></p>
      <small style="
        text-align: left;
        margin-left: 4rem;
        letter-spacing: 0;">
        [message for anime]
      </small>
      <p style="height: 2em;"></p>
      <ul class="anime-list">
        <li class="anime1">
          Anime 1
        </li>
        <li class="anime2">
          Anime 2
        </li>
        <li class="anime3">
          Anime 3
        </li>
        <li class="anime4">
          Anime 4
        </li>
        <li class="anime5">
          Anime 5
        </li>
        <li class="anime6">
          Anime 6
        </li>
        <li class="anime7">
          Anime 7
        </li>
        <li class="anime8">
          Anime 8
        </li>
        <li class="anime9">
          Anime 9
        </li>
      </ul>
    </div>
  </div>
</details>

<p class="css-spacer"></p>

<strong class="section-header">
  ❖ My Interests
</strong>

<ul style="text-align: left; margin-left: 4em;">
  <li>interest</li>
  <li>interest</li>
  <li>interest</li>
  <li>interest</li>
  <li>interest</li>
  <li>interest</li>
</ul>

<p style="height: 50px;"></p>

<div style="text-align: right;">
  <small>
    HTML & CSS by
    <a href="https://janitorai.com/profiles/9ea7c504-32a4-487c-88ed-d4dac0c03de0">
      @1BenPro
    </a>
  </small>
</div>

</div>

<style>
@keyframes ppFloat {
  50% {
    transform: translateY(-10px);
  }
}

@keyframes slowUnroll {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0);
  }
}

@keyframes cursor-blink {
  50% {
    opacity: 0;
  }
}

@keyframes float {
  50% {
    transform: translateY(-20px);
  }
}

@keyframes f-bounce {
  100% {
    transform: translateY(-25px); 
  }
}

@media (min-width: 520px) {
  body {
    padding-top: 60px !important;
  }
}

@media (max-width: 520px) {
  .tag {
    padding: .5em 10px;
    font-size: 86%;
  }
}

@media (max-width: 992px) {
  .profile-page-container-flex-box {
    margin-top: 1.1em;
  }
}

@media (max-width: 1199px) {
  .hiddenios {
    display: none;
  }
}

@media (min-width: 1201px) {
  .hiddenpc {
    display: none;
  }
}

html,
body {
  width: 100%;
  overflow-x: hidden;
  font-size: 1rem;
}

.pp-uc-title,
.pp-top-bar *:not(
  .pp-top-bar-notifications-popover *,
  input#search-input,
  .profile-top-bar-notifications-badge,
  .pp-top-bar-search-history *,
  .pp-top-bar-search:has(#search-input),
  .pp-top-bar-app-menu *
) {
  color: red; /* change me */
}

.pp-top-bar {
  position: fixed;
  align-content: center;
  top: 0
}

.pp-fl-filter-button svg {
  fill: red; /* change me */
}

.content,
li::marker,
.tag {
  color: #fff;
}

.react-select__indicator svg,
.pp-top-bar-search-history * svg {
  fill: #fff; /* change me */
}

.pp-pg-page-button  {
  font-weight: 700;
}

.profile-info-hstack {
  flex-direction: column;
  text-align: center;
}

.profile-info-stack-inner-flex {
  margin: 0;
}

.pp-uc-avatar  {
  height: 200px;
  width: 200px;
  border-radius: 1.5em;
}

.pp-uc-title  {
  width: 100%;
  font-family: 'Pixelify Sans', 'Jura', 'Trebuchet MS', sans-serif;
  text-shadow:
    0 0 4px rgba(255, 0, 0, .9), /* change me */
    0 0 10px rgba(255, 0, 0, .7), /* change me */
    0 0 18px rgba(255, 0, 0, .35); /* change me */
  line-height: 160%;
}

.pp-uc-title:first-letter  {
  font-size: 150%;
  vertical-align: -.2rem;
  margin-right: -5px;
}

.pp-uc-background {
  animation: ppFloat 6s ease-in-out infinite;
}

.pp-uc-background:hover {
  animation-play-state: paused;
}

.pp-uc-background,
.pp-uc-background:hover {
  border: 3px solid rgb(200, 0, 0); /* change me */
  border-radius: 10px;
  box-shadow:
    0 0 10px rgba(255, 0, 0, .7), /* change me */
    0 0 30px rgba(255, 0, 0, .35); /* change me */
}

.css-cardthingie {
  max-width: 850px;
  padding: 3em 1em 18px;
  text-align: center;
  margin-top: 50px;
  border-radius: 1.5em;
  letter-spacing: 1.5px;
  border: 1px solid rgba(200, 220, 230, .26); /* change me */
  background: linear-gradient(
    145deg,
    rgba(0, 255, 255, .1), /* change me */
    rgba(100, 105, 130, .13), /* change me */
    rgba(0, 50, 50, .25) /* change me */
  );
}

.t-terminal {
  text-align: left;
  background: #0c0c0c;
  color: #62f58b;
  padding: 1em;
  border: 1px solid #333;
  border-radius: .5em;
  font-family: monospace;
  font-size: 87.5%;
}

.t-terminal .titlebar {
  background: #1a1a1a;
  color: #aaa;
  padding: .8em 1em;
  border-bottom: 1px solid #333;
  text-align: center;
  font-size: 86%;
}

.t-terminal .content {
  padding: inherit;
  overflow-x: auto;
  white-space: nowrap;
}

.t-terminal .host {
  color: #888;
  margin-bottom: .6em;
}

.t-terminal .prompt {
  color: #62f58b;
}

.t-terminal .cursor {
  animation: cursor-blink 1s step-end infinite;
}

.react-select__control,
.profile-script-card,
.profile-script-card:hover,
._card_lixs0_11,
._card_lixs0_11:hover,
._sortTab_17w5h_22,
._sortTab_17w5h_22:hover,
.pp-top-bar-create-char,
.pp-fl-search-input,
.pp-fl-filter-button,
.pp-pg-total ,
.pp-top-bar-search,
.pp-top-bar-discord-button,
.pp-top-bar,
.pp-top-bar-tabs,
.pp-fl-modal,
.pp-uc-options-menu,
.profile-pagination-prev-hstack *:not(svg,div) {
  background: rgba(20, 20, 20, .9) !important;
  border: 2px solid rgba(255, 0, 0, .4) !important; /* change me */
}

.pp-top-bar-tabs ._tab_85eqn_50[href="/"] {
  border-radius: 0;
  border-right: 2px solid rgba(255, 0, 0, .4); /* change me */
}

.react-select__single-value,
.section-header,
.t-color1 {
  color: cyan !important; /* change me */
}

.react-select__option--is-selected ,
.t-color2 {
  color: #64c8c8 !important; /* change me */
}

.react-select__menu-list  {
  overflow-x: hidden;
  border: 1px solid rgba(0, 0, 0, .4); /* change me */
  border-radius: inherit;
  box-shadow:
    0 0 10px rgba(0, 0, 0, .7), /* change me */
    0 0 30px rgba(0, 0, 0, .35); /* change me */
}

.react-select__control  {
  border-radius: 10px;
}

.react-select__single-value  {
  font-size: 125%;
}

.p-spacer {
  height: 25px;
}

.section-header {
  font-size: 30px;
  display: block;
  margin: 30px 0 .7em;
}

.css-spacer {
  letter-spacing: 0;
  margin: 45px 0;
  height: 80px;
}

.css-spacer[small] {
  height: auto;
}

.css-spacer::after {
  cursor: text;
  content: '◈━━━━━━━━━━━━━━◈━━━━━━━━━━━━━━◈';
}

.pp-uc-member-since,
.pp-uc-followers-count span + span,
.Btn span,
.character-list-pagination-box .pp-pg-total-text,
.pp-tabs-button button[data-tab="characters"],
.pp-top-bar-auth-buttons-register {
  font-size: 0 !important;
}

.character-list-pagination-box .pp-pg-total-text::after,
.pp-tabs-button button[data-tab="characters"]::after {
  content: 'Characters Amount Text';  /* change me */
}

.profile-badge-flex-inner  /* Characters Amount Text Full */ {
  font-family: 'Pixelify Sans', 'Jura', 'Trebuchet MS', sans-serif;
  color: gold;  /* change me */
}

.pp-uc-member-since::after {
  cursor: text;
  font-size: .9rem;
  content: '[Text Before] since [Month] [Day], [Year]';  /* change me */
}

.Btn {
  position: absolute;
  inset: 344px auto auto 50%;
  width: 200px;
  min-width: 0;
  font-weight: 700;
  background: red;
  color: #66E6FF;  /* change me */
  box-sizing: border-box;
}

.Btn[data-following="true"] {
  translate: -50% 0;
  animation: none !important;
}

.Btn[data-following="false"] {
  translate: -50% 0;
  animation: f-bounce .5s cubic-bezier(.25, .46, .45, .94) infinite alternate;
}

.Btn::before {
  content: '';
  transform: skewX(-25deg);
  transition: left .5s ease;
}

.Btn>span {
  font-size: 0;
  font-family: 'Pixelify Sans', 'Jura', 'Trebuchet MS', sans-serif;
  width: auto;
}

div:has(> .profile-uc-follow-flex) {
  align-items: center;
  column-gap: 12px;
  width: 100%;
  z-index: 2;
}

.Btn span::after {
  content: 'Follow option';  /* change me */
  color: #66E6FF;  /* change me */
}

.Btn[data-following=true] span::after {
  content: 'Unfollow option';  /* change me */
  color: rgb(0, 255, 140);  /* change me */
}

.pp-uc-followers-count {
  margin-top: -.5em;
}

.pp-uc-followers-count::after {
  cursor: text;
  content: 'Follow count';  /* change me */
}

.pp-top-bar-auth-buttons-register::after {
  font-size: 17px;
  content: 'Register text';  /* change me */
}

[data-tab="characters"]::after {
  font-size: 87.5%;
}

.Btn span::after,
.pp-uc-followers-count::after,
.css-1omowki *,
.pp-pg-total-text,
.pp-pg-total-text::after,
.details-subtitle,
.react-select__option {
  font-size: 1rem;
}

.pp-pg-total-text,
.pp-pg-total-text::after {
  font-weight: 600;
}

.profile-script-card:hover,
._container_lixs0_1:hover,
.pp-cc-wrapper:hover,
details summary:hover {
  transform: scale(1.025);
}

.pp-cc-wrapper,
._container_lixs0_1,
.profile-script-card,
.react-select__option,
details summary {
  transition: transform .5s ease;
}

.react-select__option:hover {
  transform: scale(1.05);
  transform-origin: top left;
}

.pp-cc-list-container {
  display: grid;
  column-gap: 1em;
}

._queryText_10txd_67 { /* tbh I don’t know what this one does. If you know, please comment it under one of my bots.*/
  text-shadow: none;
  color: #93959c;
}

.profile-character-card-stack {
  border: solid 1px rgb(226, 36, 0);  /* change me */
  box-shadow:
    0 0 2px rgba(255, 80, 80, .7),  /* change me */
    0 0 10px rgba(255, 80, 80, .7);  /* change me */
}

.profile-character-card-stack:not(:has(
  .css-5v5qgx,
  .css-nip9dx img[alt="Halloween icon"],
  .css-xrg4vd img[alt="Christmas Lights"]
)) {
  background-image: linear-gradient(to right, #000, rgb(76, 0, 17));  /* change me */
}

.profile-character-card-stack:has(
  .css-nip9dx img[alt="Halloween icon"]
) {
  background-image: linear-gradient(to bottom right, rgba(255, 120, 0, .2), rgb(32, 32, 32));  /* change me */
}

.profile-character-card-stack:has(.css-nip9dx) .pp-cc-name {
  font: 700 1em/1.5 'Times';
}

.profile-character-card-stack:not(:has(
  .css-5v5qgx,
  .css-nip9dx img[alt="Halloween icon"],
  .css-xrg4vd img[alt="Christmas Lights"]
)) .pp-cc-name {
  line-height: 1.8;
  font-size: 87.5%;
}

.pp-cc-star {
  top: -37.5px;
}

.profile-character-card-stack:not(:has(
  .css-5v5qgx,
  .css-nip9dx img[alt="Halloween icon"],
  .css-xrg4vd img[alt="Christmas Lights"]
)) .pp-cc-star {
  filter:
    brightness(0)  /* change me */
    invert(.1)  /* change me */
    sepia(1)  /* change me */
    saturate(60);  /* change me */
}

.profile-character-card-stack:not(:has(
  .css-5v5qgx,
  .css-nip9dx img[alt="Halloween icon"],
  .css-xrg4vd img[alt="Christmas Lights"]
)) .pp-cc-star-line {
  border-top-color: rgba(200, 64, 64, .6);  /* change me */
}

.css-fdshcw  {
  height: 0;
}

details summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
}

details summary *:not(div) {
  position: relative;
}

details summary::before {
  position: absolute;
  content: '▶';
  font-size: 2em;
  transform: translateX(-150%);
  transition: transform .75s ease;
  z-index: 2;
}

.details[open] summary::before {
  transform: translateX(-150%) rotate(90deg);
}

.details[open] .content-grid {
  overflow-y: hidden;
  transform-origin: top;
  animation: 1s ease slowUnroll;
}

._tab_x2w8n_15 {
  font-size: 1.5rem;
  line-height: 10px;
  font-family: 'Jura';
}

.pp-tabs-wrapper {
  background: rgba(20, 20, 20, .9);
  border-bottom: 1px solid rgb(200, 0, 0);  /* change me */
}

.pp-tabs-indicator {
  background: rgb(200, 0, 0);
  box-shadow:
    0 0 10px rgba(255, 0, 0, .7),  /* change me */
    0 0 30px rgba(255, 0, 0, .35);  /* change me */
}

.details-button {
  z-index: 2;
  padding: 5px;
  font-size: 2em;
  border-radius: 5px;
  background-color: #2E1452;  /* change me */
  border: 2px solid #A7EFFF;  /* change me */
  text-shadow: rgba(255, 255, 255, .3) 0 0 26px, 0 0 26px;  /* change me */
}

.details-subtitle {
  margin-top: 5px;
}

.block {
  display: block;
}

.flex {
  display: flex;
}

.pp-tabs-button[aria-selected="true"] {
  color: cyan;  /* change me */
  font-family: 'Pixelify Sans', 'Jura', 'Trebuchet MS', sans-serif;  /* change me */
  letter-spacing: 1.5px;
  font-weight: 700;
  font-size: 114%;
}

li::marker {
  font-family: 'Pixelify Sans', 'Jura', 'Trebuchet MS', sans-serif;
}

.chakra-button__icon {
  margin: 0;
}

.pp-uc-options-menu {
  inset: -.45rem auto auto -1.8rem;
}

.tags-wrap {
  padding: 18px
}

.tag {
  display: inline-flex;
  background: #0a0a0a;
  padding: .5em .82em .5em 14px;
  border-radius: 9in;
  font-size: 92%;
  line-height: 1;
  letter-spacing: .02em;
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .55), inset 0 -1px 0 rgba(255, 255, 255, .02);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.tag:hover {
  transform: translatey(-4px) scale(1.02);
  background: #141414;
  box-shadow: 0 14px 34px rgba(10, 10, 10, .7), inset 0 -1px 0 rgba(255, 255, 255, .03);
}

.pp-top-bar-notifications-item:nth-of-type(even) {
  flex-direction: row-reverse;
}

.pp-top-bar-notifications-item {
  border-top: 4px double rgba(200, 0, 0, .5);  /* change me */
}

.pp-top-bar-notifications-item-unread {
  background: rgba(255, 0, 0, .4);  /* change me */
}

.pp-top-bar-notifications-item:nth-of-type(even) .pp-top-bar-notifications-item-unread {
  left: unset;
}

.pp-top-bar-notifications-item [class*="highlight"] {
  font-family: 'Pixelify Sans', 'Jura', 'Trebuchet MS', sans-serif;
}

.t-title {
  font: 700 225% 'Jura';
  text-shadow: rgba(255, 255, 255, .35) 0 0 26px, 0 0 26px;
}

.t-subtitle{
  font-size: 75%;
  letter-spacing: 0;
  margin-top: -10px;
  text-shadow: rgba(255, 255, 255, .35) 0 0 26px, 0 0 26px;
}

.anime-list {
  color: #fff;
  text-align: left;
  margin-left: 4em;
  font-weight: 700;
}

.anime1 {
  color: cyan;  /* change me */
  font: 200 1em/1.5 'Futura';  /* change me */
}

.anime2 {
  color: red;  /* change me */
  font-family: 'Orbitron';  /* change me */
}

.anime3 {
  color: #000;  /* change me */
  text-shadow:
    -1px -1px 0 #fff,  /* change me */
    1px -1px 0 #fff,  /* change me */
    -1px 1px 0 #fff,  /* change me */
    1px 1px 0 #fff;  /* change me */
}

.anime4 {
  color: #9370DB;  /* change me */
  font-family: 'Syncopate';  /* change me */
}

.anime5 {
  font-family: 'Bebas Neue';  /* change me */
}

.anime6 {
  font-family: 'Cinzel';  /* change me */
}

.anime7 {
  color: #8F2BBC;  /* change me */
  font-family: 'Michroma';  /* change me */
}

.anime8 {
  color: #DC2626;  /* change me */
}

.anime9 {
  color: #78C850;  /* change me */
  font-weight: 700;  /* change me */
}

.section-background {
  display: flex;
  align-self: center;
  position: absolute;
  height: calc(100% + 40px);
  width: 100%;
  inset: -30px 0 0;
  background-color: rgba(21, 21, 21);
}

.menu-p {
  position: absolute;
  height: 100%;
  display: flex;
  justify-content: space-evenly;
  width: 15%;
  margin: -20px 0 0;
}

.menu-p * {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.r-circle {
  background-color: red;
}

.y-circle {
  background-color: yellow;
}

.g-circle {
  background-color: lime;
}
</style>
My code:

Warning
