/* Base styles */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #1b1f22;
  color: #ffffff;
  line-height: 1.6;
  display: flex;             
  justify-content: center;   
  align-items: center;       
  height: 100vh;             
  flex-direction: column;    
}

/* Header and Navigation Bar */
header {
  background-color: #2a2f33;
  width: 100%;
  position: fixed; 
  top: 0;
  left: 0;
  z-index: 10; 
  padding: 10px 0;
}

/* Pink Divider Line */
.nav-divider {
  width: 100%;
  height: 4px;
  background-color: #ff0055;
  position: fixed; 
  top: 45px; 
  left: 0;
  z-index: 5; 
}

/* Ensure main content is below the fixed header and divider */
main {
  max-width: 1200px;  
  padding: 0 50px;    
  text-align: center; 
  margin-top: 64px;   
}

main h1 {
  font-size: 60px;    
  margin-bottom: 30px; 
}

main p {
  font-size: 24px;   
  line-height: 2.2;  
}

/* Profile Image and Name */
.profile-image {
  width: 250px;       
  height: 250px;      
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px; 
  border: 3px solid #ffffff; 
}

.name {
  font-weight: bold;
  font-size: 36px;  
  margin-top: 0;    
}

/* Navigation Bar List Styles */
nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
}

nav ul li {
  margin: 0 15px;
}

nav ul li a {
  text-decoration: none;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  transition: color 0.3s;
}

nav ul li a:hover {
  color: #ff0055;
}

nav ul li a.active {
  color: #ff0055;
}

/* Other Styles */
.bordered-image {
  border: 2px solid white;
  border-radius: 5px;
}

figure {
  display: inline-block;
  text-align: center;
  margin: 20px;
}

figcaption {
  color: #ffffff; 
  font-size: 14px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

figcaption a {
  margin-right: 20px;
  color: #ffffff; 
  text-decoration: none; 
}

figcaption a:hover {
  color: #ff0000; 
}

figcaption i {
  font-size: 5rem;
  line-height: 1;
}

/* Social Icons */
.social-icons {
  display: flex;
  justify-content: center;
  margin-top: 10px; 
}

.social-icons a {
  color: #ffffff;
  font-size: 2rem; 
  margin: 0 15px; 
  transition: color 0.3s;
}

.social-icons a:hover {
  color: #ff0055; 
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
  /* Adjust for tablets */
  main {
    max-width: 90%; /* Reduce max-width for tablets */
    padding: 0 20px; /* Adjust padding */
  }

  main h1 {
    font-size: 48px; /* Adjust font size for the heading */
  }

  main p {
    font-size: 20px; /* Adjust font size for paragraphs */
  }

  .profile-image {
    width: 200px; /* Adjust image size */
    height: 200px; 
  }

  .name {
    font-size: 28px; /* Adjust font size for the name */
  }

  .social-icons a {
    font-size: 1.5rem; /* Adjust icon size */
    margin: 0 10px; /* Reduce margin */
  }
}

@media (max-width: 768px) {
  /* Adjust for mobile devices */
  main {
    max-width: 95%; /* Further reduce max-width for mobile */
    padding: 0 10px; /* Adjust padding */
  }

  main h1 {
    font-size: 36px; /* Adjust font size for the heading */
  }

  main p {
    font-size: 16px; /* Adjust font size for paragraphs */
  }

  .profile-image {
    width: 180px; /* Increase image size */
    height: 180px; 
  }

  .name {
    font-size: 30px; /* Increase font size for the name */
  }

  .social-icons a {
    font-size: 1.8rem; /* Increase icon size */
    margin: 0 12px; /* Adjust margin */
  }
}

@media (max-width: 480px) {
  /* Adjust for very small devices */
  main h1 {
    font-size: 28px; /* Further adjust font size for heading */
  }

  main p {
    font-size: 14px; /* Further adjust font size for paragraphs */
  }

  .profile-image {
    width: 150px; /* Increase image size */
    height: 150px; 
  }

  .name {
    font-size: 26px; /* Increase font size for name */
  }

  .social-icons a {
    font-size: 2rem; /* Increase icon size for very small devices */
    margin: 0 10px; /* Adjust margin */
  }
}