.human-body {
    position: relative;
    display: block;
    width: 100%;
    margin: 30px auto;
}

.human-body svg:hover {
    cursor: pointer;
}

.human-body svg:hover path {
    fill: #f14d49;
}

.human-body svg {
    position: absolute;
    left: 50%;
}

.human-body svg#head {
    margin-left: -27px;
    top: -6px;
}

.human-body svg#orbit {
    margin-left: -6px;
    top: 27px;
}

.human-body svg#neck {
    margin-left: -21px;
    top: 70px;
}

.human-body svg#chest {
    margin-left: -57px;
    top: 140px;
}

.human-body svg#rightShoulder {
    margin-left: -90px;
    top: 100px;
}

.human-body svg#rightArm {
    margin-left: -162px;
    top: 210px;
}

.human-body svg#rightHand {
    margin-left: -197px;
    top: 387px;
}

.human-body svg#leftShoulder {
    margin-left: 48px;
    top: 95px;
}

.human-body svg#leftArm {
    margin-left: 100px;
    top: 202px;
}

.human-body svg#leftHand {
    margin-left: 172px;
    top: 336px;
}

.human-body svg#abdomen {
    margin-left: -70px;
    top: 210px;
}

.human-body svg#rightLeg {
    margin-left: -110px;
    top: 420px;
    z-index: 9999;
}

.human-body svg#rightFoot {
    margin-left: -70px;
    top: 773px;
}

.human-body svg#leftLeg {
    margin-left: -10px;
    top: 415px;
    z-index: 9999;
}

.human-body svg#leftFoot {
    margin-left: 40px;
    top: 771px;
}

.human-body svg:hover ellipse {
    fill: #f14d49;
}

.human-body svg:hover path,
.human-body svg:hover ellipse {
    fill: #f14d49; /* Change fill color on hover */
}

/* .human-body svg:hover::after {
    content: attr(data-label); /* Get label from data attribute */
//    position: absolute;
//    background: rgba(241, 77, 73, 0.8); /* Semi-transparent red */
//    color: white;
//    padding: 5px;
//    border-radius: 5px;
//    white-space: nowrap; /* Prevent text wrap */
//    z-index: 10;
//    transform: translateY(-100%); /* Position above the body part */
//    left: 50%;
//    transform: translate(-50%, -100%); /* Center it above the part */
//}

.tooltip {
    position: absolute;
    background: rgba(241, 77, 73, 0.9); /* Semi-transparent red */
    color: white;
    padding: 10px;
    border-radius: 5px;
    white-space: nowrap; /* Prevent text wrap */
    z-index: 10;
    display: none; /* Initially hidden */
}

body {
    /* display: flex; */
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
    margin: 0;
}

.human-body {
    position: relative;
    display: block;
    margin: 30px auto;
    width: 100%; /* Ensures it scales well */
    max-width: 800px; /* Limit maximum width */
}

/* .human-body svg {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Centers SVG horizontally */
//    transition: fill 0.3s ease; /* Smooth transition for color changes */
//} */

.human-body svg:hover {
    cursor: pointer;
}

.tooltip {
    position: absolute;
    background: rgba(241, 77, 73, 0.9); /* Semi-transparent red */
    color: white;
    padding: 10px;
    border-radius: 5px;
    white-space: wrap; /* Prevent text wrap */
    z-index: 10;
    display: none; /* Initially hidden */
}