{"data":{"alternate_greetings":[],"character_version":"","creator":"WhoTheFreakAmI","creator_notes":"<p>HELLOOOO!! You might see some changes to my profile! I found this one person here on <a rel=\"noopener noreferrer\" href=\"http://J.ai\" target=\"_blank\">J.ai</a> that posted HOW TO DO CHARACTER COOLNESS CSS!!</p><hr><p></p><p><a rel=\"noopener noreferrer\" href=\"https://janitorai.com/profiles/488f68bc-e990-4b08-8002-aabe562f2f90_profile-of-ian-2026\" target=\"_blank\">@IAN_2026</a>!!!! They were amazing at posting help on making characters look COOLER! I still haven’t learned coding-</p><p></p><hr><p>I edited the colors and it kinda rocks?? Y’all can steal what I had found, so... it’s in the first message!</p><hr><p>HOW TO DO THIS:</p><p></p><p>Step 1. Find this thing</p><p><img src=\"https://ella.janitorai.com/media-approved/LX4xdKwHQmUmKRsVVRCDw.webp?width=600\"></p><p></p><p>STEP 2. Click this circled thing</p><p><img src=\"https://ella.janitorai.com/media-approved/5uXE5seOcR7PkEPOAv0jx.webp?width=600\"></p><p></p><p>STEP 3. Select ‘Card Wrapper’ or use the target sign and click above the characters</p><p><img src=\"https://ella.janitorai.com/media-approved/nzCcWB9-0C5p1g-JnaoXQ.webp?width=600\"></p><p></p><p>STEP 4. Click what is circled</p><p><img src=\"https://ella.janitorai.com/media-approved/QAobcoAHVIVcyvW1gOU2N.webp?width=600\"></p><p></p><p>STEP 5. Scroll all the way down, add spaces to keep it separate, and paste the code! Changing color is SUPER easy, either paste your color where a color already is, or click it and find a color you like (hard to explain-)</p><p><img src=\"https://ella.janitorai.com/media-approved/EEZAMgPOD5R4-Lxfsxnc9.webp?width=600\"></p>","description":"YOU GUYS LIKE IT!?","extensions":{"cardex":{"origins":[{"created":"2026-09-18T17:01:51Z","current":true,"first_seen":"2026-10-31T08:17:07Z","id":"21ca675b-feac-44d2-a401-c9356ba012c6","source":"janitorai","url":"https://janitorai.com/characters/21ca675b-feac-44d2-a401-c9356ba012c6"}],"url":"https://cardex.zip/janitorai/21ca675b-feac-44d2-a401-c9356ba012c6","version":1},"janitor":{"source_watermark":{"fields":["description","scenario","first_mes","mes_example"],"years":[2026]}}},"first_mes":"<style>\n*:hover {\nbox-shadow: none !important;\n}\n* {\ntransition: box-shadow .5s;\n}\n\ndiv:has(> .profile-character-card-stack),\ndiv:has(~ .profile-character-card-stack) {\n  background: transparent !important;\n}\n\ndiv:has(> div > .profile-character-card-stack) {\n    display: flex;\n    flex-flow: row wrap;\n    justify-content: center;\n}\n\ndiv:has(> .profile-character-card-stack) {\n  flex: 0 1 360px;\n}\n\n.profile-character-card-stack a { \ndisplay: contents;\n}\n\n.pp-cc-wrapper > * {\n  box-shadow: none ;\n}\n\n.css-1henxb {\n  background: none;\n}\n\n.profile-character-card-stack {\n    border: 2px solid #d4a574;\n    width: 180px;\n    background: linear-gradient(to bottom, #410034 15%, #3f0047 80%);\n    background-size: 100% 130%;\n    background-position: center;\n    transition: all 0.5s ease;\n}\n\n@media screen and (max-width: 365px) {\n   .profile-character-card-stack {\n      width: 160px;\n  }\n}\n\n\n.pp-cc-wrapper:hover .profile-character-card-stack {\n  background-position: top;\n}\n\n.pp-cc-wrapper {\n  transition: all .5s; \n}\n\n.pp-cc-wrapper:hover {\n  transform: scale(1.02);\n}\n\n.css-199gcrh, .pp-cc-tags {\n   position: absolute;\n   height: 160px;\n   width: 100%;\n   left: 100%;\n   display: flex;\n   flex-direction: column;\n   align-items: center;\n   justify-content: center;\n   padding-bottom: 20px;\n   padding-right: 20px;\n}\n\n.css-199gcrh {\n    top: 1.5rem;\n    justify-content: flex-start;\n    line-height: 1.4;\n}\n\n.profile-character-card-stack * {\n   font-family: Pangolin;\n   color: #00d3d2;\n}\n\n.pp-cc-description p:not(:first-child), .pp-cc-description hr {\n    display: none;\n}\n\n.pp-cc-description * {\n  color: ##ffffff !important;\n  background: transparent !important;\n  line-height: 1.4 !important;\n}\n\n.pp-cc-description::before {\n   content: '✦ Profile:';\n   width: 100%;\n   padding: 0 0 0 5px;\n   display: block;\n   font-size: .8rem;\n   background: #380925;\n   border-radius: 999px;\n}\n\n.pp-cc-description {\n    width: 100%;\n}\n\n.pp-cc-tags {\n   top: 180px; \n}\n\n.profile-character-card-stack::after {\n    content: '';\n    position: absolute;\n    top: 10px;\n    left: 80%;\n    z-index: -1;\n    height: calc(100% - 20px);\n    width: calc(100% + 20px);\n    background: #380925;\n    transform: rotate(2deg);\n    border: 2px solid #b8957a;\n    border-radius: 8px;\n}\n\n.css-k1urot {\n    gap: .0.3rem;\n}\n.css-123m5uu {\n    margin-top: 0;\n}\n.css-123m5uu {\n    flex: 1 1 100%;\n    width: 100%;\n}\n\n.pp-tag-limitless {\n    font-size: 0;\n    background: #380925;\n    text-shadow: none;\n    border: none;\n    border-radius: 999px;\n    text-align: left;\n    margin: 0 auto;\n    width: 100%;\n    height: 100%;\n    display: inline-block;\n    line-height: unset;\n}\n\n.pp-tag-limitless::after {\n    content: '✦ Tags:';\n    font-size: .9rem;\n}\n\n.pp-cc-tags-item:not(.pp-tag-limitless) {\n    transition: all 0.5s;\n    font-size: .7rem;\n}\n\n.pp-cc-tags-item {\n    border: 1;\n    border-radius: 999px;\n    transition: all .5s;\n    border-color: #380925;\n}\n\n.pp-cc-tags-item:hover {\n    border: none;\n    background: #380925;\n}\n\n.profile-character-card-stack::before {\n    content: '✨ Raccoons';\n    position: absolute;\n    left: 3rem;\n    top: -1rem;\n    font-family: 'Playfair Display', serif;\n    letter-spacing: 0px;\n    text-shadow: -1px -1px 0 #8b6b4f, 1px -1px 0 #8b6b4f, -1px 1px 0 #8b6b4f, 1px 1px 0 #8b6b4f;\n    font-weight: bolder;\n    background: #6b0077;\n    padding: 4px 5px 0;\n    border: 2px solid #380925;\n    border-radius: 5px;\n    transform: rotate(1deg);\n}\n\n\n.css-nlxhw4::before {\n    content: 'name:';\n    color: #380925;\n    font-family: 'Pangolin';\n    font-size: .8rem;\n}\n\n.pp-cc-name {\n    font-family: 'Playfair Display', serif;\n    font-size: 1.2rem;\n    color: #11040c;\n    text-shadow: -1px -1px 0 #f0d5c0, 1px -1px 0 #f0d5c0, -1px 1px 0 #f0d5c0, 1px 1px 0 #f0d5c0;\n    line-height: 1.2;\n}\n\n.pp-cc-avatar {\n    border-radius: 50%;\n    border: 3px solid ##ffffff;\n}\n\n\n.css-1q7rmf0 {\n    height: 230px;\n    margin: 10px;\n    border-radius: 15px;\n    overflow: visible;\n}\n\n\n.css-1q7rmf0::after {\n    content: '✦ Amazing Work';\n    position: absolute;\n    color: ##ffffff;\n    bottom: -8px;\n    font-family: 'Playfair Display', serif;\n    font-variant: small-caps;\n    font-size: 1.1rem;\n    font-weight: 600;\n    background:##380925;\n    border-radius: 30px;\n    padding: 0 5px;\n    line-height: 1.2;\n    box-shadow: 0 2px 10px rgba(180, 120, 80, 0.2);\n    border: 2px solid ##ffffff;\n}\n\n\n.pp-cc-wrapper:has(.pp-tag-cock) .css-1q7rmf0::after {\ncontent: '☀️ Suns';\n}\n\n.pp-cc-wrapper:has(.pp-tag-test) .css-1q7rmf0::after {\ncontent: '🌟 Stars';\ncolor: ##ffffff;\n}\n\n\n.css-19ihot3, .pp-cc-star-line.css-1lgnt2x {\n    filter: sepia(1);\n    -webkit-filter: sepia(1);\n}\n\n.pp-cc-star-line {\n  visibility: hidden;\n}\n\n.pp-cc-chats svg {\n  display: none;\n}\n\n\n.pp-cc-ribbon-wrap {\n    background: #380925;\n    box-shadow: 0 calc(-1 * var(--f)) 0 inset rgba(0, 0, 0, .333);\n    overflow: hidden;\n    clip-path: unset;\n    box-shadow: none;\n    padding: 0 5px 1px;\n    border-radius: 30px;\n}\n\n.css-10cv7r2 {\n    position: absolute;\n    z-index: 1;\n    right: 0.5rem;\n    margin-top: 1.5rem;\n    transform: rotate(6deg);\n}\n\n.css-1ket5wn {\n  position: static;\n  filter: none;\n  width: 100%;\n  padding: 0;\n}\n\n.pp-cc-chats {\n  font-family: 'Playfair Display', serif;\n  font-size: 0.9rem;\n  font-weight: 600;\n  width: 100%;\n  justify-content: center;\n  display: flex;\n  color: ##ffffff;\n}\n.pp-cc-chats-count {\n  color: ##ffffff !important;\n  font-family: 'Playfair Display', serif;\n}\n\n\n.pp-cc-chats::before {\n    content: \"Food: $\";\n    font-size: .9rem;\n    font-family: 'Playfair Display', serif;\n}\n.css-euh5x6 svg {\n    display: none;\n}\n\n.profile-character-card-stack > *:last-child, .pp-cc-creator-name, .css-fo6ddv:nth-of-type(2) {\n    display: none;\n}\n\n.css-1c9wmts {\n    bottom: .9rem;\n}\n\n.css-1c9wmts > p {\n    color: ##ffffff !important;\n    font-family: 'Playfair Display', serif;\n    font-weight: 600;\n    text-shadow: none;\n}\n</style>","mes_example":"I LOVE THAT SOMEONE HAD A GOOD AND UNDERSTANDING CSS THAT I CAN USE ON MY PROFILE WITHOUT HAVING TO EDIT MUCH!!","name":"Profile Update","personality":"","post_history_instructions":"","scenario":"Hi, this is amazing, right?","system_prompt":"","tags":["passporttopages","coding","freecss","freecsstemplate"]},"spec":"chara_card_v2","spec_version":"2.0"}