/* Ensure the body and html take up the full viewport height and prevent scrolling */
html, body {
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.Ward {
  z-index: 100;
}
 #Closet{
 z-index: -1;
  background-size: cover;
  right: 50%;
 }
#container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

/* Wrapper for images and buttons */
.content-wrapper {
    display: flex;
    justify-content: space-between; /* Spread images and buttons */
    align-items: center;
    gap: 20px; /* Space between images and buttons */
    max-height: 100vh;
    width: 90%; /* Ensure content fits within viewport */
}

/* Container for images */
.image-container {
    position: relative; /* Allow absolute positioning of images */
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 90vh; /* Kept to accommodate large mirror */
    max-width: 60%; /* Balanced for image and button space */
}

/* Styling for the mirror image (background) */
#mirror {
    position: absolute;
    max-width: 100%; /* Base size matches container */
    max-height: 100%;
    object-fit: contain; /* Ensure image scales without distortion */
    z-index: 1; /* Place behind Default image */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(3, 2.5); /* Width 3x, height 3.5x (reduced from 4) */
}

/* Styling for the default/hairstyle image */
#Default {
    max-width: 60%; /* Smaller to show large mirror in background */
    max-height: 60%;
    object-fit: contain; /* Ensure image scales without distortion */
    z-index: 2; /* Place in front of mirror */
}

/* Container for buttons */
.button-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Push buttons towards bottom */
    align-items: flex-start; /* Align buttons to the left within the container */
    gap: 10px; /* Space between button pairs */
    max-height: 90vh; /* Match image container height */
}

/* Styling for each button pair */
.button-pair {
    display: flex;
    gap: 10px; /* Space between Hairstyle and Hair Color buttons */
}

/* Button styling for consistency */
button {
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
}