:root {
    --content: #d0bffa;
    --win-bg: #E6DFF2;
    --win-bg-darker: #D8CEEB;
    --win-border-light: #FFFFFF;
    --win-border-shadow: #8A72B2;
    --win-border-dark: #43315C;
    --win-title-blue: #7F5FA7;
    --win-title-blue2: #A580D1;
    --text-purple: #3A1F4C;
}

body {
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    background-color: #08031A;
    color: #fceaff;
    background-image: url("https://moira-whimsimoth.neocities.org/images/backgrounds-1.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    overflow-x: hidden; 
}

* {
    box-sizing: border-box;
}

#container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    margin-bottom: 80px;
}

#container a {
    color: #531199;
    text-decoration: none;
    font-size: 11px;
}

#header {
    width: 72%;
    background-color: rgba(0,0,0,0.0);
    height: 200px;
    margin: auto;
    background-repeat: no-repeat;
    background-image: url("https://moirawhimsimoth.carrd.co/assets/images/image01.png?v=929ebe35");
    background-size: 100%;
    margin-top: 30px;
}

#flex {
    display: flex;
    margin-top: 5px;
}

.main-window-frame {
    background-color: var(--win-bg);
    padding: 3px;
    border-top: 2px solid var(--win-border-light);
    border-left: 2px solid var(--win-border-light);
    border-right: 2px solid var(--win-border-dark);
    border-bottom: 2px solid var(--win-border-dark);
    box-shadow: inset 1px 1px 0px var(--win-border-light), inset -1px -1px 0px var(--win-border-shadow);
}
        
#mainframe {
    width: 100%;
    border: none;
    overflow: hidden;
    display: block;
    background-color: #a28afe !important;
    min-height: 400px;
    margin: 0 !important;
    border-top: 2px solid var(--win-border-dark) !important;
    border-left: 2px solid var(--win-border-dark) !important;
    border-right: 2px solid var(--win-border-light) !important;
    border-bottom: 2px solid var(--win-border-light) !important;
    border-radius: 0px !important;
}

main {
    background-color: transparent !important;
    flex: 1;
    order: 2;
    margin: 0 !important;
    padding: 0 10px !important;            
}

aside {
    background-color: #fba4b5;
    background-image: linear-gradient(rgba(251, 164, 181, 0.85), rgba(251, 164, 181, 0.85));
    width: 250px;
    padding: 8px;
    color: #683651;
    padding-bottom: 80px; 
    border-radius: 0px !important;
}

#leftSidebar { 
    order: 1; 
    border-top: 2px solid var(--win-border-light);
    border-left: 2px solid var(--win-border-light);
    border-bottom: 2px solid var(--win-border-dark);
} 

#rightSidebar { 
    order: 3;
    border-top: 2px solid var(--win-border-light);
    border-right: 2px solid var(--win-border-dark);
    border-bottom: 2px solid var(--win-border-dark);
}

.aside-box, .aside-box2 {
    margin-top: 6px; 
    margin-bottom: 6px;
    position: relative;
    background: var(--win-bg) !important;
    color: var(--text-purple) !important;
    padding: 4px;
    border-top: 2px solid var(--win-border-light) !important;
    border-left: 2px solid var(--win-border-light) !important;
    border-right: 2px solid var(--win-border-dark) !important;
    border-bottom: 2px solid var(--win-border-dark) !important;
    border-radius: 0px !important;
    box-shadow: inset 1px 1px 0px var(--win-border-light);
}

.aside-box2 {
    background: var(--win-bg-darker) !important;
}

.aside-title, .aside-title2, .main-title-bar {
    position: static !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(90deg, var(--win-title-blue), var(--win-title-blue2)) !important;
    padding: 4px 6px !important;
    font-size: 9px !important;
    font-weight: normal !important;
    color: #FFFFFF !important;
    font-family: 'Press Start 2P', monospace !important;
    letter-spacing: 0px;
    height: 22px;
}

.main-title-bar {
    font-size: 11px !important;
    height: 26px;
}

.title-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.window-buttons {
    display: flex;
    gap: 2px;
}

/* --- WINDOWS XP TREE VIEW STYLING --- */

/* Base tree container alignment */
.tree-view {
    padding-left: 5px !important;
    margin: 0;
    list-style: none;
    color: #000;
}

/* Individual list entries */
.tree-item {
    position: relative;
    margin-bottom: 4px !important;
    padding-left: 16px; /* Space for the +/- box */
}

/* The true Windows XP style folder/file toggles */
.tree-view .collapse-toggle {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #000 !important;
    padding: 2px 0 2px 24px !important; /* Left padding makes room for the folder icon */
    font-size: 11px !important; /* Matches main text sizing */
    width: auto !important;
    display: inline-block;
    position: relative;
    cursor: pointer;
    line-height: 16px;
}

/* Creating the classic XP [+] box via CSS pseudo-element */
.tree-view .collapse-toggle::before {
    content: "+";
    position: absolute;
    left: -16px;
    top: 3px;
    width: 9px;
    height: 9px;
    border: 1px solid #808080;
    background: #FFF;
    color: #000;
    font-family: monospace; /* Simple pixel-perfect alignment for + symbol */
    font-size: 9px;
    line-height: 7px;
    text-align: center;
    font-weight: bold;
}

/* Switch the sign to [-] when the folder is active/open */
.tree-view .collapse-toggle.active::before {
    content: "-";
    line-height: 5px; /* Tiny adjustment for minus look */
}

/* --- LAVENDER FOLDER ICON ENGINES --- */

/* Closed Lavender Folder Icon */
.tree-view .collapse-toggle::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: 16px;
    height: 14px;
    image-rendering: pixelated;
    /* Inline Lavender Folder SVG */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='14' viewBox='0 0 16 14'><path d='M0 2h4l2 2h10v10H0V2z' fill='%23D8CEEB' stroke='%238A72B2' stroke-width='1'/><path d='M1 5h14v8H1V5z' fill='%23E6DFF2'/></svg>");
    background-repeat: no-repeat;
}

/* Open Lavender Folder Icon when clicked */
.tree-view .collapse-toggle.active::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='14' viewBox='0 0 16 14'><path d='M0 2h4l2 2h10v3H2l-2 5V2z' fill='%23D8CEEB' stroke='%238A72B2' stroke-width='1'/><path d='M0 7h16l-3 6H0V7z' fill='%23E6DFF2' stroke='%238A72B2' stroke-width='1'/></svg>");
}

/* --- DOCUMENT / SINGLE PAGE STYLING (Home) --- */
.doc-item {
    padding-left: 20px; /* Aligns with folder text */
}

#collapse-toggle2 a {
    background: transparent !important;
    border: none !important;
    padding: 2px 0 2px 22px !important;
    display: inline-block !important;
    position: relative;
    color: #000 !important;
    line-height: 16px;
}

/* Lavender Document Page Icon for items without submenus */
#collapse-toggle2 a::after {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 14px;
    height: 15px;
    image-rendering: pixelated;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15'><path d='M1 0h8l4 4v11H1V0z' fill='%23E6DFF2' stroke='%238A72B2' stroke-width='1'/><path d='M9 1v3h3L9 1z' fill='%23D8CEEB'/></svg>");
    background-repeat: no-repeat;
}

/* Selection Highlight Effect matching Classic Windows theme */
.tree-view .collapse-toggle:hover, 
#collapse-toggle2 a:hover {
    background-color: var(--win-title-blue) !important;
    color: #FFF !important;
}

/* Indent the children pages under the submenus */
.tree-view .submenu {
    padding-left: 24px !important;
    margin-top: 2px;
    list-style: none;
}

/* --- ONLY SHRINK THE SUBMENU LINK FONT --- */
.tree-view .submenu a {
    background: transparent !important;
    border: none !important;
    padding: 2px 4px !important;
    font-size: 9px !important; /* Shrunk down to a crisp retro 8px */
    display: inline-block;
    color: #000 !important;
    line-height: 14px;
}

.tree-view .submenu li {
    margin-bottom: 2px;
    position: relative;
}

/* Strip down default sidebar link rules inside tree submenus */
.tree-view .submenu a {
    background: transparent !important;
    border: none !important;
    padding: 1px 4px !important;
    display: inline-block;
    color: #000 !important;
}

.tree-view .submenu a:hover {
    background: var(--win-title-blue) !important;
    color: #FFF !important;
}


.win-btn {
    background: var(--win-bg);
    color: #000;
    border-top: 1px solid var(--win-border-light);
    border-left: 1px solid var(--win-border-light);
    border-right: 1px solid var(--win-border-dark);
    border-bottom: 1px solid var(--win-border-dark);
    padding: 1px 4px;
    font-size: 8px;
    cursor: pointer;
}

.aside-content {
    margin-top: 4px;
    padding: 6px;
    background: #FFF;
    color: #000;
    border-top: 1px solid var(--win-border-dark);
    border-left: 1px solid var(--win-border-dark);
    border-right: 1px solid var(--win-border-light);
    border-bottom: 1px solid var(--win-border-light);
}

.biggering {
    text-align: center;
    width: 100%;
}

/* Container layout */
.mediums {
    font-size: 11px; /* Matches your body font size */
    line-height: 1.5;
}

/* Individual update row */
.news-row {
    display: flex;
    align-items: center; /* Forces the symbol and text to stay perfectly centered on the same line */
    line-height: 1.4;
}

/* The Symbol itself */
.mediums .symb {
    font-size: 22px !important;    /* Keeps the symbol big and readable */
    display: inline-block;
    position: relative;
    
    /* Perfect vertical alignment with your text baseline */
    vertical-align: baseline;      
    top: 2px;                      
    
    /* Collapses the invisible text boxes */
    margin-top: -10px !important;  
    margin-bottom: -4px !important;

    /* The Spacing Fix: Pulls the text completely in, then forces an exact 2px gap */
    margin-right: -4px !important; 
    padding-right: 2px !important;
}

.aside-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Centers the image if it's smaller than the box */
}

.unruly-image img {
margin-top: -30px !important; /* Changed to negative to actively pull it UP */
}

.biggering p {
    font-size: 25px !important;
    line-height: 1.8;
    margin: 0;
    padding: 8px 0;
    text-align: center;
    color: var(--text-purple) !important;
}

.status-padding {
    font-size: 9px;
    line-height: 1.4;
}
            
#leftSidebar a:link, #leftSidebar a:visited, #leftSidebar a:active {
    background: #E6DFF2;
    text-decoration: none;
    border: 1px solid var(--win-border-dark);
    color: var(--text-purple);
    padding: 2px 4px;
    display: inline-block;
    margin-bottom: 2px;
}

#leftSidebar a:hover {
    background: var(--win-title-blue);
    color: #FFF;
}

.collapsable, .collapsable ul {
    list-style: none;
    padding-left: 0px;
    margin: 0;
}

.collapsable li {
    margin-bottom: 8px;
}

.submenu {
    display: none;
    padding-left: 8px !important;
    margin-top: 5px;
}

.collapse-toggle {
    background: var(--win-bg-darker);
    border-top: 1px solid var(--win-border-light);
    border-left: 1px solid var(--win-border-light);
    border-right: 1px solid var(--win-border-dark);
    border-bottom: 1px solid var(--win-border-dark);
    color: #000;
    cursor: pointer;
    padding: 2px 4px;
    text-align: left;
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    width: 100%;
}

#collapse-toggle2 {
    display: block;
    border: 0;
}

#collapse-toggle2 a {
    width: 100% !important;
}

footer {
    background-color: var(--win-bg);
    color: #000;
    height: 40px;
    padding: 0 10px;
    position: fixed; 
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    z-index: 9999;
    border-top: 2px solid var(--win-border-light);
    box-shadow: inset 0 1px 0 var(--win-border-light);
}
            
.foot1 { margin-right: auto; }
.foot3 { margin-right: 15px; display: flex; align-items: center; }
.foot4 { display: flex; align-items: center; }

h1, h2, h3 {
    color: var(--text-purple);
    margin: 0 0 10px 0;
    text-align: center;
}

h1 { font-size: 14px; }
h3 { font-size: 11px; }

.box, .box2, .box3 {
    background-color: var(--win-bg) !important;
    border-top: 1px solid var(--win-border-light) !important;
    border-left: 1px solid var(--win-border-light) !important;
    border-right: 2px solid var(--win-border-dark) !important;
    border-bottom: 2px solid var(--win-border-dark) !important;
    padding: 12px !important;
    color: var(--text-purple) !important;
    border-radius: 0px !important;
    margin-bottom: 15px;
}

/* ===================================================
   RIGHT SIDEBAR: Horizontal Icons (Twitch, Bluesky, etc)
   =================================================== */
#rightSidebar .social-icons {
    display: flex;
    flex-direction: row;  /* Forces them into a horizontal row */
    justify-content: center;
    gap: 8px;             /* Space between icons */
    margin-bottom: 12px;
}

#rightSidebar .social-icons img {
    width: 24px !important;   /* Keeps them small */
    height: 24px !important;  /* Keeps them square */
    display: inline-block !important;
    margin: 0 !important;
    object-fit: contain;
    image-rendering: pixelated;
}

/* ===================================================
   LEFT SIDEBAR: Vertical Status Rows (Discord, Switch, Steam)
   =================================================== */
.social-list {
    display: flex;
    flex-direction: column; /* Forces them to stack vertically */
    gap: 12px;
}

.social-row {
    display: flex;
    align-items: center;    /* Perfect vertical alignment with text */
    gap: 8px;
    text-align: left;
}

.social-row img {
    width: 24px !important;
    height: 24px !important;
    display: inline-block !important;
    margin: 0 !important;
    object-fit: contain;
    image-rendering: pixelated;
    flex-shrink: 0;
}

.social-row span {
    font-size: 9px;
    white-space: nowrap;
}



.profile-row {
    display: flex;
    flex-direction: row;
    gap: 15px;
    width: 100%;
    margin-top: 10px;
}

.shim1 { flex: 0 0 auto; width: 80px; }
.shim2 { flex: 1; text-align: left; }
.shim3 { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.shim3 img { image-rendering: pixelated; }

/* The Base Retro Link Style - Old School PC Gray Theme */
.retro-link, 
.retro-link:link,
.retro-link:visited,
.retro-link:hover,
.retro-link:active {
    background-color: #d4d0c8 !important; /* Forces the classic gray over style2.css */
    color: #000000 !important;            /* Forces solid system black text */
    font-family: 'Press Start 2P', monospace !important; /* Fixed: Swapped to Press Start 2P */
    font-size: 12px !important;           /* Fixed: Made the font bigger */
    padding: 12px 8px !important;         /* Adjusted padding slightly to give the larger font room */
    text-align: center;
    text-decoration: none !important;     /* Removes any global underlines */
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    display: block;
    
    /* High-fidelity 3D Bevel: Bright white top/left, Dark gray & black bottom/right */
    border-top: 2px solid #ffffff !important;
    border-left: 2px solid #ffffff !important;
    border-right: 2px solid #404040 !important;
    border-bottom: 2px solid #404040 !important;
    
    /* Double-layer pixel borders */
    box-shadow: inset 1px 1px 0px #fff, 1px 1px 0px #000 !important;
}

/* THE CLICK EFFECT: Depresses button completely */
.retro-link:active {
    background-color: #d4d0c8 !important; /* Keeps it gray when clicked */
    color: #fff !important;            /* Keeps text black when clicked */
    
    /* Invert the borders to push the button into the screen */
    border-top: 2px solid #404040 !important;
    border-left: 2px solid #404040 !important;
    border-right: 2px solid #ffffff !important;
    border-bottom: 2px solid #ffffff !important;
    
    box-shadow: inset 1px 1px 0px #000 !important;
    
    /* Text shifting down & right by 1px to sell the physical drop depth */
    padding-top: 13px !important;
    padding-bottom: 11px !important;
    padding-left: 9px !important;
    padding-right: 7px !important;
}
@media only screen and (max-width: 1200px) {
    #flex { flex-direction: column; }
    aside { width: 100%; }
    main { order: 1; }
    #leftSidebar { order: 2; }
    #rightSidebar { order: 3; }
}