frontend/src/styles/avatar.css

.avatar {
    position: fixed;
    overflow: hidden;
    z-index: -2;
  }
  
  .avatar.about {
    height: 89vh;
    bottom: -8vh;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .avatar.skills {
    height: 190vh;
    bottom: -110vh;
    left: -1.5rem;
    transform: translateX(0%) scaleX(-1);
  }
  
  .shadow-overlay-skills {
    height: 100vh;
    width: 100vh;
    display: block;
    position: fixed;
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.25),
      rgba(255, 255, 255, 0)
    );
    z-index: -1;
  }

  .avatar-container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center;     /* Center vertically */
    height: 100vh;           /* Take the full viewport height */
}

  @media (max-width: 1100px) {
    .avatar.skills {
      z-index: -5;
      height: 95vh;
      bottom: -15vh;
    }
  }
  
  @media (max-width: 700px) {
    .avatar.about {
      z-index: -5;
      height: 95vh;
      bottom: -15vh;
    }
  }