body {
    background-color: #000;
    background-image: 
        radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 3px),
        radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 2px),
        radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 3px);
    background-size: 550px 550px, 350px 350px, 250px 250px;
    background-position: 0 0, 40px 60px, 130px 270px;
    background-attachment: fixed;
    color: #000;
    font-family: 'Comic Sans MS', 'Verdana', sans-serif;
    margin: 0;
    padding: 0;
    cursor: auto; /* Default cursor for now, JS will override if needed */
}

/* Custom Cursor */
.cursor-follower {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    font-size: 2rem;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: transform 0.05s ease;
}

/* Layout */
.main-container {
    max-width: 900px;
    margin: 20px auto;
    background: #fff;
    border: 3px solid #000;
    box-shadow: 10px 10px 0px #888;
}

/* Header */
.retro-header {
    background: linear-gradient(to bottom, #000080, #1084d0);
    color: #fff;
    text-align: center;
    padding: 10px;
    border-bottom: 3px solid #000;
}

.retro-header h1 {
    font-size: 3rem;
    text-shadow: 3px 3px 0 #ff00ff;
    margin: 10px 0;
    letter-spacing: 2px;
}

.subtitle {
    font-size: 1.2rem;
    color: yellow;
    margin-bottom: 10px;
}

/* Sidebar & Content Layout */
.content-wrapper {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    gap: 10px;
}

.sidebar {
    flex: 1;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.main-content {
    flex: 3;
    min-width: 300px;
}

/* Panels (Windows 98 style) */
.panel {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff; /* Outset border */
    padding: 2px;
}

.panel-header {
    background: linear-gradient(to right, #000080, #1084d0);
    color: white;
    font-weight: bold;
    padding: 3px 5px;
    font-size: 0.9rem;
}

.panel-body {
    padding: 10px;
    background: #fff;
    border: 2px solid;
    border-color: #808080 #fff #fff #808080; /* Inset border */
}

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

/* Winamp Player Styling */
.winamp-container {
    background: #1a1a1a;
    color: #0f0;
    font-family: 'Courier New', monospace;
    padding: 5px;
    border: 2px solid #555;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.winamp-top-bar {
    background: linear-gradient(to right, #333, #111);
    color: #ccc;
    padding: 2px 5px;
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    border: 1px solid #555;
    cursor: default;
}

.winamp-screen {
    background: #000;
    border: 2px inset #555;
    padding: 5px;
    margin-bottom: 2px;
}

.song-info {
    overflow: hidden;
    white-space: nowrap;
    color: #0f0;
    font-size: 0.9rem;
}

.time-info {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    color: #0f0;
    font-size: 1rem;
}

.winamp-visualizer {
    height: 30px;
    background: #000;
    border: 1px solid #333;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding: 2px;
    margin-bottom: 5px;
}

.bar {
    flex: 1;
    background: linear-gradient(to top, #0f0, #ff0);
    opacity: 0.8;
    transition: height 0.1s ease;
}

.winamp-controls {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.winamp-slider {
    width: 100%;
    height: 10px;
    background: #333;
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid #555;
}

.winamp-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    background: #c0c0c0;
    border: 1px solid #fff;
    cursor: pointer;
}

.winamp-buttons {
    display: flex;
    justify-content: space-between;
    gap: 2px;
}

.win-btn {
    background: linear-gradient(to bottom, #c0c0c0, #808080);
    border: 1px solid #fff;
    color: #000;
    font-size: 0.8rem;
    padding: 2px 5px;
    cursor: pointer;
    flex: 1;
}

.win-btn:active {
    background: #808080;
    border: 1px inset #fff;
    transform: translateY(1px);
}

.volume-control {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: #ccc;
}

.winamp-slider.small {
    flex: 1;
}

/* Navigation Links */
.nav-links {
    list-style-type: square;
    padding-left: 20px;
    margin: 0;
}

.nav-links li {
    margin-bottom: 5px;
}

.nav-links a {
    color: #0000ff;
    text-decoration: underline;
    font-weight: bold;
}

.nav-links a:hover {
    color: red;
    background-color: yellow;
}

/* Counter */
.counter {
    font-family: 'Courier New', monospace;
    background: #000;
    color: red;
    font-size: 1.5rem;
    padding: 5px;
    display: inline-block;
    border: 2px inset #888;
    letter-spacing: 3px;
}

/* Content Sections */
.retro-box {
    margin-bottom: 20px;
    background: #e0e0e0;
    border: 2px solid #000;
    padding: 15px;
    position: relative;
}

.retro-box h2 {
    margin-top: 0;
    color: #000080;
    border-bottom: 2px dashed #000;
    padding-bottom: 5px;
}

/* Profile Layout */
.profile-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.pixel-avatar {
    width: 150px;
    height: 150px;
    border: 3px double #000;
    object-fit: cover;
}

.bio-text p {
    margin: 5px 0;
    font-size: 1.1rem;
}

/* Buttons */
.links-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.retro-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 15px;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff; /* Outset */
    color: #000;
    text-decoration: none;
    font-family: 'Tahoma', sans-serif;
    font-size: 1rem;
    cursor: pointer;
}

.retro-btn:active {
    border-color: #808080 #fff #fff #808080; /* Inset */
    transform: translate(1px, 1px);
}

.retro-btn.warning {
    font-weight: bold;
    color: red;
}

/* Footer */
.retro-footer {
    background: #000080;
    color: #fff;
    text-align: center;
    padding: 10px;
    font-size: 0.8rem;
    border-top: 3px solid #000;
}

/* Troll Popup */
.troll-popup {
    position: absolute;
    background: #c0c0c0;
    color: black;
    padding: 2px;
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    font-family: 'Tahoma', sans-serif;
    font-size: 12px;
    pointer-events: none;
    z-index: 100;
    box-shadow: 5px 5px 0 rgba(0,0,0,0.5);
    min-width: 150px;
}

.troll-popup::before {
    content: "Message";
    display: block;
    background: #000080;
    color: white;
    padding: 2px 5px;
    font-weight: bold;
    margin-bottom: 5px;
}

@media (max-width: 600px) {
    .content-wrapper {
        flex-direction: column;
    }
    
    .profile-layout {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .links-container {
        align-items: stretch;
    }
}

/* Guestbook Styles */
.guestbook-form-container {
    background: #f0f0f0;
    padding: 10px;
    border: 1px inset #fff;
    margin-bottom: 15px;
}

.form-group {
    margin-bottom: 10px;
}

.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 3px;
}

.form-group input,
.form-group textarea {
    width: 95%;
    padding: 5px;
    border: 2px inset #888;
    background: #fff;
    font-family: 'Verdana', sans-serif;
    font-size: 0.9rem;
}

.form-group textarea {
    height: 60px;
    resize: vertical;
}

.guestbook-messages {
    max-height: 300px;
    overflow-y: auto;
    border: 2px inset #888;
    background: #fff;
    padding: 10px;
}

.gb-message {
    border-bottom: 1px dashed #ccc;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.gb-message:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.gb-header {
    background: #e0e0e0;
    padding: 2px 5px;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
}

.gb-body {
    padding-left: 5px;
    word-wrap: break-word;
}