html,
body {
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* Main container flex layout */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.description-container {
  flex: 1 0 auto;
  margin-bottom: 3rem;
  min-height: 57vh;
  margin-top: 6rem;
  /* Push content down below the fixed header */
  /* Center content further down the page */
}

/* Ensure intro is a flex container and doesn't cause overflow */
.intro {
  display: flex;
  align-items: flex-start;
  /* Updated to align to top to maintain image position */
  gap: 2rem;
  width: 100%;
}

.profile-container {
  position: relative;
  display: inline-block;
  margin-right: auto;
  margin-left: 7rem;
  margin-top: 2rem;
  /* Add top margin to position image lower */
  flex-shrink: 0;
  /* Prevent profile container from shrinking */
}

.profile-image {
  display: block;
  max-width: 220px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .profile-image {
  box-shadow: 0 4px 24px 0 rgba(255, 255, 255, 0.1);
}

.spinning-ring {
  position: absolute;
  top: -10px;
  left: -10px;
  width: calc(220px + 20px);
  height: calc(220px + 20px);
  border-radius: 50%;
  box-sizing: border-box;
  animation: spin 10s linear infinite, glow 2s ease-in-out infinite alternate;
  box-shadow: 0 0 15px #4a9fc8;
  z-index: -1;
  background:
    conic-gradient(from 0deg,
      #4a9fc8 0deg,
      #4a9fc8 90deg,
      var(--background-color) 90deg,
      var(--background-color) 180deg,
      #4a9fc8 180deg,
      #4a9fc8 270deg,
      var(--background-color) 270deg,
      var(--background-color) 360deg);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes glow {
  0% {
    box-shadow: 0 0 10px #4a9fc8;
  }

  100% {
    box-shadow: 0 0 25px #4a9fc8, 0 0 35px #4a9fc8;
  }
}

/* Mobile styles for the profile container and ring */
@media (max-width: 900px) {
  .profile-container {
    margin: 0 auto;
  }

  .profile-image {
    max-width: 180px;
    width: 180px;
    height: 180px;
  }

  .spinning-ring {
    top: -10px;
    left: -10px;
    width: calc(180px + 20px);
    height: calc(180px + 20px);
    animation: spin 10s linear infinite, glow 2s ease-in-out infinite alternate;
    background:
      conic-gradient(from 0deg,
        #4a9fc8 0deg,
        #4a9fc8 90deg,
        var(--background-color) 90deg,
        var(--background-color) 180deg,
        #4a9fc8 180deg,
        #4a9fc8 270deg,
        var(--background-color) 270deg,
        var(--background-color) 360deg);
  }
}

.intro-text {
  flex: 1;
  /* Allow text area to take remaining space */
  min-width: 0;
  /* Allow flex item to shrink below content size */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Intro text styles */
.intro-heading {
  font-size: 2rem;
  margin: 0 0 1rem;
  font-weight: 600;
  color: var(--text-color);
}

.intro-paragraph {
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--text-color);
  margin: 0 0 1rem;
}

@media (max-width: 900px) {

  html,
  body {
    height: auto;
    min-height: 100vh;
  }

  .intro {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
    width: 100%;
  }

  .intro-text {
    width: 100%;
    max-width: min(28rem, 100vw);
    margin: 0 auto;
    padding-left: clamp(16px, 4vw, 24px);
    padding-right: clamp(16px, 4vw, 24px);
    overflow-wrap: break-word;
    word-break: normal;
    white-space: normal;
    text-align: center;
    min-height: 200px;
    /* Fixed minimum height to prevent image push on mobile */
  }

  .profile-image {
    margin: 0 auto;
    max-width: 180px;
  }

  .container {
    height: auto;
    min-height: 100vh;
  }

  body {
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }

  .site-header,
  .site-footer {
    overscroll-behavior: contain;
  }

  .description-container {
    flex: none;
    min-height: auto;
    padding-top: 6rem;
    /* More space between header and intro on mobile */
    padding-bottom: 2rem;
  }
}

@media (max-width: 900px) and (orientation: portrait) {
  .description-container {
    flex: 1;
    padding-top: 2rem;
    padding-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
    /* Account for header/footer */
  }

  .intro {
    align-items: center;
    text-align: center;
    width: 100%;
    padding: 0 1rem;
    box-sizing: border-box;
    justify-content: center;
    min-height: auto;
    gap: 1.5rem;
  }

  .intro-text {
    text-align: center;
    margin: 0 !important;
    width: 100%;
    max-width: 100%;
    padding: 0 1rem;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-break: normal;
    white-space: normal;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 200px;
    /* Fixed minimum height to prevent image push on mobile */
  }

  /* Remove any left margin that could induce horizontal scroll on narrow portrait */
  .profile-image {
    margin-left: auto;
    margin-right: auto;
    max-width: 180px;
  }

  /* iPhone 390x844 portrait specific adjustments */
  @media (max-width: 390px) and (orientation: portrait) {
    .description-container {
      padding-top: 1rem;
      padding-bottom: 1rem;
      min-height: calc(100vh - 180px);
    }

    .intro {
      padding: 0 0.5rem;
      gap: 1.5rem;
    }

    .intro-text {
      padding: 0 0.5rem;
    }

    .intro-text .intro-heading {
      font-size: 1.75rem;
    }

    .intro-text .intro-paragraph {
      font-size: 1.1rem;
      line-height: 1.6;
    }
  }
}

/* Typing effect styles */
.typing-text {
  position: relative;
  display: inline-block;
}

.typing-text::after {
  content: "_";
  animation: blink 1s infinite;
  margin-left: 2px;
  opacity: 1;
  display: inline-block;
  width: 8px;
  height: 1.2em;
  vertical-align: bottom;
  position: relative;
  top: -1px;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* Screen reader only text - visually hidden but accessible to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Ensure smooth scrolling on all devices */
html {
  scroll-behavior: smooth;
}

body {
  overscroll-behavior-y: auto;
}