/* --- GLOBAL RESET & BASE STYLES (Apply to all pages) --- */
body {
    font-family: 'Arial', sans-serif; /* Use one consistent font family */
    line-height: 1.6;
    margin: 0;
    color: #333;
}

/* --- GAME OF LIFE BACKGROUND (Preserved) --- */
#game-of-life-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Keep it behind all content */
}

/* --- MAIN CONTAINER STYLING (The Center Box) --- */
#center-box {
    /* Centralize content */
    max-width: 900px; 
    margin: 40px auto; 
    padding: 30px;
    background-color: rgba(255, 255, 255, 0.95); /* White background for readability over the GOL */
    border-radius: 10px; /* Slight rounding to match blog boxes */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Consistent shadow */
}

/* --- NAVIGATION STYLING (Top Bar) --- */
#main-header {
    /* border-bottom: 2px solid #3498db; Consistent main blue border */
    padding-bottom: 15px;
    margin-bottom: 30px;
    text-align: center; /* Center the links */
}

#main-nav {
    /* Use flexbox for modern spacing */
    display: flex;
    justify-content: center;
    gap: 25px; 
}

#main-nav .nav-link {
    text-decoration: none;
    color: #1f2d3a; /* Dark text for links */
    font-weight: bold;
    font-size: 1.1em;
    padding: 5px 10px;
    transition: color 0.3s;
}

#main-nav .nav-link:hover {
    color: #3498db; /* Hover color matches the primary blue */
}


/* --- CONTENT LAYOUT (Profile Bio and Photo) --- */
#content-main {
    display: flex;
    gap: 30px;
    align-items: flex-start; /* Aligns content to the top */
}

#profile-bio {
    flex: 2; /* Takes up more space */
}

#profile-photo {
    flex: 1; /* Takes up less space */
    text-align: right;
}

#profile-photo img {
    width: 100%; /* Make photo responsive */
    max-width: 300px; 
    border-radius: 10%; /* Make it round */
    border: 1px solid #484b4e; /* Use primary blue border */
}

/* --- HEADINGS AND TEXT --- */
#profile-bio h1 {
    color: #2c3e50;
    margin-top: 0;
    font-size: 2.5em;
    /* Remove the old underline or styling if any */
}

.title {
    color: #e74c3c; /* Use a secondary color for the title/tagline */
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 20px;
}

.bio {
    color: #555;
    margin-bottom: 30px;
}

/* --- SOCIAL ICONS --- */
#social-links {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

#social-links img {
    width: 28px; 
    height: 28px;
    opacity: 0.7;
    transition: opacity 0.3s;
}

#social-links a:hover img {
    opacity: 1;
    transform: scale(1.1);
}

/* --- RESPONSIVENESS --- */
@media (max-width: 768px) {
    #center-box {
        margin: 20px 10px;
        padding: 20px;
    }
    #content-main {
        flex-direction: column; /* Stack vertically on small screens */
        align-items: center;
        text-align: center;
    }
    #profile-photo {
        order: -1; /* Move photo to the top */
        margin-bottom: 20px;
    }
    #main-nav {
        flex-wrap: wrap;
        gap: 15px;
    }
}