/* Ensure the figure width is the same as the image */
.custom-figure {
    display: inline-block;  /* Shrinks to the size of the image */
    max-width: 100%;  /* Prevents the figure from exceeding the image width */
    text-align: left;  /* Align caption text to the left */
    margin: 0;
    padding: 0;
}

/* Ensure image maintains its size and doesn't affect layout */
.custom-img {
    display: block;  /* Removes space below the image */
    width: 100%;  /* Keeps the image at 100% of the figure's width */
    height: auto;  /* Maintains the aspect ratio */
    border-radius: 5px;
}

/* Make sure the caption wraps within the figure */
.custom-caption {
    width: 100%;  /* Forces the caption to match the width of the figure */
    text-align: left;  /* Align caption text to the left */
    margin-top: 5px;  /* Adds some space between the image and caption */
    padding: 0;
    box-sizing: border-box;  /* Ensures padding doesn't affect the width */
    white-space: normal;  /* Allow the caption text to wrap */
}

.selectable {
    background-color: red; /* Default state: red */
    color: white;
    padding: 5px 10px;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid black;
}

.selected {
    background-color: #4CAF50; /* Selected state: green */
    color: white;
}

.text-outline {
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px  1px 0 #000,
        1px  1px 0 #000;
}