body {
    color: white;
    font-family: 'Playfair Display', serif;
    text-align: center;
    background-color: #232724;
    margin: 0; /* Remove default margin to make it cleaner */
}

header {
    background: #2d312e;
    color: white;
    padding: 30px 50px; /* Increase padding for more "bubble" effect */
    font-size: 2.5em; /* Increase font size for better visibility */
    font-weight: bold;
    border-radius: 50px; /* Create a rounded, bubble-like shape */
    width: auto;
    display: inline-block; /* Center the bubble in the page */
    margin-top: 20px; /* Add space from the top of the page */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Optional: add shadow for a floating effect */
}

.container {
    max-width: 600px;
    margin: 20px auto;
    background: #2d312e;
    padding: 20px;
    border-radius: 10px;
}

#gallery {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to the next line */
    justify-content: center; /* Center the images */
    gap: 10px; /* Space between images */
}

.gallery-image {
    width: 150px; /* Set image width */
    height: 150px; /* Set fixed height for consistency */
    object-fit: cover; /* Ensure images maintain their aspect ratio without distortion */
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Optional: Add shadow for better look */
}

input {
    margin: 10px 0;
}

.memory-image {
    width: 60%; /* Make the image responsive */
    max-width: 600px; /* Cap the size of the image to 600px */
    margin: 20px auto; /* Add some margin for spacing and center it */
    display: block; /* Ensure the image is treated as a block-level element */
    border-radius: 8px; /* Optional: rounded corners */
}

#headerText {
    transition: opacity 0.5s ease-in-out; /* Smooth transition for text change */
    font-size: 2em;
    font-weight: bold;
    color: white; /* Make sure the text stays white */
    text-align: center;
    line-height: 1.2; /* Ensure the text is vertically centered within the bubble */
}

a {
    display: inline-block; /* Makes the link behave like a block-level element */
    background-color: #333; /* Same as the header background color */
    color: white; /* Make the text white */
    padding: 10px 20px; /* Padding to create a bubble effect */
    font-size: 1.2em; /* Slightly larger font for better readability */
    font-weight: bold; /* Bold text for emphasis */
    border-radius: 30px; /* Rounded corners for the bubble effect */
    text-decoration: none; /* Remove default underline */
    margin-top: 20px; /* Space from other elements */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Optional: soft shadow for floating effect */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transition for hover effects */
}

a:hover {
    background-color: #555; /* Slightly lighter shade for the hover effect */
    transform: translateY(-5px); /* Lift the link up slightly when hovered */
}