/* Basic reset to remove default margins and paddings */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Set the background color */
body {
    background-color: #F8F0DE; /* Light beige background */
    display: flex;
    justify-content: center; /* Center the content horizontally */
    align-items: center; /* Center the content vertically */
    height: 100vh; /* Full viewport height */
    font-family: Arial, sans-serif; /* Set the font family */
}

/* Container for the content */
.container {
    text-align: center; /* Center text */
}

/* Image styling */
.photo {
    width: 55%; /* Set the width of the image */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Optional: rounded corners */
    margin-bottom: 15px; /* Space below the image */
}

/* Caption styling */
.caption {
    font-family: 'Lora', serif; 
    font-size: 1.9rem; /* Font size for caption */
    color: #333; /* Dark text color for better contrast */
    margin-bottom: 20px; /* Space below the caption */
}

/* Button styling */
.button {
    font-family: 'Satisfy', cursive; /* Use the "Satisfy" font */
    display: inline-block; /* Make the link behave like a button */
    padding: 10px 20px; /* Button padding */
    font-size: 1.8rem; /* Font size */
    color: white; /* Text color */
    background-color: #CF463D; /* Button color */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    text-decoration: none; /* No underline on link */
    transition: background-color 0.3s ease; /* Smooth transition for hover */
}

/* Button hover effect */
.button:hover {
    background-color: #e08d88; /* Darker shade on hover */
}