body {
    margin: 0;
    background: #111;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    background-image : url(carnival3.png);
    background-size: cover; /* This is the key property */
    background-repeat: no-repeat; /* Prevents tiling */
    background-position: center center; /* Centers the image */
    
    
}


body {
    margin: 0;
    background:
        linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)),
        url(carnival3.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}


/* --- Configuration Variables --- */
:root {
    --num-gondolas: 4;
    --gondola-radius: 400px;
    --fw-width: 1000px;
    --fw-height: 1000px;
    --fw-center-x: 50%;
    --fw-center-y: 50%;

    --gondola-width: 200px;
    --gondola-height: 200px;
    --gondola-text-size: 2.0em;
    --gondola-label-offset-y: 80px;

    /* --- NEW CONTROL FOR OVERALL SCALE --- */
    --ferris-wheel-scale: 1.5; /* Adjust this value (1 = 100%, 0.5 = 50%, 1.2 = 120%) */
}


/* Container for the entire Ferris Wheel system (image + gondolas) */
.wheel-container {
    position: relative;
    width: var(--fw-width);
    height: var(--fw-height);
    transform-origin: var(--fw-center-x) var(--fw-center-y);
    transform: scale(var(--ferris-wheel-scale)); /* <--- NEW: Apply overall scale here */
    /* Ensure scaling doesn't cause overflow on a fixed body height */
    margin: auto; /* Helps keep it centered after scaling */
}

/* The Ferris wheel image */
.ferris-wheel-image {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform-origin: var(--fw-center-x) var(--fw-center-y);
    pointer-events: none;
}

.ferris-wheel-brace-image {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform-origin: var(--fw-center-x) var(--fw-center-y);
    pointer-events: none;
}

/* Gondola wrapper rotates all gondolas around the center */
.gondola-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform-origin: var(--fw-center-x) var(--fw-center-y);
}

/* Individual gondola */
.gondola {
    position: absolute;
    width: var(--gondola-width);
    height: var(--gondola-height);
    text-align: center;
    cursor: pointer;
    transform-origin: center center;
    transition: transform 0.2s ease;
}

/* Gondola graphic (the 'car' image) */
.gondola .car-graphic {
    width: 100%;
    height: 100%;
}

/* The actual image tag for the car */
.gondola .car-graphic img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: var(--tint, none);
    transition:
        filter 0.3s ease,
        transform 0.3s ease;
}

/* Hover effect for the car graphic */
.gondola:hover .car-graphic img {
    transform: scale(1.1);
    filter: brightness(1.4) var(--tint, none);
}

/* Gondola label (the menu title) */
.gondola span {
    position: absolute;
    left: 50%;	  /* 100% makes it go in the center */
    transform: translateX(-50%); /* Note: this transform stacks with the parent's scale */
    bottom: calc(var(--gondola-label-offset-y) * -1);    /*  THIS -2 at the end controls the location in the y direction */

    color: white;
    font-weight: bold;
    font-size: var(--gondola-text-size);
    pointer-events: none;
    white-space: nowrap;
    padding: 5px 10px;
    background-color: rgba(173, 216, 230, 0.7);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}