/* public/css/style.css */
:root { 
    --bg: #0f172a;       /* Deep slate background */
    --text: #f8fafc;     /* Crisp white-ish text */
    --accent: #94a3b8;   /* Muted slate for secondary text */
    --mtu-gold: #ffcd00; /* Michigan Tech Gold */
    --go-cyan: #00add8;  /* Go Gopher Cyan */
}

body { 
    font-family: 'Inter', -apple-system, sans-serif; 
    background-color: var(--bg); 
    color: var(--text); 
    margin: 0; 
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers everything horizontally */
    min-height: 100vh;
    padding: 4rem 20px;
    padding-top: 6rem;
}

.container { 
    width: 100%;
    max-width: 800px;    /* Professional reading width */
    text-align: center;  /* Centers all text/images inside */
}

.profile-img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 12px;
    border: 3px solid var(--mtu-gold);
    margin-bottom: 2rem;
    box-shadow: 0 0 20px rgba(255, 205, 0, 0.2);
}

.status { 
    font-family: 'Fira Code', monospace; 
    background: #000; 
    padding: 0.75rem 1.5rem; 
    border-radius: 99px; /* Pill shape */
    font-size: 0.8rem; 
    color: #10b981; 
    display: inline-block;
    margin: 1.5rem auto;
    border: 1px solid #334155;
}

h1 { 
    color: var(--text); 
    margin: 0.5rem 0; 
    font-size: 3rem; 
    font-weight: 800;
    letter-spacing: -1px; 
}

.subtitle { 
    color: var(--mtu-gold); 
    font-size: 1.1rem; 
    font-weight: 600; 
    margin-bottom: 2rem; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
}

.bio { 
    line-height: 1.8; 
    color: var(--accent); 
    font-size: 1.1rem; 
    max-width: 650px;
    margin: 0 auto; /* Centers the paragraph block */
}

.highlight { 
    color: var(--text); 
    font-weight: 600; 
    border-bottom: 2px solid var(--go-cyan);
}

.skills { 
    margin-top: 2.5rem; 
    display: flex; 
    justify-content: center; /* Centers tags */
    flex-wrap: wrap; 
    gap: 12px; 
}

.tag { 
    background: #1e293b; 
    color: var(--text); 
    font-size: 0.85rem; 
    padding: 6px 14px; 
    border-radius: 6px; 
    border: 1px solid #334155; 
}

.links { 
    margin-top: 3rem; 
    display: flex; 
    justify-content: center;
    gap: 2rem;
}

.btn { 
    text-decoration: none; 
    color: #000; 
    background: var(--mtu-gold); 
    padding: 0.8rem 2rem; 
    border-radius: 8px; 
    font-weight: 700; 
    transition: transform 0.2s; 
}

.btn:hover { 
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 205, 0, 0.3);
}