body {
  background-color: #121212; /* Dark background */
  color: white; /* Light text */
  font-family: Arial, sans-serif; /* Stylish font */
}

.container {
  display: flex; /* or grid for more control */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2vh;
}

hr {
  border: 0; /* Removes default border */
  height: 1px; /* Set the height of the line */
  background-color: #9c9c9c; /* Color of the hr line */
  margin: 20px 0; /* Spacing above and below the line */
  width: 75%;
}

h2 {
  margin: 10px;
}

.profile-pic {
  width: 400px; /* or any appropriate size, make it responsive */
  border-radius: 50%; /* Circular image */
  margin: 10px;
}

.bio {
  max-width: 450px; /* or any other maximum width */
  margin: 0 auto; /* Centers the paragraph */
  text-align: center; /* Optional: Centers the text */
}

.social-link {
  /* Basic styling for links */
  display: inline-block;
  overflow: hidden; /* Keeps the border neatly around the SVG */
  background: transparent; /* Ensures no background is visible */
  transition: all 0.3s; /* Smooth transition for hover effects */
}

.social-link .logo {
  width: 100px; /* Adjust based on preference */
  filter: grayscale(100%); /* Monochrome effect */
  transition: filter 0.3s; /* Smooth transition for hover effect */
}

.logo:hover {
  filter: none; /* Revert to original color logo on hover */
}

.social-link:hover {
  background-color: white; /* White border on hover */
}

.content {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column; /* Stacks image and text vertically */
  align-items: center; /* Aligns items vertically in the center */
  max-width: 450px; /* or any other maximum width */
  margin: 0 auto; /* Centers the paragraph */
  text-align: center; /* Optional: Centers the text */
}

.content-image {
  /*max-width: 100%; /* Makes image responsive */
  max-width: 100%;
  height: auto; /* Maintains aspect ratio */
}

.text-content {
  flex: 1; /* Allows text content to fill the space next to the image */
}

.gpt-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* Aligns items vertically in the center */
  max-width: 450px; /* or any other maximum width */
  margin: 0 auto 10px; /* Centers the paragraph - with 10px bottom margin */
}

.gpt-image {
  border-radius: 50%; /* Circular image */
  width: 80px;
  height: auto; /* Maintains aspect ratio */
  margin: 10px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .profile-pic {
      width: 250px; /* Smaller image on smaller screens */
  }
  .bio {
    max-width: 350px; /* or any other maximum width */
  }
  .social-link .logo {
      width: 50px; /* Smaller logos on smaller screens */
  }
}