/* ==========================================================================
   SYBERNETICS — PAGE-SPECIFIC STYLES
   This stylesheet contains styles specific to the Index (Home) page
   and the System Updates page.
   ========================================================================== */

/* ==========================================================================
   INDEX (HOME) PAGE
   Styles for the main landing page layout, welcome section, and changelog.
   ========================================================================== */

/* Main content wrapper for the index page */
.index-content {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start;
}

/* Welcome section - takes up more horizontal space */
.welcome {
    flex: 2;
    margin-bottom: 40px;
}

/* Profile picture - aligned to the left with text wrapping */
.profpic {
    float: left;
    margin: 0 20px 10px 0;
    max-width: 250px;
    border: 2px solid var(--cyan);
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(0, 255, 204, 0.3);
}

/* Welcome paragraph typography */
.welcome p {
    font-family: "Orbitron", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
}

/* Compact changelog sidebar on the index page */
.changelog {
    flex: 1;
    max-width: 300px;
    background-color: rgba(255, 255, 255, 0.03);
    padding: 20px;
    border: 1px dashed var(--glass-border);
    border-radius: 12px;
    margin-bottom: 40px;
    border-top: 1px dashed rgba(0, 255, 204, 0.2);
    padding-top: 20px;
}

/* Scrollable area for the list of updates */
#updates-list {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 10px; /* Prevents text from touching scrollbar */
}

/* Custom scrollbar for the updates list (Webkit) */
#updates-list::-webkit-scrollbar {
    width: 10px;
}

#updates-list::-webkit-scrollbar-track {
    background: rgba(255, 0, 255, 0.1); /* Faint magenta */
    border-radius: 10px;
}

#updates-list::-webkit-scrollbar-thumb {
    background: rgba(255, 0, 255, 0.4); /* Softer magenta */
    border-radius: 10px;
    box-shadow: 0 0 6px rgba(255, 0, 255, 0.4);
}

#updates-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 0, 255, 0.6);
    box-shadow: 0 0 8px rgba(255, 0, 255, 0.6);
}

/* Link to the full updates page with neon glow */
.updates-link {
    color: var(--cyan);
    text-decoration: none;
    border-bottom: 1px dashed var(--cyan);
    text-shadow:
        0 0 4px rgba(0, 255, 204, 0.6),
        0 0 8px rgba(0, 255, 204, 0.4),
        0 0 12px rgba(0, 255, 204, 0.2);
    transition: 0.3s ease;
}

.updates-link:hover {
    color: var(--magenta);
    border-bottom-color: var(--magenta);
    text-shadow:
        0 0 6px rgba(255, 0, 255, 0.7),
        0 0 12px rgba(255, 0, 255, 0.5),
        0 0 18px rgba(255, 0, 255, 0.3);
}

/* Visitor counter - positioned at the bottom of the content row */
.visitor-counter {
    flex-basis: 100%;
    text-align: center;
    margin-top: 10px;
}

/* Neon glow for the visitor counter image */
.visitor-counter img {
    filter: drop-shadow(0 0 10px rgba(0, 255, 204, 0.8));
}

/* Small decorative art pieces on the index page */
.index-art {
    height: 40px;
    width: auto;
    display: inline-block;
}

/* Spacing for button links */
.sybers-button {
  padding-right: 15px;
}

/* ==========================================================================
   SYSTEM UPDATES PAGE
   Styles for the full-page changelog view.
   ========================================================================== */

/* Main container for the updates page to center content */
.updates-main {
    display: flex;
    justify-content: center;
}

/* Override changelog styles for the full-page view */
.updates-main .changelog {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    border: none;      /* Remove the dashed border for a cleaner look */
    padding: 30px;
    background: none;  /* Remove the faint background */
}