/* Resetting default margin */
html, body {
  margin: 0;
  padding: 0;
  height: 100%; /* Make sure the body takes up the full height */
}

/* Styles for the main content */
#main {
  background-color: #333333; /* Dark gray background */
  color: white; /* White text */
  min-height: 100vh; /* Changed from 50vh to 100vh to fill the entire viewport height */
  padding: 20px; /* Add space around your text */
  font-family: 'Courier New', Courier, monospace;
  /* font-family: 'Verdana', sans-serif; Updated to a rounder font */
  line-height: 1.5; /* Adjusts the height of the text lines */
  box-sizing: border-box; /* Include padding in the height calculation */
  zoom: 0.8; /* Scale down by 20% */
}

/* Container for the profile photo and text */
#profile-container {
  display: flex;
  align-items: center; /* Align items in the center vertically */
  justify-content: center; /* Center items horizontally */
  margin-bottom: 20px; /* Add some space below the profile container */
}

/* Styles for the profile photo */
#profile-photo {
  width: 150px; /* Fixed width for desktop */
  height: auto; /* Maintain aspect ratio */
  margin-left: 20px; /* Add some space between the text and the photo */
  max-width: 30vw; /* Limit width to 30% of viewport width */
}

/* Styles for the text section */
#text-section {
  max-width: 60%; /* Reduce the width of the text section */
  text-align: center; /* Center the text section */
}

/* Styles for the content section below */
#content-section {
  max-width: 60%; /* Reduce the width of the content section */
  margin: 0 auto; /* Center the content section */
}

/* Styles for the links inside the main content */
#main a {
  color: white;
  text-decoration: none;
}

/* Styles for the links when hovered over */
#main a:hover {
  color: #888888; /* Darker color when hovered over, you can change this */
}

/* Container for publications and projects */
#publications-container,
#projects-container {
  display: flex;
  flex-direction: column;
  gap: 10px; /* Reduced space between items */
  margin-top: 20px;
}

/* Styles for each paper or project item */
.paper-item {
  background-color: #444444; /* Background for the item */
  padding: 10px;
  border-radius: 8px;
  width: 100%; /* Make the item span the full width of the container */
  box-sizing: border-box; /* Ensure padding is included in the width */
  margin-bottom: 10px; /* Add some space between items */
  display: flex;
  align-items: center;
  gap: 15px; /* Space between image and text */
}

/* Styles for the link inside the paper/project item */
.paper-item a {
  text-decoration: none;
  color: white;
  text-align: left; /* Align text to the left */
}

/* Styles for the paper/project preview image */
.paper-preview {
  width: 115px; /* Preview size for desktop */
  height: auto; /* Maintain aspect ratio */
  border-radius: 4px;
  border: 1px solid #888888;
  object-fit: cover; /* Ensures the image covers the box without distortion */
  max-width: 10vw; /* Limit width to 10% of viewport width */
  display: block; /* Remove baseline gap */
}

/* Styles for the paper/project information */
.paper-info {
  display: flex;
  flex-direction: column;
}

/* Styles for the paper/project title */
.paper-title {
  margin: 0;
  font-size: 18px;
}

/* Styles for the paper/project authors */
.paper-authors {
  margin: 6px 0 0;
  font-size: 15px;
}

/* Styles for the additional information */
.paper-additional-info {
  margin: 4px 0 0;
  font-size: 14px;
}

/* Styles for the publication link */
.paper-link {
  margin-top: 4px;
  font-size: 14px;
}

/* Desktop/Mobile visibility classes */
.mobile-only {
  display: none;
}

/* Container for work experience */
#experience-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

/* Styles for each experience item */
.experience-item {
  background-color: #444444;
  padding: 10px;
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 15px;
}

/* Styles for the company logo */
.company-logo {
  width: 100px;
  height: 100px;
  border-radius: 4px;
  border: 1px solid #888888;
  object-fit: contain;
  background-color: #ffffff;
  display: block; /* Remove baseline gap */
}

/* Styles for the experience information */
.experience-info {
  display: flex;
  flex-direction: column;
}

/* Styles for the company name */
.company-name {
  margin: 0;
  font-size: 18px;
}

/* Styles for the experience role */
.experience-role {
  margin: 4px 0 0;
  font-size: 14px;
}

/* Styles for the experience period */
.experience-period {
  margin: 2px 0 0;
  font-size: 14px;
}


/* Media Query for Mobile Devices */
@media (max-width: 768px) {
  #text-section,
  #content-section {
    max-width: 90%; /* Make sections wider on mobile devices */
  }

  #profile-photo {
    width: 100px; /* Smaller fixed width for mobile */
    max-width: 25vw; /* Limit width to 25% of viewport width on mobile */
    margin-left: 0; /* Remove left margin on mobile */
  }

  #profile-container {
    flex-direction: column; /* Stack elements vertically on mobile */
    align-items: center; /* Center items horizontally */
  }

  #text-section {
    margin-bottom: 20px; /* Add space between text and photo */
  }

  .paper-preview {
    width: 100px;
    max-width: 22vw;
  }

  .paper-item {
    flex-direction: row; /* Keep image to the left of text */
    align-items: center; /* Center items vertically */
    gap: 10px; /* Space between image and text on mobile */
  }

  .paper-info {
    text-align: left; /* Left align text for paper info */
  }

  .paper-title {
    font-size: 13px; /* Same as company-name on mobile */
  }

  .paper-authors {
    font-size: 11px; /* Same as experience-description on mobile */
  }

  .paper-additional-info {
    font-size: 11px; /* Same as experience-period on mobile */
  }

  /* Mobile visibility overrides */
  .desktop-only {
    display: none !important;
  }

  .mobile-only {
    display: block !important;
  }

  /* Mobile styles for work experience */
  .company-logo {
    width: 70px;
    height: 70px;
  }

  .company-name {
    font-size: 13px;
  }

  .experience-role {
    font-size: 11px;
  }

  .experience-period {
    font-size: 11px;
  }

  .experience-item {
    gap: 10px;
  }
}