:root { 
    --bg-color: #0b1120; 
    --bg-card: #151f32; 
    --text-color: #f1f5f9; 
    --accent-light: #38bdf8; 
    --nav-color: #94a3b8; 
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background-color: var(--bg-color); 
    color: var(--text-color); 
    padding: 2rem; 
    line-height: 1.6; 
}

.container { 
    max-width: 900px; 
    margin: 0 auto; 
}

/* Unified Navigation */
nav { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 1rem 0; 
    margin-bottom: 3rem; 
    width: 100%; 
}

.logo { font-size: 1.5rem; font-weight: bold; color: #fff; cursor: pointer; }
.logo span { color: var(--accent-light); }

.nav-links { display: flex; gap: 1.5rem; }
.nav-links a { 
    color: var(--nav-color); 
    text-decoration: none; 
    font-weight: 500; 
    transition: color 0.3s ease;
}
.nav-links a:hover { color: var(--accent-light); }

/* Hero Section */
.hero { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
    margin-bottom: 3rem; 
}

.hero-img-container img { 
    width: 200px; 
    height: 200px; 
    border-radius: 50%; 
    border: 3px solid var(--accent-light); 
    object-fit: cover; 
    object-position: center top; /* This ensures your face remains centered */
    aspect-ratio: 1 / 1;         /* Forces the 1:1 square ratio */
    display: block;              /* Removes extra spacing under the image */
}

/* Cards & Text */
.card { 
    background: var(--bg-card); 
    padding: 1.5rem; 
    border-radius: 8px; 
    margin-bottom: 1rem; 
    border: 1px solid #1e293b; 
}

h2 { color: var(--accent-light); margin-top: 2rem; margin-bottom: 1rem; }
h1 { margin-bottom: 0.5rem; }