@import url('./main.css');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap'); 

.cls-header { 
  width: 100%; 
  min-height: 100vh; 
  display: flex; 
  flex-direction: row; 
  justify-content: center;
  align-items: center;
  border: var(--border-width) solid var(--border); 
  text-align: center;
  background: var(--bg);
  border-radius: var(--radius);
}

.cls-avatar img { 
  width: 500px; 
  height: 500px; 
  border-radius: 50%; 
  border: 4px solid var(--border);
  transition: transform 0.5s ease, border 0.3s ease; 
  object-fit: cover;
}

.cls-avatar img:hover { 
  transform: scale(1.1); 
}

.cls-header-top { 
  position: relative; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: var(--space-md);
  font-size: var(--fs-md); 
  color: var(--text); 
  margin: var(--space-lg);
}


.cls-short-bio { 
  display: flex; 
  flex-direction: column; 
  margin: var(--space-md); 
  padding: var(--space-md) 0;
  align-items: center; 
  gap: var(--space-md); 
  font-size: var(--fs-lg); 
  color: var(--text);
  text-shadow: var(--shadow); 
  max-width: 600px;
}




.cls-social-links { 
  display: flex; 
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-md); 
  margin: var(--space-md); 
}

.cls-social-link svg { 
  transition: transform 0.5s ease, fill 0.3s ease; 
  width: 60px; 
  height: 60px; 
  fill: var(--text); 
  padding: var(--space-sm); 
}

.cls-social-link svg:hover { 
  transform: scale(1.3); 
}


@media (max-width: 1024px) {
  .cls-header { padding: var(--space-sm); }
  .cls-short-bio { font-size: var(--fs-md); }
  .cls-social-link svg { width: 50px; height: 50px;}
  .cls-avatar img{ width: 400px; height: 400px;}
  
}

@media (max-width: 768px) {
  .cls-avatar img { width: 300px; height: 300px; }
  .cls-short-bio { font-size: var(--fs-md); padding: var(--space-sm); }
  .cls-social-link svg { width: 45px; height: 45px; }
  .cls-header-top{flex-direction: column;}
  .cls-header{flex-direction: column;}
}

@media (max-width: 480px) {
  .cls-header { padding: var(--space-sm); flex-direction: column; }
  .cls-avatar img { 
    width: 250px; height: 250px;
    margin-top: 20px;
  
  }
  .cls-short-bio { font-size: var(--fs-sm); }
  .cls-social-links { gap: var(--space-sm); }
  .cls-social-link svg { width: 40px; height: 40px; }
  .cls-header-top{flex-direction: column;}
 
}