.blue-button {
    background-color: blue; /* Sets the background to blue */
    color: white; /* Sets the text color to white for contrast */
    padding: 10px 20px; /* Adds space inside the button */
    border: none; /* Removes the default button border */
    border-radius: 5px; /* Rounds the corners */
    cursor: pointer; /* Changes the cursor to a hand icon on hover */
    font-size: 16px; /* Adjusts the text size */
}

/* Optional: Add a hover effect */
.blue-button:hover {
    background-color: #0000FF; /* A slightly different shade of blue on hover */
}

.image-frame {
    width: 900px;  /* Set the width of the "frame" */
    height: 600px; /* Set the height of the "frame" */
    border: 1px solid black; /* Optional: adds a border to visualize the frame */
    overflow: hidden; /* Ensures the image doesn't spill out of the frame */
}

.image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the entire frame without distortion, cropping as needed */
}

.container {
    display: flex; /* Makes the child elements align in a row */
    gap: 10px; /* Adds space between the images */
}

.container img {
    width: 50%; /* Each image takes up half the container's width */
    /* Use object-fit: cover; if images have different aspect ratios */
}