body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    z-index: 0;
}



.ville-container {
    width: 80rem;
    height: 43.75rem;

    .cls-1 {
        fill: #e6f0f7;
    }

    .cls-1,
    .cls-2,
    .cls-3,
    .cls-4,
    .cls-5,
    .cls-6,
    .cls-7,
    .cls-8,
    .cls-9,
    .cls-10,
    .cls-11,
    .cls-12 {
        stroke-width: 0px;
    }

    .cls-13,
    .cls-14,
    .cls-15,
    .cls-16,
    .cls-17,
    .cls-18,
    .cls-19 {
        stroke-miterlimit: 10;
    }

    .cls-13,
    .cls-16,
    .cls-18 {
        stroke: #000;
    }

    .cls-13,
    .cls-19,
    .cls-12 {
        fill: #fff;
    }

    .cls-2,
    .cls-17,
    .cls-18 {
        fill: none;
    }

    .cls-3,
    .cls-14,
    .cls-15,
    .cls-16 {
        fill: #a8d9f5;
    }

    .cls-4 {
        fill: url(#Dégradé_sans_nom);
    }

    .cls-5 {
        fill: #e9f4fc;
    }

    .cls-14,
    .cls-17 {
        stroke: #221f20;
    }

    .cls-15 {
        stroke-width: .3px;
    }

    .cls-15,
    .cls-19 {
        stroke: #e6e7e8;
    }

    .cls-6 {
        fill: #4f5051;
    }

    .cls-7 {
        fill: #56727d;
    }

    .cls-8 {
        fill: #feffff;
    }

    .cls-9 {
        fill: #d8eaf5;
    }

    .cls-10 {
        fill: #7ba3b6;
    }

    .cls-11 {
        fill: #e9f4fa;
    }
}

.nuage-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100vh;
}

.nuage3 {
    position: absolute;
    top: 0;
    left: 70%;
    /* Ajuster la position initiale du bus vers la droite */
    transform: translateX(-50%) rotateY(0deg);
    /* Appliquer la translation et la rotation */
    animation: deplacementNuage 150s infinite linear;
    /* Animation de déplacement */
    z-index: +1;
}

@keyframes deplacementNuage {
    0% {
        transform: translateX(0%);
        /* Déplacer le nuage complètement à droite */
    }

    100% {
        transform: translateX(-100%);
    }
}



.nuage2 {
    position: absolute;
    top: 0;
    left: 0;
    animation: deplacementNuage 280s linear infinite;
    /* Animation de déplacement */
}

@keyframes deplacementNuage {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(-100%);
        /* Translate sur toute la largeur */
    }
}

.bus {
    position: absolute;
    top: 0;
    left: 70%;
    /* Ajuster la position initiale du bus vers la droite */
    transform: translateX(-50%) rotateY(0deg);
    /* Appliquer la translation et la rotation */
    animation: deplacementBus 40s infinite linear;
    /* Animation de déplacement */
    z-index: +1;

}

@keyframes deplacementBus {
    0% {
        transform: translateX(20%);
    }

    100% {
        transform: translateX(-100%);
    }


}

@keyframes battementAiles {
    0% {
        transform: rotate(-20deg);
    }

    50% {
        transform: rotate(20deg);
    }

    100% {
        transform: rotate(-20deg);
    }
}

.oiseau {
    width: 50px;
    height: 30px;
    background-color: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: battementAiles 50s infinite;
}