body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    
    /* Set background image */
    background-image: url('media/collage2.jpg'); /* Change to your actual image path */
    background-size: cover; /* Make the image cover the entire screen */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat; /* Prevent repeating */
}

.top-text {
    font-family: 'Futura', sans-serif;
    font-style: italic;
    font-size: 24px;
    text-align: center;
    margin-bottom: 20px;
    color: #ffffff;
}

.image-wrapper {
    position: relative;
    width: 563px; /* Adjust as needed */
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.center-image {
    width: 237%;
    height: auto;
    display: block;
}

/* Make the overlays clickable */
.overlay {
    position: absolute;
    width: 70px; /* Adjust as needed */
    height: auto;
    transition: transform 0.3s ease-in-out;
}

/* Change cursor to indicate clickability */
.overlay:hover {
    transform: scale(1.1); /* Slight zoom effect */
    cursor: pointer;
}

/* Adjust positions */
.image1 { top: -25%; left: 13%; transform: rotate(15deg); width: 172px; }
.image2 { top: -18%; right: 32%; transform: rotate(-11deg);  width: 159px;}
.image3 { bottom: 48%; left: 24%; transform: rotate(-8deg);  width: 199px;}
.image4 { bottom: 66%; right: 3%; transform: rotate(-20deg);  width: 195px;}
.image5 { bottom: 48%; right: 16%; transform: rotate(8deg);  width: 180px;}