body.pink{
    background: radial-gradient(circle, var(--sunset_orangee), var(--sunset_red));
}

:root {
    /* BANNER (the block above each section) */
    --history-text-width-mobile: 90vw;
    --history-text-height-mobile: 90vw;
    --history-text-width: 95vw;           /* desktop */
    --history-text-height: 22vw;          /* desktop */
    --history-text-gap: 2vw;              /* space between the banner and the image(s) under it */

    /* DESKTOP: the single finished image under each banner */
    --history-image-width: 68vw;

    /* MOBILE: the three images under each banner */
    --history-card-width-mobile: 85%;
    --history-card-gap-mobile: 20px;      /* gap between the three images */

    /* BETWEEN SECTIONS */
    --history-section-gap: 10vh;
}

.history-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: var(--history-section-gap);
    width: 100%;
    margin-top: 5vh;
    padding-bottom: var(--grid-bottom-space);   /* was 25vh */
    position: relative;
    z-index: 5;
}

.history-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: var(--history-text-gap);
    width: 100%;
}

/* Banner: background image comes from the per-section variables set in the script */
.page-text {
    width: var(--history-text-width-mobile);
    height: var(--history-text-height-mobile);
    background-image: var(--text-mobile);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

/* MOBILE (default): hide the single desktop image, show the three cards */
.section-image {
    display: none;
}

.section-cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: var(--history-card-gap-mobile);
    width: 100%;
}

.section-card {
    display: block;
    width: var(--history-card-width-mobile);
    max-width: 100%;
    height: auto;
}

.star_container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.Star{
    width: 100vw;
    position: absolute;
    will-change: transform;
}


@media (max-width:850px) {
    :root {
        --cloud-scale: 1;
        --star-scale: 1;
    }

    #pink{
        --cloud-scale: 0.8;
    }

    .clouds.mobile {
        display: block;
        z-index: 1;
    }
}

@media (min-width:850px){
    .menu-item{
        font-size: 15px;
    }

    #pink{
        --cloud-scale: 1.2;
        z-index: 1;
    }
    .footer{
        width: 20vw;
    }
    .clouds {
        width: 100px;
        position: absolute;
        z-index: 1;
        will-change: transform;
        top: calc(var(--cloud-v-start) + (var(--i, 0) * var(--cloud-v-gap)));
    }

    /* DESKTOP: bigger banner, one image, no cards */
    .page-text {
        width: var(--history-text-width);
        height: var(--history-text-height);
        background-image: var(--text-desktop);
    }

    .section-image {
        display: block;
        width: var(--history-image-width);
        height: auto;
    }
    .section-cards {
        display: none;
    }
}