/* 1. THE BASICS & BACKGROUND */
body {
  
    margin: 0;
    padding: 0;
    /* Tiled Live Background: Starfield */
    background-image: url('https://web.archive.org/web/20091027154019im_/http://geocities.com/EnchantedForest/Cottage/1053/star-bg.gif');
    background-repeat: repeat;
    background-attachment: fixed; /* Keeps background still when scrolling */
    
    /* Font: Classic web font */
    font-family: 'MS UI Gothic', 'Courier New', sans-serif;
    color: #333;

    /* Custom Cursor: Cute Cat Paw */
    cursor: url('https://cur.cursors-4u.net/nature/nat-10/nat1011.ani'), auto;
}

/* Links get a special cursor when you hover! */
a {
    text-decoration: none;
    color: #cc00cc; /* Purple links */
    font-weight: bold;
    cursor: url('https://cur.cursors-4u.net/nature/nat-10/nat1002.ani'), pointer;
}
a:hover {
    color: #ff69b4; /* Pink on hover */
    text-decoration: underline wavy;
}
/* MINI WINAMP STYLES */
/* MINI WINAMP STYLES */
.mini-winamp {
    background: #222;
    border: 2px solid #555;
    padding: 5px;
    width: 90%; /* Changed from 100% so it has room to be centered */
    margin: 0 auto; /* THIS CENTERS THE PLAYER */
    box-sizing: border-box;
    border-radius: 3px;
}

.mini-screen {
    background: #9bd69b; /* Classic Gameboy/LCD Green */
    color: #000;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    padding: 2px 4px;
    margin-bottom: 5px;
    border: 2px inset #555;
    height: 16px;
    overflow: hidden;
    white-space: nowrap;
}

.scrolling-text {
    display: inline-block;
    animation: scroll-text 5s linear infinite;
}

@keyframes scroll-text {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

.mini-controls {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.mini-btn {
    background: #d3d3d3;
    border: 1px outset #fff;
    font-size: 10px;
    width: 22px; /* Smaller buttons */
    height: 20px;
    cursor: pointer;
    padding: 0;
}

.mini-btn:active {
    border: 1px inset #fff;
}

.mini-vol {
    display: flex;
    align-items: center;
    gap: 3px;
    color: #00ff00;
    font-size: 9px;
    font-family: monospace;
}

.tiny-slider {
    width: 100%;
    height: 5px;
    cursor: pointer;
}

/* 2. LAYOUT CONTAINER */
.main-container {
    max-width: 950px;
    margin: 20px auto; /* Centers the site */
    padding: 10px;
}

/* 3. MARQUEE & HEADER */
.marquee-box {
    background: #000;
    color: #00ff00; /* Hacker green text */
    border: 2px solid #fff;
    font-family: monospace;
    margin-bottom: 10px;
    padding: 5px;
}

.site-header {
    background: linear-gradient(to right, #ff9a9e, #fad0c4);
    border: 3px outset #fff;
    text-align: center;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 5px 5px 0px rgba(0,0,0,0.5); /* Retro shadow */
}

.site-header h1 {
    margin: 0;
    color: #fff;
    text-shadow: 3px 3px 0px #ff69b4; /* Pink shadow */
    font-size: 32px;
    letter-spacing: 2px;
}

/* 4. THE 3-COLUMN GRID */
/* 4. THE 3-COLUMN GRID - FIXED */
.content-grid {
    display: flex;
    flex-wrap: wrap; /* Allows columns to stack on small screens */
    gap: 15px;
    align-items: flex-start;
}

.column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* FIX: Fixed width for sidebars, fluid width for middle */
.left-col { 
    flex: 0 0 200px; /* Don't grow, don't shrink, stay 200px */
}

.middle-col { 
    flex: 1;         /* Take up all remaining space */
    min-width: 300px; /* NEVER get smaller than 300px */
}

.right-col { 
    flex: 0 0 200px; /* Don't grow, don't shrink, stay 200px */
}

/* MOBILE FIX: When screen is small, stack them vertically */
@media (max-width: 768px) {
    .content-grid {
        flex-direction: column;
    }
    .left-col, .middle-col, .right-col {
        width: 100%;       /* Full width on phones */
        flex: none;        /* Disable flex resizing */
        min-width: 0;      /* Reset min-width */
    }
}

/* Widths: Left & Right are small, Middle is big */
.left-col { flex: 1; min-width: 200px; }
.middle-col { flex: 2; }
.right-col { flex: 1; min-width: 200px; }

/* 5. THE WINDOW (The most important part!) */
.window {
    background-color: #f2f2f2; /* Light grey window color */
    border-top: 2px solid #fff;   /* Highlight */
    border-left: 2px solid #fff;  /* Highlight */
    border-right: 2px solid #808080; /* Shadow */
    border-bottom: 2px solid #808080; /* Shadow */
    box-shadow: 3px 3px 0px rgba(0,0,0,0.3);
}

.window-title {
    /* Gradient Header for every box */
    background: linear-gradient(90deg, #ba55d3, #ff69b4);
    color: white;
    padding: 4px 8px;
    font-weight: bold;
    font-size: 14px;
    text-shadow: 1px 1px #000;
}

.window-body {
    padding: 10px;
}

/* 6. EXTRAS & DECORATION */
.profile-pic {
    border: 2px inset #fff;
    width: 120px;
    height: 120px;
    object-fit: cover;
}

.nav-links {
    list-style-type: square;
    padding-left: 20px;
    margin: 0;
    line-height: 1.8;
}

.update-box {
    background: #ffffcc; /* Post-it note yellow */
    border: 1px dashed #000;
    padding: 10px;
    margin-top: 15px;
    font-size: 0.9em;
}

.blinkie-grid {
    display: flex;
    flex-wrap: wrap;       /* Allows them to wrap to the next line */
    justify-content: center; /* Centers them horizontally */
    align-items: center;   /* Centers them vertically */
    gap: 5px;              /* Space between blinkies */
    text-align: center;    /* Backup for older browsers */
}

/* Optional: Ensures images don't get weirdly stretched */
.blinkie-grid img {
    display: block;

}

.winamp-player {
    background: #222;
    color: #00ff00;
    padding: 10px;
    border: 2px inset #555;
    font-family: monospace;
    font-size: 12px;
}

.site-footer {
    text-align: center;
    margin-top: 20px;
    color: #fff;
    font-size: 12px;
    background: rgba(0,0,0,0.5);
    padding: 10px;
    border-radius: 10px;
}

.center-text { text-align: center; }

/* Mobile responsiveness */
@media (max-width: 768px) {
    .content-grid {
        flex-direction: column;
    }
}