:root {
     --dk-color:#ffffff;
     --mid-color:#ffffff;
     --lt-color:#ffe6f4;
     --dkest-color:#9b736c;
     --accent:#9b736c;
}

html, body {
     margin:0;
     padding:0;
     height:100%;
     font-family:Verdana;
     font-size:11px;
     background-image:url('bg.png');
     background-repeat:repeat;
     color:var(--dkest-color);
}

#container {
    max-width: 1000px;
    margin: 15px auto;
    background-color: var(--lt-color);
    border: 1px solid var(--dkest-color);
    position: relative; /* <--- CRITICAL: Keeps objects inside the site */
}
#header {
     width:100%;
     height:180px; 
     background-image: url('banner.png');
     background-size: cover; 
     background-position: center;
     border-bottom:1px solid var(--dkest-color);
}

.title {
     font-family: 'Press Start 2P', cursive;
     font-size: 20px;      
     text-align: left;      
     padding-left: 25px;   
     padding-top: 45px;     
     color: var(--dkest-color);
     text-shadow: 2px 2px 0px white; 
}

.navbar ul {
     list-style-type: none;
     padding: 0;
     margin: 0;
     display: flex;
     justify-content: space-around; 
     align-items: center;
     width: 100%;
}

.navbar li {
     position: relative;
     text-align: center;
}

.navbar a {
     text-decoration: none;
     display: block;
     color: var(--accent);
     padding: 10px 0px; 
     transition: 0.2s all linear;
     font-weight: bold;
     font-size: 12px;
}

.navbar li > ul {
     background: var(--mid-color);
     display: none;
     position: absolute;
     top: 100%;
     left: 50%;
     transform: translateX(-50%);
     min-width: 150px;
     z-index: 999;
     border: 1px solid var(--dkest-color);
     padding: 0;
     list-style: none;
}

.wrapper {
     display: flex;        
     flex-direction: row;
     width: 100%;          
     justify-content: space-between; /* Pushes sidebars to the left and right */
     align-items: flex-start; /* Prevents columns from stretching unevenly */
}



/* --- FINAL SIDEBAR & CONTENT FIX --- */
#left-sidebar {
     width: 200px;
     flex-shrink: 0;
     border-right: 1px solid var(--dkest-color);
     background-color: var(--lt-color);
}

.main-content {
     flex: 1; 
     min-width: 0; 
     background-color: #ffe6f4;
     min-height: 400px;
}

#right-sidebar {
    width: 200px;
    flex-shrink: 0;
    border-left: 1px solid var(--dkest-color);
}

#left-sidebar .section {
    background-color: #ffffff !important; 
    margin: 15px;                         
    padding: 0px;
    border: 1px solid var(--dkest-color);
    overflow: hidden;
}

.section-title {
     text-align:center;
     font-weight:bold;
     padding:5px;
     background-color:var(--mid-color);
     color:var(--dkest-color);
     border-bottom:1px solid var(--dkest-color);
}

.content {
     padding:15px;
}

#footer {
     text-align:center;
     padding:15px;
     border-top:1px solid var(--dkest-color);
     background: white;
}

.cd-container {
    position: relative;
    float: right; /* Keeps it on the right side like your original disc */
    width: 200px; 
    margin-left: 15px;
    margin-bottom: 10px;
}

/* We move the float and margins from the image to the container above */
.cd-graphic {
    width: 100%;
    height: auto;
    display: block;
    transform: rotate(5deg); 
}

.flag-overlay {
    position: absolute;
    top: 20px;   /* Adjust these pixels to move the flag around on the disc */
    right: 20px; 
    width: 60px; /* Adjust size of the flag */
    z-index: 10;
}

@media only screen and (max-width: 800px) {
     .wrapper { flex-direction: column; }
     #left-sidebar, #right-sidebar, .main-content { width: 100%; border: none; border-bottom: 1px solid var(--dkest-color); }
}
/* Bio container to keep things tidy */
.bio-container {
    display: block;
    overflow: hidden; /* <--- This is the "Clearfix" that fixes the white box */
    margin-top: 20px;
}

/* Positioning the Popteen Poster */
.popteen-poster {
    float: left;            
    width: 250px;           
    height: auto;
    margin-right: 20px;     
    margin-bottom: 10px;
    border: 3px solid #f8bbd0; 
    border-radius: 4px;
}

/* Ensure the bio text has a nice line height for readability */
.bio-container p {
    line-height: 1.6;
    font-size: 11px;
    text-align: justify;
}
/* --- GLOBAL BOX SETTINGS --- */
/* This creates the separate white boxes on the pink background */
/* FIX THE SIDEBARS: Remove the 15px margin to stop them from shrinking */


#right-sidebar .section {
    background-color: #ffffff;
    margin: 10px; /* Reduced from 15px to save space */
    padding: 10px;
    border: 1px solid #f8bbd0; /* Optional: adds a cute border */
}

/* Styles the text headings inside the white boxes */
.section .section-title {
     background: transparent;
     border: none;
     text-align: center;
     padding-bottom: 10px;
     font-weight: bold;
}

/* --- MIDDLE CONTENT BOX --- */
.middle-white-box {
     background-color: #ffffff;
     border: none;
     border-radius: 0;
     padding: 20px;
     margin-top: 15px;
     clear: both; /* Keeps it under the CD graphic */
}

/* ADJUST FLOATING POSITIONS */
.floating-icecream {
    position: absolute;
    bottom: 20px;
    left: -60px; /* Moves it slightly outside the left border */
    width: 120px;
    z-index: 9999;
}

.floating-fluttershy {
     position: absolute;
     top: 185px; 
     right: -35px;
     width: 90px;
     z-index: 9999;
     image-rendering: pixelated;
}

.floating-angel {
    position: absolute;
    bottom: 40px; 
    right: 20px; /* Anchored to the bottom right of the site */
    width: 140px;
    z-index: 9999;
}
.floating-sylvanian {
     position: absolute;
     bottom: -20px;   /* Pulls it slightly over the footer area */
     right: -20px;    /* Pulls it slightly off the right edge */
     width: 80px;     /* Adjust size as needed */
     z-index: 9999;
}
/* --- NEW STUFF TO ADD --- */

/* This makes the pfpfrilltop.png and pfpfrillbottom.png stretch correctly */
.pfp-frill {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

/* This adds padding BACK to the text and doll so they aren't squished */
#left-sidebar .content {
    padding: 10px;
}

/* This styles the Angel in the right sidebar so it doesn't float away */
.sidebar-angel img {
    display: block;
    margin: 10px auto;
    width: 150px; /* Adjust size to fit your sidebar */
    height: auto;
}

/* This styles the Gal Pals sign */
.blinkieangel-container img {
    display: block;
    margin: 5px auto;
    width: 90%;
}
/* Container for the box to make absolute positioning work */
.bow-box {
    position: relative; 
}

/* The floating bow styles */
.floating-p-bow {
    position: absolute;
    top: -15px;    /* Pulls it up over the top border */
    left: -10px;   /* Pulls it slightly to the left */
    width: 50px;   /* Adjust this size to match your model */
    z-index: 100;  /* Ensures it stays on top of the border */
}
/* 1. This makes the second box the 'anchor' for the floating bow */
.bow-box {
    position: relative;
}

/* 2. This positions the pink bow gif on the top-left corner */
.floating-p-bow {
    position: absolute;
    top: -12px;
    left: -12px;
    width: 45px;
    z-index: 100;
}

/* 3. This creates the 2-column grid for your 12 gif buttons */
.button-grid {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;
    gap: 8px; /* Space between the buttons */
    padding: 10px;
}

/* 4. This controls the size of each gif button */
.button-grid img {
    width: 44%; /* Fits two buttons side-by-side */
    height: auto;
    image-rendering: pixelated; /* Keeps the pixel art sharp */
}

/* 5. Space for the third small box at the bottom */
.flex-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 5px;
}
/* This allows the bunny to sit next to the text */
.profile-box {
    position: relative;
}

.bunny-sticker {
    float: right;      /* Pushes it to the right side */
    width: 60px;       /* Adjust size as needed */
    height: auto;
    margin-top: 10px;  /* Moves it down a bit from the Blythe pic */
    image-rendering: pixelated; 
}
/* Styling the sidebar list */
.sidebar-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-nav li {
    position: relative; /* Keeps the sub-menu attached to this item */
    border-bottom: 1px dashed #ffe6f4;
}

.sidebar-nav a {
    display: block;
    padding: 6px 0;
    text-decoration: none;
    color: var(--dkest-color);
    font-size: 11px;
}

.sidebar-nav a:hover {
    color: #ff85a2;
    padding-left: 5px; /* Cute little slide effect */
    transition: 0.2s;
}

/* --- THE SHRINES POP-OUT --- */
.submenu {
    display: none; /* Hide by default */
    position: absolute;
    left: -185px;  /* Pops out to the LEFT into the middle column */
    top: -5px;
    width: 170px;
    background-color: #ffffff;
    border: 1px solid var(--dkest-color);
    padding: 5px;
    z-index: 9999;
    list-style: none;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

/* Show the menu when hovering */
.has-submenu:hover .submenu {
    display: block;
}

.submenu li {
    border-bottom: 1px solid #fff0f5;
}

.submenu a {
    font-size: 10px;
    padding: 4px;
}
/* This keeps the angel from growing too large */
.sidebar-angel-fixed {
    width: 160px; /* Adjust this number to make her smaller or bigger */
    height: auto;
    display: block;
    margin: 10px auto; /* Centers her in the sidebar */
}

/* This fixes the ice cream cone so it doesn't overlap text */
.floating-icecream {
    width: 100px;
    height: auto;
    position: absolute;
    bottom: 10px;
    left: -50px; /* This moves it slightly off-center for that 'floating' look */
    z-index: 100;
}
/* --- PROFILE FRILL BOX FIX --- */

/* 1. This "turns off" the white background for the main container */
.frill-box {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 15px 10px !important;
}

/* 2. This makes the lace images touch the white box perfectly */
.pfp-frill {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

/* 3. This creates the white background ONLY in the middle area */
.frill-content {
    background-color: #ffffff;
    border-left: 1px solid var(--dkest-color);
    border-right: 1px solid var(--dkest-color);
    padding: 10px;
    margin: 0; 
}
.bow-box {
    position: relative;
    overflow: visible !important;
}

.floating-p-bow {
    position: absolute;
    top: -22px; 
    left: 50%;
    transform: translateX(-50%);
    width: 110px; 
    z-index: 100;
}
/* --- STAMP AREA STYLING --- */

.stamp-container {
    display: flex;            /* Makes them sit next to each other */
    justify-content: center;  /* Centers them in the column */
    gap: 8px;                 /* Space between the two stamps */
    margin: 15px 0;           /* Space above and below the pair */
    width: 100%;
}

.sidebar-stamp {
    width: 88px;              /* Size to fit side-by-side in a 200px sidebar */
    height: auto;             /* Keeps them from stretching */
    background: none !important; 
    border: none !important;
    image-rendering: pixelated; /* Keeps the pixel art sharp */
}
/* --- EVERYTHING BELOW THIS IS THE NEW BIO FIX --- */

.bio-container {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-top: 15px;
}

.popteen-poster {
    width: 240px; 
    height: auto;
    flex-shrink: 0; /* This is the "magic" that stops the layout from breaking */
}



.bio-text {
    padding: 10px;
    font-size: 11px;
    line-height: 1.4;
    color: #333;
}



/* --- ABOUT ME BOX FINAL FIX --- */

.bio-white-box {
    position: relative;          /* This is the anchor */
    background: #ffffff;
    border: 1px solid var(--dkest-color);
    flex-grow: 1;
    padding: 15px 10px;          /* Padding inside for the text */
    margin-top: 20px;            /* Space so the Gyaru doesn't hit the CD */
    overflow: visible !important; /* CRITICAL: Lets the pearls hang OUTSIDE the box */
}

/* This forces the text to be Brown and Pixelated */
.bio-text p {
    color: var(--dkest-color) !important; /* Forces Brown Color */
    font-family: inherit;        /* Uses the pixel font from the rest of your site */
    font-size: 11px;
    line-height: 1.5;
    margin: 0;
}

/* Floats the Pearls ON TOP of the Top Border */
.bio-pearl-top {
    position: absolute;
    top: -14px;                 /* Moves it UP onto the line */
    left: 0;
    width: 100%;
    height: auto;
    z-index: 10;
}

/* Floats the Pearls ON TOP of the Bottom Border */
.bio-pearl-bottom {
    position: absolute;
    bottom: -14px;              /* Moves it DOWN onto the line */
    left: 0;
    width: 100%;
    height: auto;
    z-index: 10;
}

/* Floats the Gyaru Girl on top */
.floating-gyaru {
    position: absolute;
    top: -55px;                 /* Pulls her up to stand on the border */
    right: 5px;
    width: 60px;
    z-index: 20;
}
/* FORCE the profile container to be transparent */
#left-sidebar .frill-box {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Ensure the white content box inside is the ONLY white part */
.frill-content {
    background-color: #ffffff;
    border-left: 1px solid var(--dkest-color);
    border-right: 1px solid var(--dkest-color);
    padding: 10px;
}