/* Custom properties for easy color management */
:root {
  --color-green: hsl(75, 94%, 57%);
  --color-white: hsl(0, 0%, 100%);
  --color-grey-700: hsl(0, 0%, 20%); 
  --color-grey-800: hsl(0, 0%, 12%); 
  --color-grey-900: hsl(0, 0%, 8%);  
  --font-size-base: 14px;
}

/* Reset and basic typography */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', sans-serif;
  font-size: var(--font-size-base);
  background-color: var(--color-grey-900);
  color: var(--color-white); 
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

main {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Card container styling */
.profile-card {
  background-color: var(--color-grey-800); /* Dark grey background */
  width: 100%;
  max-width: 380px; /* Constrain max width for desktop design */
  padding: 2.5rem;
  border-radius: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* Space between main card sections (header, bio, links) */
}

/* Avatar styling */
.profile-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  margin-bottom: 1.5rem;
}

/* Center avatar and name */
.profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Name and Location Typography */
.profile-name {
  font-size: 1.5rem; 
  font-weight: 600; /* Semi-bold */
  margin-bottom: 0.5rem;
}

.profile-location {
  color: var(--color-green); /* The specific green color */
  font-weight: 700; /* Bold */
  margin-bottom: 1.5rem; /* Space before bio */
}

/* Bio styling */
.profile-bio {
  margin-top: -1rem; /* Adjust space based on design preview */
  margin-bottom: 0.5rem;
}

/* Container for the buttons */
.social-links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

/* Link Button Styling (Interactive Element) */
.social-link-button {
  display: block; /* Make the anchor tag take full width */
  text-decoration: none;
  color: var(--color-white);
  background-color: var(--color-grey-700); /* Card button default background */
  font-weight: 600; /* Semi-bold */
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  transition: background-color 0.2s, color 0.2s; /* Prepare for smooth hover/focus */
}

/* Hover and Focus States (Requirement) */
.social-link-button:hover,
.social-link-button:focus {
  background-color: var(--color-green); /* Green background on interaction */
  color: var(--color-grey-900); /* Very dark text on interaction */
  outline: none; /* Remove default focus outline */
}

/* Best Practice: Use :focus-visible for better accessibility */
.social-link-button:focus-visible {
  outline: 3px solid var(--color-green);
  outline-offset: 2px;
}