html {
    overflow-y: scroll;
}

:root {
    --bg-color: #0d0d0d;
    --text-color: #e0e0e0;
    --accent-color: #00ccff;
    --nav-bg: #151515;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Segoe UI', sans-serif;
    margin: 0;
    display: flex; flex-direction: column; min-height: 100vh;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: bold;
    text-decoration: none;
    transition: 0.3s;
    text-align: center;
}

.btn-signature {
    background-color: #00ccff;
    color: #0d0d0d !important;
}

.btn-freebie {
    background-color: #28a745;
    color: #ffffff !important;
}

.btn-utility {
    background-color: #6c757d;
    color: #ffffff !important;
}

.btn:hover {
    filter: brightness(1.2);
    transform: translateY(-2px);
}

.navbar { width: 100%; background-color: var(--nav-bg); padding: 15px 0; border-bottom: 1px solid #333; position: sticky; top: 0; z-index: 1000; }
.nav-container { display: flex; justify-content: center; gap: 35px; align-items: center; flex-wrap: wrap; }

.nav-item { color: var(--text-color); text-decoration: none; font-weight: 600; font-size: 1.2rem; text-transform: none; transition: color 0.3s; }
.nav-item:hover, .nav-item.active { color: var(--accent-color); }

.dropdown { position: relative; display: inline-block; }
.dropdown-content {
    display: none; position: absolute; background-color: var(--nav-bg); min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.5); border: 1px solid #333; top: 100%; left: 50%; transform: translateX(-50%);
}
.dropdown-content a { color: var(--text-color); padding: 12px 16px; text-decoration: none; display: block; font-size: 1.2rem; text-transform: none; }
.dropdown-content a:hover, .dropdown-content a.active { background-color: #222; color: var(--accent-color); }
.dropdown:hover .dropdown-content { display: block; }

.site-header { text-align: center; padding: 20px 10px; }
.logo-display { max-width: 300px; width: 100%; height: auto; }

@media (max-width: 600px) { .logo-display { max-width: 200px; } }

/* --- CONTENT & HEADERS --- */
.content-area { 
    max-width: 900px; 
    width: 90%; 
    margin: 0 auto; 
    padding: 20px 0; 
    flex-grow: 1; 
}

h1 { color: var(--accent-color); }

.header-divider { 
    width: 60%; 
    margin: 10px auto; 
    border: 0; 
    height: 3px; 
    background: #333; 
}

/* Link Categories & Article Headers */
.content-area h2 {
    color: var(--accent-color); /* Added your signature blue back! */
    border-bottom: 1px solid #333; 
    padding-bottom: 5px;
    margin-top: 30px; 
    text-transform: none;
    font-size: 1.2rem;
}

/* --- THE FINAL FOOTER LOCK (Always at the bottom) --- */
.site-footer {
    width: 100% !important;
    background-color: #151515 !important;
    padding: 15px 0 !important;
    border-top: 1px solid #333 !important;
    margin-top: auto !important; 
    text-align: center !important;
}

.site-footer p {
    color: #00ccff !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    margin: 0 !important;
    text-transform: none !important;
}

/* This locks the logo size across all sub-pages */
.logo-display { 
    max-width: 300px; /* Adjust this number until it matches your index page perfectly */
    width: 100%; 
    height: auto;
    display: block;
    margin: 0 auto; /* Keeps it centered */
}

/* The Glow Effect you wanted back */
.logo-glow {
    filter: drop-shadow(0 0 15px rgba(0, 204, 255, 0.6));
}

/* Mobile adjustment so it stays proportional on phones */
@media (max-width: 600px) {
    .logo-display { 
        max-width: 200px; 
    }
}