✦ RETRO DESKTOP ✦

A FREE JANITORAI CSS / HTML TEMPLATE

Black & White • Retro Computer • Windows-Inspired

✦ PREVIEWS

DESKTOP PREVIEW

Desktop Preview

Full desktop layout featuring retro computer windows, clickable folders, profile information, and character cards.

MOBILE PREVIEW

Mobile Preview

Responsive mobile layout with stacked windows, smaller shortcuts, and single-column character cards.

Replace these placeholder images with screenshots of your finished theme.

✦ ABOUT THE TEMPLATE

RETRO • MONOCHROME • DESKTOP AESTHETIC

A black-and-white JanitorAI profile template inspired by old computer desktops, classic operating systems, and vintage internet layouts.

Featuring grayscale backgrounds, beveled window borders, decorative title bars, desktop shortcuts, and customizable application-style panels.

The entire profile is designed to resemble a personal computer desktop, complete with windows for your information, documents, friends, links, and notes.

It combines nostalgic computer aesthetics with a modern, customizable JanitorAI profile layout.

✦ FEATURES

WHAT'S INCLUDED?

Complete black-and-white colour scheme.
Dark gradient page background.
Retro computer-style profile window.
Customizable .EXE window titles.
Square profile picture with beveled borders.
Centered username, followers, and badges.
Classic computer-style profile buttons.
Decorative minimize, maximize, and close symbols.
Retro menu bars and status bars.
Large customizable welcome banner.
Five desktop shortcut icons.
Clickable shortcuts that jump to profile sections.
Two-column desktop window layout.
About Me window with customizable banner.
Personal information fields.
Four expandable document folders.
Customizable rules and boundaries.
Horizontally scrolling friends and creators gallery.
Customizable creator images and profile links.
Internet Explorer-inspired links window.
Six customizable link buttons.
Notepad window for announcements and reminders.
Customizable tags with clickable links.
Decorative Start taskbar.
Complete retro redesign of the actual Characters section.
Retro character search and filter controls.
Four-column desktop character grid.
Square character cards with raised borders.
Custom character tags and typography.
Optional grayscale character images.
Hidden character card star footer.
Responsive tablet and mobile layouts.
Single-column character cards on mobile.

✦ CUSTOMIZATION

MAKE IT YOUR OWN.

The template includes labeled sections explaining which parts you can change.

You can customize the colours, images, text, links, folders, icons, window titles, and character card appearance.

✦ LIMITATIONS

Decorative computer controls: The minimize, maximize, and close buttons are purely visual. They do not actually control the windows.
Background covered
Decorative taskbar: The Start button, menu options, and system status messages are for appearance only.
Desktop shortcuts: The shortcuts navigate to sections of your profile. They do not open real computer applications.
Clickable folders: The document folders can be opened and closed, but they do not store actual files.
Mobile differences: Some elements become smaller, stack vertically, or change their layout on mobile devices. The character grid displays one column on mobile instead of four.
Placeholder content: You must replace the example images, usernames, descriptions, and links yourself.
Image hosting: Images require publicly accessible direct image URLs. Broken, private, or deleted image links will not display.
Hover effects: Some animations and hover effects may not work the same way on phones and tablets.
JanitorAI updates: Changes to JanitorAI's website, class names, or page structure may cause parts of the template to stop working.
Conflicting CSS: Using this template alongside another full-page CSS theme may cause overlapping styles, broken layouts, or misplaced elements.
Customization knowledge: Basic HTML and CSS knowledge is recommended if you want to make major changes to the layout.

READY TO CUSTOMIZE?

The original code contains instructions explaining what each section does and what can be changed.

BEFORE PUBLISHING YOUR PROFILE:

Change the welcome heading and subtitle.
Replace the About Me banner image.
Fill in your personal information.
Customize your four document folders.
Replace the five example friends and images.
Replace the six example links.
Edit your notes and eight tags.
Adjust the colours if desired.
Test your finished profile on mobile.

FULL CSS + HTML TEMPLATE

⎗
✓
<style>
/* ==================================================
   BLACK AND WHITE RETRO COMPUTER PROFILE
   COMPLETE TEMPLATE

   CUSTOMIZATION GUIDE

   1. Edit colors in SECTION 01.
   2. Edit your profile header in SECTION 04.
   3. Edit text and links in the HTML below.
   4. Replace placeholder image URLs.
   5. Duplicate HTML blocks for extra folders,
      friends, notes, and links.
   6. Keep class names the same.

   IMPORTANT:
   Replace your old code with this entire code.
   Do not paste it underneath the old template.
   ================================================== */


/* ==================================================
   SECTION 01 - COLORS

   Change these values to recolor the template.

   BLACK AND WHITE DEFAULTS:
   ================================================== */

:root{
--retro-black:#080808;
--retro-dark:#202020;
--retro-grey:#777777;
--retro-light:#d7d7d7;
--retro-white:#ffffff;
--retro-panel:#eeeeee;
--retro-border:#666666;
--retro-shadow:#00000066;
--retro-hover:#bbbbbb;
--retro-text:#111111;
}

/* ==================================================
   SECTION 02 - PAGE BACKGROUND
   ================================================== */

html,
body{
background:#171717!important;
overflow-x:clip!important;
}

.pp-page-background,
.profile-page-background{
background:
radial-gradient(circle at 20% 20%,#444444,transparent 40%),
radial-gradient(circle at 80% 80%,#333333,transparent 40%),
linear-gradient(135deg,#080808,#252525,#101010)!important;
background-attachment:fixed!important;
}

/* ==================================================
   SECTION 03 - PAGE LAYOUT

   Keeps profile first and characters below.
   ================================================== */

.profile-page-container{
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
width:100%!important;
max-width:1600px!important;
min-width:0!important;
margin:0 auto!important;
padding:20px!important;
gap:24px!important;
box-sizing:border-box!important;
}

.profile-page-flex{
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
justify-content:flex-start!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
height:auto!important;
gap:25px!important;
margin:0 auto!important;
}

.profile-page-flex>*{
width:100%!important;
max-width:100%!important;
min-width:0!important;
flex:0 0 auto!important;
box-sizing:border-box!important;
}

.profile-page-container-flex-box{
display:block!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
flex:none!important;
margin:0 auto!important;
clear:both!important;
}

/* ==================================================
   SECTION 04 - MAIN PROFILE WINDOW

   CHANGE:
   The text YOUR_PROFILE.EXE below.
   ================================================== */

.pp-uc-background.profile-uc-background{
display:block!important;
position:relative!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
height:auto!important;
margin:0 auto!important;
padding:0 0 24px!important;
background:#dedede!important;
border:3px solid #ffffff!important;
border-right-color:#555555!important;
border-bottom-color:#555555!important;
border-radius:0!important;
box-shadow:7px 7px 0 #00000066!important;
overflow:visible!important;
box-sizing:border-box!important;
}

.profile-background-box-1,
.profile-background-box-2,
.profile-background-box-3{
display:none!important;
}

/* CHANGE THE WINDOW TITLE HERE */

.pp-uc-background.profile-uc-background::before{
content:"✦ YOUR_PROFILE.EXE";
display:block!important;
width:100%!important;
padding:13px 20px!important;
margin:0 0 24px!important;
box-sizing:border-box!important;
background:linear-gradient(90deg,#000000,#444444)!important;
border-bottom:2px solid #777777!important;
color:#ffffff!important;
font:bold 15px Tahoma,sans-serif!important;
letter-spacing:1px!important;
}

/* ==================================================
   SECTION 05 - PROFILE INFORMATION
   ================================================== */

.profile-info-wrapper-box{
width:calc(100% - 40px)!important;
max-width:100%!important;
min-width:0!important;
margin:0 auto!important;
padding:30px!important;
background:#ffffff!important;
border:3px inset white!important;
border-radius:0!important;
box-sizing:border-box!important;
}

.profile-info-stack,
.profile-info-stack-inner{
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
gap:10px!important;
margin:0 auto!important;
text-align:center!important;
}

/* CHANGE AVATAR SIZE HERE */

img.pp-uc-avatar.profile-avatar{
display:block!important;
width:160px!important;
height:160px!important;
min-width:160px!important;
max-width:160px!important;
object-fit:cover!important;
border:5px ridge #ffffff!important;
border-radius:3px!important;
box-shadow:5px 5px 0 #555555!important;
margin:10px auto!important;
}

/* USERNAME */

h2.pp-uc-title{
font-family:Georgia,serif!important;
font-size:clamp(25px,3vw,40px)!important;
font-weight:bold!important;
color:#111111!important;
text-align:center!important;
text-shadow:2px 2px #cccccc!important;
max-width:100%!important;
overflow-wrap:anywhere!important;
margin:10px auto!important;
}

/* FOLLOWERS */

.pp-uc-followers-count{
font:14px Tahoma,sans-serif!important;
color:#555555!important;
text-align:center!important;
}

/* BADGES */

.profile-badges{
display:flex!important;
flex-wrap:wrap!important;
align-items:center!important;
justify-content:center!important;
gap:8px!important;
margin:10px auto!important;
}

.profile-badge{
padding:5px!important;
background:#dddddd!important;
border:2px outset white!important;
border-radius:0!important;
}

.profile-badge-img{
filter:grayscale(100%)!important;
}

/* PROFILE BUTTONS */

.profile-info-wrapper-box button{
background:#dddddd!important;
color:#111111!important;
border:2px outset white!important;
border-radius:0!important;
font-family:Tahoma,sans-serif!important;
box-shadow:2px 2px 0 #777777!important;
}

.profile-info-wrapper-box button:hover{
background:#bbbbbb!important;
}

/* ==================================================
   SECTION 06 - RETRO DESKTOP
   ================================================== */

.retro-desktop{
width:100%;
max-width:100%;
min-width:0;
margin:0 auto;
padding:0;
font:13px Tahoma,Verdana,sans-serif;
color:#111111;
box-sizing:border-box;
clear:both;
}

.retro-desktop *{
box-sizing:border-box;
}

.retro-window{
width:100%;
min-width:0;
background:#dedede;
border:3px solid white;
border-right-color:#555555;
border-bottom-color:#555555;
box-shadow:5px 5px 0 #00000066;
margin:0 0 25px;
overflow:hidden;
}

/* WINDOW TITLE BARS */

.retro-title{
background:linear-gradient(90deg,#000000,#444444);
color:white;
padding:10px 13px;
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
min-height:39px;
font-size:13px;
font-weight:bold;
}

.retro-title span:first-child{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

/* DECORATIVE WINDOW CONTROLS */

.retro-controls{
display:flex;
gap:4px;
flex-shrink:0;
}

.retro-controls i{
display:flex;
justify-content:center;
align-items:center;
width:23px;
height:22px;
background:#eeeeee;
border:2px outset white;
color:#111111;
font:normal bold 13px Tahoma,sans-serif;
}

/* WINDOW MENUS */

.retro-menu{
display:flex;
flex-wrap:wrap;
gap:20px;
padding:9px 13px;
background:#d5d5d5;
border-bottom:1px solid #999999;
font-size:12px;
}

/* WINDOW CONTENT */

.retro-body{
background:#ffffff;
padding:20px;
min-width:0;
}

.retro-body p{
line-height:1.8;
margin:0 0 12px;
}

.retro-body h3{
font:bold 17px Georgia,serif;
color:#111111;
margin:0 0 15px;
}

/* WINDOW STATUS BAR */

.retro-status{
background:#d5d5d5;
border-top:2px ridge white;
padding:8px 12px;
font-size:11px;
color:#444444;
}

/* ==================================================
   SECTION 07 - WELCOME BANNER

   CHANGE:
   Height, background, heading and subtitle.
   ================================================== */

.retro-welcome{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
min-height:300px;
padding:40px 20px;
text-align:center;
overflow:hidden;
border:3px inset white;
background:
radial-gradient(circle at 80% 20%,#ffffff55 0 9%,transparent 10%),
radial-gradient(circle at 17% 80%,#ffffff44 0 12%,transparent 13%),
linear-gradient(120deg,#333333,#777777 58%,#111111);
}

.retro-welcome::before{
content:"✧ ✦ ✧";
position:absolute;
top:15%;
left:5%;
color:white;
font-size:38px;
}

.retro-welcome::after{
content:"♡ ☆ ♡";
position:absolute;
bottom:10%;
right:5%;
color:white;
font-size:34px;
}

.retro-welcome h1{
font:bold clamp(35px,6vw,70px) Georgia,serif;
color:white;
text-shadow:3px 3px #000000,5px 5px #ffffff55;
line-height:1.1;
margin:0 0 18px;
}

.retro-welcome p{
display:inline-block;
padding:10px 20px;
background:#ffffffdd;
border:2px solid white;
color:#111111;
}

/* ==================================================
   SECTION 08 - DESKTOP SHORTCUTS
   ================================================== */

.retro-icons{
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:15px;
padding:20px 5px 28px;
}

.retro-icon{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:8px;
min-width:0;
padding:12px 5px;
color:#ffffff!important;
text-decoration:none!important;
text-align:center;
border:1px solid transparent;
transition:.2s;
}

.retro-icon:hover{
background:#ffffff22;
border:1px dotted white;
transform:translateY(-3px);
}

.retro-icon b{
font-size:38px;
font-weight:normal;
filter:grayscale(100%);
}

.retro-icon span{
font-size:12px;
font-weight:bold;
overflow-wrap:anywhere;
}

/* ==================================================
   SECTION 09 - DESKTOP GRID
   ================================================== */

.retro-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:24px;
align-items:start;
width:100%;
}

.retro-grid>*{
min-width:0;
}

/* ==================================================
   SECTION 10 - ABOUT ME
   ================================================== */

.retro-banner{
width:100%;
height:180px;
object-fit:cover;
display:block;
border:3px inset white;
margin-bottom:15px;
filter:grayscale(100%);
}

.retro-info{
padding:10px;
border-bottom:1px dashed #999999;
overflow-wrap:anywhere;
}

.retro-info strong{
color:#111111;
}

/* ==================================================
   SECTION 11 - CLICKABLE FOLDERS
   ================================================== */

.retro-folder{
background:#e2e2e2;
border:2px outset white;
margin:10px 0;
overflow:hidden;
}

.retro-folder summary{
cursor:pointer;
list-style:none;
padding:14px;
font-weight:bold;
color:#111111;
background:#dddddd;
}

.retro-folder summary::-webkit-details-marker{
display:none;
}

.retro-folder summary::before{
content:"📁 ";
}

.retro-folder[open] summary::before{
content:"📂 ";
}

.retro-folder[open] summary{
background:#bcbcbc;
}

.retro-folder-content{
padding:18px;
background:#ffffff;
border-top:2px inset white;
line-height:1.8;
overflow-wrap:anywhere;
}

/* ==================================================
   SECTION 12 - FRIENDS CAROUSEL
   ================================================== */

.retro-friends{
display:flex;
gap:14px;
overflow-x:auto;
padding:12px 5px 22px;
}

.retro-friend{
flex:0 0 145px;
padding:10px;
background:#e4e4e4;
border:2px outset white;
color:#111111!important;
text-align:center;
text-decoration:none!important;
transition:.2s;
}

.retro-friend:hover{
background:#bbbbbb;
transform:translateY(-4px);
}

.retro-friend img{
width:100%;
height:125px;
object-fit:cover;
border:2px inset white;
display:block;
margin-bottom:10px;
filter:grayscale(100%);
}

.retro-friend span{
font-weight:bold;
font-size:12px;
overflow-wrap:anywhere;
}

/* ==================================================
   SECTION 13 - LINK BUTTONS
   ================================================== */

.retro-links{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}

.retro-link{
padding:15px 8px;
background:#dddddd;
border:2px outset white;
text-align:center;
font-weight:bold;
font-size:12px;
color:#111111!important;
text-decoration:none!important;
overflow-wrap:anywhere;
}

.retro-link:hover{
background:#aaaaaa;
}

/* ==================================================
   SECTION 14 - NOTEPAD
   ================================================== */

.retro-note{
background:#eeeeee;
border:1px solid #888888;
box-shadow:4px 5px 0 #00000044;
padding:20px;
margin:10px 5px 20px;
transform:rotate(-1deg);
line-height:1.8;
}

.retro-note strong{
display:block;
margin-bottom:8px;
font-size:15px;
}

/* ==================================================
   SECTION 15 - CUSTOM TAGS
   ================================================== */

.retro-tags-section{
width:100%;
max-width:100%;
min-width:0;
margin-top:20px;
padding-top:14px;
border-top:2px dashed #888888;
box-sizing:border-box;
}

.retro-tags-heading{
font-family:Georgia,serif;
font-size:19px;
font-weight:bold;
color:#111111;
margin-bottom:14px;
}

.retro-tags-list{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:flex-start;
gap:9px;
width:100%;
min-width:0;
}

.retro-tag{
display:inline-flex;
align-items:center;
justify-content:center;
max-width:100%;
min-width:0;
padding:9px 14px;
background:#dddddd;
color:#111111!important;
border:2px solid #ffffff;
border-right-color:#666666;
border-bottom-color:#666666;
border-radius:0;
box-shadow:2px 2px 0 #00000033;
font-family:Tahoma,Verdana,sans-serif;
font-size:12px;
font-weight:bold;
text-decoration:none!important;
line-height:1.4;
overflow-wrap:anywhere;
transition:background .2s,transform .2s;
}

.retro-tag:hover{
background:#aaaaaa;
color:#000000!important;
transform:translateY(-2px);
}

/* ==================================================
   SECTION 16 - TASKBAR
   ================================================== */

.retro-taskbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:9px 12px;
background:#cccccc;
border:3px outset white;
margin-bottom:20px;
font-size:12px;
}

.retro-start{
padding:8px 17px;
background:#eeeeee;
border:2px outset white;
font-weight:bold;
}

/* ==================================================
   SECTION 17 - COMPLETE CHARACTERS WINDOW

   IMPORTANT FIX:
   Styles the actual Characters section.

   The tab heading, search, filters and cards
   are made to look like a single retro window.
   ================================================== */

/* MAIN CHARACTERS PANEL */

body:has(.retro-desktop) .profile-tabs-chakra-tabs{
display:block!important;
position:relative!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
margin:22px auto!important;
padding:58px 20px 20px!important;
background:#e5e5e5!important;
border:3px solid #ffffff!important;
border-right-color:#555555!important;
border-bottom-color:#555555!important;
border-radius:0!important;
box-shadow:7px 7px 0 #00000066!important;
box-sizing:border-box!important;
overflow:visible!important;
}

/* RETRO TITLE BAR */

body:has(.retro-desktop) .profile-tabs-chakra-tabs::before{
content:"▣ MY_CHARACTERS.EXE";
position:absolute!important;
top:0!important;
left:0!important;
right:0!important;
height:43px!important;
display:flex!important;
align-items:center!important;
padding:0 16px!important;
background:linear-gradient(90deg,#000000,#444444)!important;
border-bottom:2px solid #777777!important;
color:#ffffff!important;
font:bold 14px Tahoma,sans-serif!important;
letter-spacing:1px!important;
box-sizing:border-box!important;
z-index:1!important;
}

/* RETRO WINDOW CONTROL DECORATION */

body:has(.retro-desktop) .profile-tabs-chakra-tabs::after{
content:"_   □   ×";
position:absolute!important;
top:8px!important;
right:12px!important;
padding:5px 8px!important;
background:#dddddd!important;
border:2px outset #ffffff!important;
color:#111111!important;
font:bold 12px Tahoma,sans-serif!important;
white-space:pre!important;
z-index:2!important;
}

/* CONTENT PANELS */

body:has(.retro-desktop) .profile-tabs-panels,
body:has(.retro-desktop) .pp-tabs-panels,
body:has(.retro-desktop) .profile-tab-panel{
width:100%!important;
max-width:100%!important;
min-width:0!important;
padding:0!important;
margin:0!important;
box-sizing:border-box!important;
}

/* ORIGINAL CHARACTERS TAB */

body:has(.retro-desktop) .profile-tabs-button,
body:has(.retro-desktop) .pp-tabs-button{
background:#d2d2d2!important;
color:#111111!important;
border:2px outset #ffffff!important;
border-radius:0!important;
padding:10px 18px!important;
font: bold 12px Tahoma,sans-serif!important;
box-shadow:2px 2px 0 #777777!important;
}

/* REMOVE OLD COLORED TAB UNDERLINE */

body:has(.retro-desktop) .chakra-tabs__tab-indicator{
background:#111111!important;
box-shadow:none!important;
}

/* CHARACTER COUNT */

body:has(.retro-desktop) .pp-pg-total-text,
body:has(.retro-desktop) .pp-pg-total-count{
color:#111111!important;
font-family:Tahoma,sans-serif!important;
}

/* CHARACTER LIST OUTER WRAPPER */

body:has(.retro-desktop) .characters-list-container-flex{
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
margin:0 auto!important;
gap:18px!important;
box-sizing:border-box!important;
}

/* SEARCH BAR */

body:has(.retro-desktop) .profile-character-search-input-group{
background:#ffffff!important;
border:3px inset #eeeeee!important;
border-radius:0!important;
box-shadow:2px 2px 0 #777777!important;
}

body:has(.retro-desktop) .profile-character-search-input{
background:#ffffff!important;
color:#111111!important;
border-radius:0!important;
}

body:has(.retro-desktop) .profile-character-search-input::placeholder{
color:#666666!important;
}

/* FILTER BUTTON */

body:has(.retro-desktop) .pp-fl-filter-button{
background:#d5d5d5!important;
color:#111111!important;
border:2px outset #ffffff!important;
border-radius:0!important;
box-shadow:2px 2px 0 #777777!important;
}

body:has(.retro-desktop) .pp-fl-filter-button:hover{
background:#aaaaaa!important;
}

/* SORT DROPDOWN */

body:has(.retro-desktop) .characters-list-container-flex select{
background:#eeeeee!important;
color:#111111!important;
border:2px outset white!important;
border-radius:0!important;
}

/* ==================================================
   SECTION 18 - CHARACTER GRID

   CHANGE:
   repeat(4,...) controls desktop columns.
   ================================================== */

body:has(.retro-desktop) .pp-cc-list-container{
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
height:auto!important;
margin:0 auto!important;
padding:22px!important;
gap:20px!important;
align-items:stretch!important;
justify-content:stretch!important;
background:#d6d6d6!important;
border:3px inset #ffffff!important;
border-radius:0!important;
box-shadow:inset 2px 2px 0 #888888!important;
box-sizing:border-box!important;
}

/* GRID ITEMS */

body:has(.retro-desktop) .pp-cc-list-container>*{
width:100%!important;
max-width:100%!important;
min-width:0!important;
margin:0!important;
box-sizing:border-box!important;
}

/* ==================================================
   SECTION 19 - CHARACTER CARDS
   ================================================== */

body:has(.retro-desktop) .profile-character-card-wrapper{
position:relative!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
margin:0!important;
padding:8px!important;
background:#ffffff!important;
border:3px solid #ffffff!important;
border-right-color:#555555!important;
border-bottom-color:#555555!important;
border-radius:0!important;
box-shadow:4px 4px 0 #00000055!important;
overflow:hidden!important;
box-sizing:border-box!important;
transition:transform .25s,box-shadow .25s!important;
}

body:has(.retro-desktop) .profile-character-card-wrapper:hover{
transform:translateY(-5px)!important;
box-shadow:6px 8px 0 #00000066!important;
}

/* CHARACTER IMAGE */

body:has(.retro-desktop) .profile-character-card-avatar-aspect-ratio{
width:100%!important;
max-width:100%!important;
min-width:0!important;
overflow:hidden!important;
border-radius:0!important;
}

body:has(.retro-desktop) .profile-character-card-avatar-image{
max-width:100%!important;
object-fit:cover!important;
border:3px inset #ffffff!important;
border-radius:0!important;
}

/* OPTIONAL BLACK AND WHITE CHARACTER IMAGES

   Remove the comment marks to activate.

body:has(.retro-desktop) .profile-character-card-avatar-image{
filter:grayscale(100%)!important;
}

*/

/* CHARACTER NAME */

body:has(.retro-desktop) .pp-cc-name{
font:bold 18px Georgia,serif!important;
color:#111111!important;
text-align:center!important;
}

/* CREATOR NAME */

body:has(.retro-desktop) .pp-cc-creator-name,
body:has(.retro-desktop) .profile-character-card-creator-name-box{
color:#222222!important;
}

/* TOKEN COUNT */

body:has(.retro-desktop) .pp-cc-tokens-count{
color:#555555!important;
}

/* OTHER CARD TEXT */

body:has(.retro-desktop) .profile-character-card-wrapper span,
body:has(.retro-desktop) .profile-character-card-wrapper strong,
body:has(.retro-desktop) .profile-character-card-wrapper p{
color:#222222!important;
}

/* ==================================================
   SECTION 20 - CHARACTER TAGS
   ================================================== */

body:has(.retro-desktop) .profile-character-card-wrapper .pp-cc-tags-item,
body:has(.retro-desktop) .profile-character-card-wrapper .pp-cc-tags-regular{
background:#dddddd!important;
color:#111111!important;
border:1px solid #888888!important;
border-radius:0!important;
}

body:has(.retro-desktop) .profile-character-card-wrapper .pp-cc-tags-custom,
body:has(.retro-desktop) .profile-character-card-wrapper .pp-tag-limitless{
background:#333333!important;
color:#ffffff!important;
border:1px solid #111111!important;
border-radius:0!important;
}

body:has(.retro-desktop) .profile-character-card-wrapper .pp-cc-tags-item:hover{
background:#aaaaaa!important;
color:#000000!important;
}

/* REMOVE GRADIENT OVERLAYS */

body:has(.retro-desktop) .pp-cc-gradient-1,
body:has(.retro-desktop) .pp-cc-gradient-2,
body:has(.retro-desktop) .pp-cc-gradient-3{
display:none!important;
}

/* REMOVE STAR FOOTER */

body:has(.retro-desktop) .pp-cc-star-line,
body:has(.retro-desktop) .profile-character-card-star-line{
display:none!important;
}

/* ==================================================
   SECTION 21 - SCROLLBARS
   ================================================== */

.retro-desktop ::-webkit-scrollbar{
width:13px;
height:13px;
}

.retro-desktop ::-webkit-scrollbar-track{
background:#dddddd;
border:2px inset white;
}

.retro-desktop ::-webkit-scrollbar-thumb{
background:#777777;
border:2px outset white;
}

/* ==================================================
   SECTION 22 - TABLET
   ================================================== */

@media(max-width:1100px){

.retro-grid{
grid-template-columns:minmax(0,1fr);
}

body:has(.retro-desktop) .pp-cc-list-container{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}

}

/* ==================================================
   SECTION 23 - MOBILE

   Keeps everything within the screen.
   Character cards appear in one column.
   ================================================== */

@media(max-width:767px){

html,
body,
#root,
#root>div{
max-width:100%!important;
min-width:0!important;
box-sizing:border-box!important;
}

html,
body{
width:100%!important;
margin:0!important;
padding:0!important;
overflow-x:hidden!important;
}

.profile-page-container,
.profile-page-flex{
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
margin:0!important;
padding:4px!important;
gap:12px!important;
box-sizing:border-box!important;
}

.profile-page-container-flex-box{
width:100%!important;
max-width:100%!important;
min-width:0!important;
}

.pp-uc-background.profile-uc-background{
width:100%!important;
max-width:100%!important;
min-width:0!important;
height:auto!important;
margin:0!important;
padding:0 0 12px!important;
overflow:visible!important;
}

.profile-info-wrapper-box{
width:calc(100% - 12px)!important;
max-width:calc(100% - 12px)!important;
min-width:0!important;
margin:6px auto!important;
padding:8px!important;
}

.profile-info-stack,
.profile-info-stack-inner,
.profile-info-hstack{
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
gap:8px!important;
text-align:center!important;
}

img.pp-uc-avatar.profile-avatar{
width:96px!important;
height:96px!important;
min-width:96px!important;
max-width:96px!important;
margin:8px auto!important;
}

h2.pp-uc-title{
font-size:21px!important;
line-height:1.2!important;
max-width:100%!important;
overflow-wrap:anywhere!important;
}

.pp-uc-about-me.profile-about-me{
display:block!important;
position:relative!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
height:auto!important;
margin:10px 0 0!important;
padding:0!important;
overflow:visible!important;
box-sizing:border-box!important;
}

.retro-desktop,
.retro-desktop *{
box-sizing:border-box!important;
min-width:0!important;
}

.retro-desktop{
display:block!important;
position:relative!important;
width:100%!important;
max-width:100%!important;
margin:0 auto!important;
padding:0 3px!important;
overflow:visible!important;
}

.retro-window{
display:block!important;
position:relative!important;
width:100%!important;
max-width:100%!important;
height:auto!important;
margin:0 0 12px!important;
padding:0!important;
overflow:hidden!important;
}

.retro-title{
padding:7px!important;
font-size:10px!important;
gap:4px!important;
overflow:hidden!important;
}

.retro-title span:first-child{
flex:1 1 auto!important;
min-width:0!important;
overflow:hidden!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
}

.retro-controls{
gap:2px!important;
}

.retro-controls i{
width:16px!important;
height:16px!important;
min-width:16px!important;
font-size:9px!important;
}

.retro-menu{
gap:8px!important;
padding:6px!important;
font-size:10px!important;
}

.retro-body{
padding:9px!important;
overflow-wrap:anywhere!important;
}

.retro-body p{
font-size:11px!important;
line-height:1.55!important;
}

.retro-body h3{
font-size:14px!important;
}

.retro-welcome{
min-height:135px!important;
padding:15px 8px!important;
}

.retro-welcome h1{
font-size:clamp(20px,6vw,28px)!important;
line-height:1.15!important;
max-width:100%!important;
margin:0 0 8px!important;
}

.retro-welcome p{
font-size:10px!important;
padding:6px!important;
}

.retro-icons{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:4px!important;
padding:8px 0!important;
}

.retro-icon{
padding:6px 2px!important;
gap:4px!important;
}

.retro-icon b{
font-size:23px!important;
}

.retro-icon span{
font-size:9px!important;
}

.retro-grid{
grid-template-columns:minmax(0,1fr)!important;
gap:0!important;
}

.retro-grid>*{
width:100%!important;
max-width:100%!important;
min-width:0!important;
}

.retro-banner{
width:100%!important;
max-width:100%!important;
height:auto!important;
max-height:130px!important;
object-fit:cover!important;
margin:0 0 10px!important;
}

.retro-desktop img{
max-width:100%!important;
}

.retro-info{
padding:7px!important;
font-size:11px!important;
}

.retro-folder{
width:100%!important;
max-width:100%!important;
margin:6px 0!important;
}

.retro-folder summary{
padding:9px!important;
font-size:11px!important;
}

.retro-folder-content{
padding:10px!important;
font-size:11px!important;
line-height:1.6!important;
}

.retro-friends{
flex-wrap:nowrap!important;
gap:8px!important;
padding:8px 2px 15px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
}

.retro-friend{
flex:0 0 95px!important;
width:95px!important;
min-width:95px!important;
max-width:95px!important;
padding:5px!important;
}

.retro-friend img{
height:80px!important;
max-height:80px!important;
}

.retro-friend span{
font-size:9px!important;
}

.retro-links{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:6px!important;
}

.retro-link{
padding:9px 4px!important;
font-size:10px!important;
}

.retro-note{
width:calc(100% - 8px)!important;
max-width:calc(100% - 8px)!important;
margin:8px 4px!important;
padding:10px!important;
font-size:11px!important;
transform:none!important;
}

.retro-tags-heading{
font-size:16px!important;
}

.retro-tags-list{
gap:6px!important;
}

.retro-tag{
font-size:10px!important;
padding:7px 9px!important;
}

.retro-taskbar{
flex-wrap:wrap!important;
gap:5px!important;
padding:5px!important;
font-size:9px!important;
}

.retro-start{
padding:6px!important;
font-size:9px!important;
}

/* MOBILE CHARACTERS WINDOW */

body:has(.retro-desktop) .profile-tabs-chakra-tabs{
width:100%!important;
max-width:100%!important;
min-width:0!important;
margin:12px auto!important;
padding:49px 8px 10px!important;
box-sizing:border-box!important;
}

body:has(.retro-desktop) .profile-tabs-chakra-tabs::before{
height:38px!important;
font-size:11px!important;
padding:0 8px!important;
}

body:has(.retro-desktop) .profile-tabs-chakra-tabs::after{
top:7px!important;
right:7px!important;
font-size:9px!important;
padding:4px!important;
}

body:has(.retro-desktop) .profile-tabs-panels,
body:has(.retro-desktop) .pp-tabs-panels,
body:has(.retro-desktop) .profile-tab-panel,
body:has(.retro-desktop) .characters-list-container-flex{
width:100%!important;
max-width:100%!important;
min-width:0!important;
box-sizing:border-box!important;
}

body:has(.retro-desktop) .pp-cc-list-container{
display:grid!important;
grid-template-columns:minmax(0,1fr)!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
height:auto!important;
margin:10px auto!important;
padding:8px!important;
gap:12px!important;
box-sizing:border-box!important;
}

body:has(.retro-desktop) .pp-cc-list-container>*,
body:has(.retro-desktop) .profile-character-card-wrapper{
width:100%!important;
max-width:100%!important;
min-width:0!important;
margin:0!important;
box-sizing:border-box!important;
}

body:has(.retro-desktop) .profile-character-card-wrapper{
padding:7px!important;
}

body:has(.retro-desktop) .profile-character-card-avatar-aspect-ratio,
body:has(.retro-desktop) .profile-character-card-avatar-image{
max-width:100%!important;
min-width:0!important;
}

body:has(.retro-desktop) .pp-cc-name{
font-size:16px!important;
}

}

/* EXTRA SMALL PHONES */

@media(max-width:380px){

.retro-icons{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}

.retro-links{
grid-template-columns:minmax(0,1fr)!important;
}

.retro-welcome h1{
font-size:20px!important;
}

.retro-body{
padding:7px!important;
}

}

</style>

<!-- ==================================================
     HTML STARTS HERE

     Replace all placeholder text and URLs.
     ================================================== -->

<div class="retro-desktop">

<!-- ==================================================
     WELCOME WINDOW

     CHANGE:
     Welcome title and subtitle.
     ================================================== -->

<div class="retro-window">
<div class="retro-title">
<span>💻 Welcome_to_my_desktop.exe</span>
<div class="retro-controls">
<i>_</i><i>□</i><i>×</i>
</div>
</div>

<div class="retro-menu">
<span>File</span>
<span>Edit</span>
<span>View</span>
<span>Favorites</span>
<span>Help</span>
</div>

<div class="retro-body">
<div class="retro-welcome">
<h1>YOUR WELCOME TEXT</h1>
<p>♡ Your custom subtitle goes here ♡</p>
</div>
</div>

<div class="retro-status">
System ready • Welcome, visitor!
</div>
</div>

<!-- ==================================================
     DESKTOP SHORTCUTS

     Change emoji and shortcut labels.
     Keep href targets matching section IDs.
     ================================================== -->

<div class="retro-icons">

<a class="retro-icon" href="#retro-about">
<b>💻</b>
<span>My Computer</span>
</a>

<a class="retro-icon" href="#retro-files">
<b>📁</b>
<span>Documents</span>
</a>

<a class="retro-icon" href="#retro-friends">
<b>✉</b>
<span>Friends</span>
</a>

<a class="retro-icon" href="#retro-links">
<b>🌐</b>
<span>Internet</span>
</a>

<a class="retro-icon" href="#retro-notes">
<b>📝</b>
<span>Notepad</span>
</a>

</div>

<!-- ==================================================
     MAIN TWO-COLUMN GRID
     ================================================== -->

<div class="retro-grid">

<!-- ==================================================
     ABOUT ME WINDOW

     CHANGE:
     Banner, name, age, pronouns,
     timezone, status and description.
     ================================================== -->

<div class="retro-window" id="retro-about">

<div class="retro-title">
<span>🖥 About_Me.txt</span>
<div class="retro-controls">
<i>_</i><i>□</i><i>×</i>
</div>
</div>

<div class="retro-menu">
<span>File</span>
<span>Edit</span>
<span>Format</span>
</div>

<div class="retro-body">

<img class="retro-banner" src="https://placehold.co/1000x400/222222/ffffff/png?text=YOUR+BANNER" alt="Your banner">

<h3>♡ User Information</h3>

<div class="retro-info">
<strong>Name:</strong> YOUR NAME
</div>

<div class="retro-info">
<strong>Age:</strong> YOUR AGE
</div>

<div class="retro-info">
<strong>Pronouns:</strong> YOUR PRONOUNS
</div>

<div class="retro-info">
<strong>Timezone:</strong> YOUR TIMEZONE
</div>

<div class="retro-info">
<strong>Status:</strong> YOUR STATUS
</div>

<h3 style="margin-top:22px;">About this user...</h3>

<p>
Write your introduction here. Talk about yourself, your hobbies, interests, or anything visitors should know.
</p>

<p>
Optional second paragraph. You can remove this or add more paragraphs.
</p>

</div>

<div class="retro-status">
About_Me.txt • File loaded
</div>

</div>

<!-- ==================================================
     DOCUMENTS WINDOW

     Folders open and close when clicked.

     To add more folders, duplicate an entire
     details element.
     ================================================== -->

<div class="retro-window" id="retro-files">

<div class="retro-title">
<span>📁 My_Documents</span>
<div class="retro-controls">
<i>_</i><i>□</i><i>×</i>
</div>
</div>

<div class="retro-menu">
<span>File</span>
<span>Edit</span>
<span>View</span>
</div>

<div class="retro-body">

<h3>♡ My Documents</h3>
<p>Click on a folder to read more.</p>

<!-- FOLDER ONE -->

<details class="retro-folder">
<summary>Rules.txt</summary>
<div class="retro-folder-content">
Write your rules here.
<p>Include anything visitors should know before interacting with your profile.</p>
</div>
</details>

<!-- FOLDER TWO -->

<details class="retro-folder">
<summary>Boundaries.txt</summary>
<div class="retro-folder-content">
Write your boundaries here.
<p>Explain what you are comfortable and uncomfortable with.</p>
</div>
</details>

<!-- FOLDER THREE -->

<details class="retro-folder">
<summary>Extra_Info.txt</summary>
<div class="retro-folder-content">
Write extra information here.
</div>
</details>

<!-- FOLDER FOUR -->

<details class="retro-folder">
<summary>Random.txt</summary>
<div class="retro-folder-content">
Write anything else here.
</div>
</details>

<!--
ADD ANOTHER FOLDER BY COPYING THIS:

<details class="retro-folder">
<summary>YOUR_FOLDER.txt</summary>
<div class="retro-folder-content">
YOUR TEXT HERE
</div>
</details>

-->

</div>

<div class="retro-status">
4 folders • Click to open
</div>

</div>

</div>

<!-- ==================================================
     FRIENDS WINDOW

     CHANGE:
     Friend names, image URLs and profile URLs.

     Duplicate a retro-friend block to add more.
     ================================================== -->

<div class="retro-window" id="retro-friends">

<div class="retro-title">
<span>✉ Friends_and_Favorites</span>
<div class="retro-controls">
<i>_</i><i>□</i><i>×</i>
</div>
</div>

<div class="retro-menu">
<span>File</span>
<span>View</span>
<span>Favorites</span>
</div>

<div class="retro-body">

<h3>♡ Favorite Creators / Friends</h3>
<p>Scroll sideways to see more!</p>

<div class="retro-friends">

<a class="retro-friend" href="https://example.com/friend1">
<img src="https://placehold.co/300x300/222222/ffffff/png?text=IMAGE+1" alt="Friend one">
<span>FRIEND ONE</span>
</a>

<a class="retro-friend" href="https://example.com/friend2">
<img src="https://placehold.co/300x300/444444/ffffff/png?text=IMAGE+2" alt="Friend two">
<span>FRIEND TWO</span>
</a>

<a class="retro-friend" href="https://example.com/friend3">
<img src="https://placehold.co/300x300/666666/ffffff/png?text=IMAGE+3" alt="Friend three">
<span>FRIEND THREE</span>
</a>

<a class="retro-friend" href="https://example.com/friend4">
<img src="https://placehold.co/300x300/333333/ffffff/png?text=IMAGE+4" alt="Friend four">
<span>FRIEND FOUR</span>
</a>

<a class="retro-friend" href="https://example.com/friend5">
<img src="https://placehold.co/300x300/555555/ffffff/png?text=IMAGE+5" alt="Friend five">
<span>FRIEND FIVE</span>
</a>

<!--
ADD ANOTHER FRIEND:

<a class="retro-friend" href="YOUR_PROFILE_URL">
<img src="YOUR_IMAGE_URL" alt="Friend">
<span>FRIEND NAME</span>
</a>

-->

</div>
</div>

<div class="retro-status">
5 creators • Scroll horizontally →
</div>

</div>

<!-- ==================================================
     SECOND GRID
     ================================================== -->

<div class="retro-grid">

<!-- ==================================================
     INTERNET / LINKS WINDOW

     Replace example URLs and link names.
     Duplicate retro-link elements to add more.
     ================================================== -->

<div class="retro-window" id="retro-links">

<div class="retro-title">
<span>🌐 Internet_Explorer</span>
<div class="retro-controls">
<i>_</i><i>□</i><i>×</i>
</div>
</div>

<div class="retro-menu">
<span>File</span>
<span>Favorites</span>
<span>Tools</span>
</div>

<div class="retro-body">

<h3>♡ My Links</h3>
<p>Click a shortcut to visit another page.</p>

<div class="retro-links">

<a class="retro-link" href="https://example.com/link1">
✉ FIRST LINK
</a>

<a class="retro-link" href="https://example.com/link2">
🌐 SECOND LINK
</a>

<a class="retro-link" href="https://example.com/link3">
📁 THIRD LINK
</a>

<a class="retro-link" href="https://example.com/link4">
💻 FOURTH LINK
</a>

<a class="retro-link" href="https://example.com/link5">
☆ FIFTH LINK
</a>

<a class="retro-link" href="https://example.com/link6">
♡ SIXTH LINK
</a>

<!--
ADD ANOTHER LINK:

<a class="retro-link" href="YOUR_URL">
☆ YOUR LINK NAME
</a>

-->

</div>
</div>

<div class="retro-status">
Connected to the internet ♡
</div>

</div>

<!-- ==================================================
     NOTEPAD WINDOW

     Edit notes and tag links.
     Duplicate retro-note for more notes.
     ================================================== -->

<div class="retro-window" id="retro-notes">

<div class="retro-title">
<span>📝 Notepad.exe</span>
<div class="retro-controls">
<i>_</i><i>□</i><i>×</i>
</div>
</div>

<div class="retro-menu">
<span>File</span>
<span>Edit</span>
<span>Format</span>
</div>

<div class="retro-body">

<h3>Little Notes ♡</h3>

<!-- FIRST NOTE -->

<div class="retro-note">
<strong>♡ Reminder!</strong>
Write an important reminder or announcement here.
</div>

<!-- SECOND NOTE -->

<div class="retro-note">
<strong>☆ Important!</strong>
Write another message here.

<!-- CUSTOM TAGS -->

<div class="retro-tags-section">

<div class="retro-tags-heading">
♡ Tags
</div>

<div class="retro-tags-list">

<a class="retro-tag" href="https://example.com/tag1">♡ TAG ONE</a>

<a class="retro-tag" href="https://example.com/tag2">✧ TAG TWO</a>

<a class="retro-tag" href="https://example.com/tag3">★ TAG THREE</a>

<a class="retro-tag" href="https://example.com/tag4">☾ TAG FOUR</a>

<a class="retro-tag" href="https://example.com/tag5">♡ TAG FIVE</a>

<a class="retro-tag" href="https://example.com/tag6">✿ TAG SIX</a>

<a class="retro-tag" href="https://example.com/tag7">☆ TAG SEVEN</a>

<a class="retro-tag" href="https://example.com/tag8">✧ TAG EIGHT</a>

<!--
ADD ANOTHER TAG:

<a class="retro-tag" href="YOUR_TAG_URL">
☆ YOUR TAG NAME
</a>

-->

</div>
</div>

</div>

</div>

<div class="retro-status">
Notes saved successfully
</div>

</div>

</div>

<!-- ==================================================
     BOTTOM TASKBAR

     Change the Start and ONLINE text.
     ================================================== -->

<div class="retro-taskbar">

<div class="retro-start">
☆ Start
</div>

<div>
♡ ☆ ONLINE
</div>

</div>

</div>

<!-- ==================================================
     END OF TEMPLATE

     CUSTOMIZATION CHECKLIST:

     1. Change the profile window title.
     2. Change the welcome text.
     3. Replace your banner image.
     4. Fill in your About Me.
     5. Customize your folders.
     6. Replace friends and images.
     7. Replace all example links.
     8. Customize notes and tags.
     9. Adjust colors if desired.
     10. Test on desktop and mobile.

     The character section is styled using
     Janitor AI's existing page elements.
     Do not manually add bot cards here.

     END OF CODE
     ================================================== -->

✦ CREDITS & USAGE

MADE BY KASHVAULT

This template is free to use and customize for your own profile, but please do at least credit me with a link to my profile or the bot where you found this CSS!

──────── ✦ ────────

Warning