/* Base styles */
body, html {
  height: 100%;
  padding: 0; /* Removes the default padding */
  margin: 0;
  font-family: 'Avenir', 'Crimson Pro', 'Handstand';
  color: #eeeeee;
  background: #E8E0D5;
  margin: 0; /* Removes the default margin */
}

@font-face {
  font-family: 'Handstand';
  src: local('Handstand Regular'), local('Handstand-Regular'),
      url('./assets/fonts/Handstand.woff2') format('woff2'),
      url('./assets/fonts/Handstand.woff') format('woff'),
      url('./assets/fonts/Handstand.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

p {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

/* Desktop styles */
@media (min-width: 1025px) {
  body {
    margin-left: 200px;
  }
}

header {
  text-align: center;
  padding: 32px 0;
  font-size: 24px; /* Adjust font size as needed */
  margin-bottom: 40px;
}

header p {
  color: #162315;
  text-align: center;
  font-family: 'Avenir', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
  font-style: normal;
}

.content-container {
  display: grid; /* Switch to grid layout */
  grid-auto-flow: column; /* Lay out items in a horizontal line */
  gap: 32px; /* Maintain gap between items */
  padding: 0;
  margin-right: 32px;
}

/* Optional: If you want to specify the width for the grid items */
.content-container > * {
  width: 300px; /* Example width, adjust based on your content */
}

/* Ensure the profile, portfolio, and side projects adapt to grid layout */
.profile, #portfolio, #side-projects {
  /* Adjustments for grid items */
  min-width: 300px; /* Example min-width, adjust based on your content */
  height: auto; /* Adjust height as needed */
  display: block; /* Default display back to block if needed */
}

/* Utility styles to ensure images within cards are responsive */
.screenshots img {
  max-width: 100%; /* Ensure images do not overflow their containers */
  height: auto; /* Maintain aspect ratio */
  object-fit: cover; /* Cover the area of the container without distortion */
}

.profile img {
  display: flex;
  width: 64px;
  height: 64px;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  /* border: 4px solid #FFF; */
  margin-bottom: 16px;
  }

.work-status {
  color: #048e1b;
  font-family: Avenir;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  margin-bottom: 32px;
}

.social-links {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 12px;
}

.social-links .link-background {
  display: block; /* Stack the SVG links */
  margin-bottom: 12px; /* 12px spacing between links */
}

.link-background svg {
  fill: #162315; /* Default SVG color */
  transition: fill 0.3s ease-in-out; /* Smooth transition for color change */
}

.link-background:hover svg {
  opacity: 80%;
}

.about-me {
  align-self: stretch;
  color: #696a6c;
  font-family: Avenir;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px; /* 162.5% */
  margin-bottom: 16px;
}

.profile a {
  display: block; /* Makes the link stack */
  margin-bottom: 12px; /* 12px spacing between links */
  font-size: 15px;
}

.profile a:last-child {
  margin-bottom: 0;
}

.side-links {
  display: flex;
  gap: 4px;
  color: #696a6c;
}

.signature {
  font-family: Handstand;
  color: #272D4F;
  margin-top: 40px;
}

.card {
  padding: 24px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.7); /* white with 70% opacity */
  overflow: hidden; /* Hide overflowed content */
  position: relative; /* Needed to position children absolutely */
  min-height: 560px; /* You can set a minimum height */
}

#portfolio {
  flex: 0 0 640px; /* Flex-basis set to 640px */
  background: #272D4F;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px;
}

.title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
}

/* #portfolio .title-logo {
  display: flex;
  width: 24px;
  height: 24px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  background: #F7F7F7;
} */

#portfolio, #side-projects .title p {
  color: #eaecf1;
  font-family: Crimson Pro;
  font-size: 38px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
}

.card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  z-index: 1; /* Higher z-index to stack above the image if needed */
}

.card-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

#portfolio .links a {
  color: #fff;
  font-family: Avenir;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

#portfolio .links:hover a {
  cursor: pointer;
  color: #162315;
  transition: color 0.3s ease-in-out;
}

#portfolio .links svg {
  fill: #F7F7F7; /* Default SVG color */
  transition: fill 0.3s ease-in-out; /* Smooth transition for color change */
}

#portfolio .links:hover svg {
  fill: #162315; /* New SVG color on hover */
}

.screenshots {
  /* Existing styles for screenshots */
  position: absolute;
  top: -10px; /* Negative value to move image upwards */
  left: 0;
  right: 0;
  z-index: 2; /* Lower z-index so content can cover the bottom part of the image */
}

.screenshots img {
  /* Remove object-fit if you want the image to keep its aspect ratio when overflowed */
  display: block;
  width: 100%;
  height: auto;
}

#side-projects {
  flex: 0 0 366px; /* Flex-basis set to 366px */
  background: #272D4F;
  padding: 32px;
}

#side-projects .title-logo {
  display: flex;
  width: 24px;
  height: 24px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  background: #162315;
}

#side-projects .links a {
  color: #162315;
  font-family: Avenir;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

#side-projects .links:hover a {
  cursor: pointer;
  color: #A77F86;
  transition: color 0.3s ease-in-out;
}

#side-projects .links svg {
  fill: #162315; /* Default SVG color */
  transition: fill 0.3s ease-in-out; /* Smooth transition for color change */
}

#side-projects .links:hover svg {
  fill: #A77F86; /* New SVG color on hover */
}

@media (max-width: 768px) {
  .card {
    min-height: 100vh; /* Minimum height to maintain aspect ratio */
    /* Adjust the percentage as needed to get the desired effect on your tablet */
  }
}

@media (max-width: 480px) {
  .card {
    min-height: 60vh; /* Slightly larger minimum height for very small devices */
  }
}


/* Adjust the grid layout for mobile and tablet */
@media (max-width: 1024px) {
  .content-container {
    display: grid; /* Continue using grid layout */
    grid-auto-flow: row; /* Stack items vertically */
    gap: 32px; /* Maintain gap between items */
    overflow-x: hidden; /* Disable horizontal scrolling */
    padding: 32px; 
  }

  header {
    margin-bottom: 16px;
  }

  /* Ensure the profile, portfolio, and side projects adapt to a single column layout */
  #portfolio, #side-projects {
    min-width: auto; /* Reset min-width to allow items to fill the container */
    width: calc(100% - 32px); /* Adjust width to account for padding */
    display: block; /* Keep display as block for these items */
  }

  #portfolio, #side-projects .title p {
    font-size: 36px;
  }

  .profile {
    margin-bottom: 80px;
    display: block;
    min-width: auto; /* Reset min-width to allow items to fill the container */
    width: auto;
  }

  .about-me {
    font-size: 16px;
  }

  /* Optional: Adjust the card styling for mobile */
  .card {
    padding: 32px; /* Example adjustment */
    border-radius: 16px; /* Example adjustment */
    /* Further style adjustments for mobile */
  }

  /* Reset any specific styles for mobile that may interfere with the single column layout */
  .profile img, .title-logo, .link-background, .links svg {
    width: auto; /* Reset width if necessary */
    height: auto; /* Reset height if necessary */
  }
}