/* styles.css */

/* Style for the container that holds the figure, legend, and button */
.container {
    text-align: justify; /* Center-align the content */
    padding: 20px; /* Add some spacing around the content */
}

/* Style for the resizable figure */
.resizable-figure {
    width: 90%; /* Set an initial width for the figure */
    height: auto; /* Maintain aspect ratio */
    border: 1px solid #ccc; /* Add a border for visual separation */
    overflow: auto; /* Allow content to be scrollable when resized */
    resize: both; /* Allow both horizontal and vertical resizing */
    padding: 10px; /* Add padding for better user experience */
}

img {
    width: 100%; /* Make sure the image scales within the figure */
    height: auto; /* Maintain aspect ratio of the image */
}

/* Style for the legend */
.legend {
    margin-top: 10px; /* Add spacing between the figure and the legend */
    font-size: 14px; /* Adjust the font size as needed */
}

/* Style for the magnify button */
#magnify-button {
    padding: 10px 20px; /* Add padding to the button */
    font-size: 16px; /* Adjust the font size as needed */
    background-color: #0074d9; /* Button background color */
    color: #fff; /* Button text color */
    border: none; /* Remove button border */
    cursor: pointer; /* Change cursor to pointer on hover */
    transition: background-color 0.3s; /* Add a smooth transition for background color */
}

#magnify-button:hover {
    background-color: #0056b3; /* Change background color on hover */
}