/* Make the body a flex container to center all content */
body {
    background-color: #DFDBDA;
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center;    /* Center items horizontally */
    justify-content: center; /* Center items vertically */
    height: 100vh; /* Full viewport height */
    margin: 0; /* Remove default margin */
    text-align: center; /* Align all text in the center */
}

h1 {
    font-family: Helvetica, Arial, sans-serif;
    margin: 0; /* Optional: Remove default margin */
    padding-bottom: 20px; /* Space between heading and images */
}

/* Container to hold the images with responsive grid layout */
.image-container {
    display: grid;
    grid-template-columns: repeat(4, 120px); /* Default: 4 images in a row */
    gap: 10px; /* Space between images */
    justify-content: center; /* Center the grid items horizontally */
    align-items: center; /* Center the grid items vertically */
    padding: 10px;
}

/* Enlarge the image on hover */
.image-container img {
    width: 120px; /* Default image size */
    height: 120px; /* Default image size */
    object-fit: cover;
    transition: transform 0.3s ease; /* Smooth hover effect */
    border-radius: 8px; /* Optional rounded corners */
    cursor: pointer;
}

.image-container img:hover {
    transform: scale(1.1); /* Enlarge on hover */
}

/* Responsive: Change to 2x2 grid for smaller screens */
@media (max-width: 800px) {
    .image-container {
        grid-template-columns: repeat(2, 120px); /* 2 images per row */
    }
}

/* Button container to center the button */
.button-container {
    margin-top: 20px; /* Space between the images and button */
}

.lucky-button {
    padding: 10px 20px;
    background-color: orange;
    color: white;
    border: none;
font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.lucky-button:hover {
    background-color: darkorange; /* Darker orange on hover */
}