.tree-container {
    width: 100vw;
    height: 100vh;
    background-size: cover;
    overflow: hidden;
}

.tree-container .tree-count-wrapper {
    background-color: #A8BE4A;
    padding: 8px 25px 8px 20px;
    right: 2vw;
    top: 3vh;
    border-radius: 65%;
}

.tree-container .tree-count {
    color: white;
    font-weight: bold;
    font-size: clamp(12px, 2vw, 20px);
}

.tree-container .little-tree {
    width: 2vw;
}

.link-avancement {
    font-size: clamp(25px, 3vw, 30px) !important;
    font-weight: unset !important;
    text-decoration: underline;
}

.tree-img {
    width: 0vw;
    height: 0vw;
}

.tree-wrapper {
    width: 10.5vw;
    height: 10.5vw;
}

.tree1 {
    left: 5.2vw;
    top: 41vh;
}

.tree2 {
    left: 7vw;
    top: 58.5vh;
}

.tree3 {
    left: 12.8vw;
    top: 55.7vh;
}

.tree4 {
    left: 18vw;
    top: 69vh;
}

.tree5 {
    left: 26vw;
    top: 67vh;
}

.tree6 {
    left: 20.4vw;
    top: 50.5vh;
}

.tree7 {
    left: 19vw;
    top: 31vh;
}

.tree8 {
    left: 28.2vw;
    top: 41vh;
    transform: rotate(-24deg);
}

.tree9 {
    left: 32vw;
    top: 54vh;
}

.tree10 {
    left: 39vw;
    top: 61vh;
    z-index: 10;
}

.tree11 {
    left: 29vw;
    top: 19vh;
    z-index: 10;
}

.tree12 {
    left: 26vw;
    top: 31vh;
    z-index: 11;
}

.tree13 {
    left: 46vw;
    top: 70vh;
    z-index: 10;
}

.tree14 {
    left: 39vw;
    top: 42vh;
    z-index: 9;
}

.tree15 {
    left: 43vw;
    top: 30vh;
    z-index: 10;
}

.tree16 {
    left: 34vw;
    top: 9vh;
}

.tree17 {
    left: 57vw;
    top: 60vh;
    z-index: 11;
}



.grow-tree {
    animation: grow-tree 900s forwards;
}

.grow-tree-old {
    animation-duration: 0.8s;
    animation-delay: 1s;
    animation-name: grow-tree-old;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}

@keyframes grow-tree {
    from {
        width: 0vw;
        height: 0vw;
    }

    to {
        width: 10.5vw;
        height: 10.5vw;
    }
}

@keyframes grow-tree-old {
    0% {
        width: 0vw;
        height: 0vw;
    }

    50% {
        width: 15vw;
        height: 15vw;
    }

    60% {
        width: 8vw;
        height: 8vw;
    }

    70% {
        width: 12vw;
        height: 12vw;
    }

    80% {
        width: 9vw;
        height: 9vw;
    }

    90% {
        width: 11vw;
        height: 11vw;
    }

    100% {
        width: 10.5vw;
        height: 10.5vw;
    }
}

.tree-container .car {
    width: 2.3vw;
}

.car1 {
    top: -9vh;
    left: 23vw;
    transform: rotate(115deg);
}

.car2 {
    right: -4vw;
    top: 35vh;
    transform: rotate(281deg);
}

.car3 {
    right: -4vw;
    top: 35vh;
    transform: rotate(281deg);
}

.car4 {
    left: 75vw;
    top: -10vh;
    transform: rotate(197deg);
}

.car5 {
    left: 65.5vw;
    top: 8.5vh;
    transform: rotate(351deg);
}

.car6 {
    top: 7vh;
    right: 14.7vw;
    transform: rotate(76deg);
}

.car3 .blue {
    width: 0.39vw;
    height: 0.271vw;
    background-color: #02a6e7;
    top: 41.9%;
    left: 25%;
    animation-duration: 1s;
    animation-name: lightBlue;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.plane {
    width: 51vw;
    z-index: 9999;
}
.plane1 {
    top: 66vh;
    right: -50vw;
    transform: rotate(21deg);
}

.plane2 {
    top: -33vh;
    right: -48vw;
    transform: rotate(332deg);
}


.anim-plane-bottom-to-top {
    animation-duration: 600s;
    animation-name: anim-plane-bottom-to-top;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.anim-plane-top-to-bottom {
    animation-duration: 600s;
    animation-name: anim-plane-top-to-bottom;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: 300s;
}

@keyframes anim-plane-top-to-bottom {
    0% {
        top: -33vh;
        right: -48vw;
        transform: rotate(332deg);
    }
    1% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
    100% {
        top: 96vh;
        right: 96vw;
        transform: rotate(332deg);
    }
   
}

@keyframes anim-plane-bottom-to-top {
    0% {
        top: 66vh;
        right: -50vw;
    }
    1% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
    100% {
        top: -24vh;
        right: 101vw;
    }
}

@keyframes lightBlue {
    from {
        opacity: 0;
        box-shadow: 0px 0px 0px 0px #0000ff00;
    }

    to {
        opacity: 1;
        box-shadow: 0px 0px 2px 2px #0000ff4d;
    }
}

.car3 .red {
    width: 0.39vw;
    height: 0.271vw;
    background-color: #e70202;
    top: 41.9%;
    left: 55.9%;
    animation-duration: 1s;
    animation-name: lightRed;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: 0.5s;
}

@keyframes lightRed {
    from {
        opacity: 0;
        box-shadow: 0px 0px 0px 0px #0000ff00;
    }

    to {
        opacity: 1;
        box-shadow: 0px 0px 2px 2px #ff00004d;
    }
}

.car-animation-left-to-right {
    animation-duration: 250s;
    animation-name: car-animation-left-to-right;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.car-animation-right-to-turn {
    animation-duration: 100s;
    animation-name: car-animation-right-to-turn;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: 9s;
}

.car-animation-right-to-left {
    animation-duration: 250s;
    animation-name: car-animation-right-to-left;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: 34s;
}

.car-animation-turn-to-left {
    animation-duration: 100s;
    animation-name: car-animation-turn-to-left;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: 6s;
}

.car-animation-parking-to-left {
    animation-duration: 170s;
    animation-name: car-animation-parking-to-left;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: 20s;
}

.car-animation-parking-to-top {
    animation-duration: 170s;
    animation-name: car-animation-parking-to-top;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: 33s;
}

@keyframes car-animation-left-to-right {
    0% {
        top: -9vh;
        left: 23vw;
        transform: rotate(115deg);
    }

    1% {
        top: 14.3vh;
        left: 49vw;
        transform: rotate(111deg);
    }

    2% {
        width: 2.3vw;
        top: 27.3vh;
        left: 69vw;
        transform: rotate(103deg);
    }

    3% {
        top: 41.3vh;
        left: 102vw;
        transform: rotate(103deg);
    }

    100% {
        top: 41.3vh;
        left: 102vw;
        transform: rotate(103deg);
    }

    100% {
        top: 41.3vh;
        left: 102vw;
        transform: rotate(103deg);
    }

    100% {
        top: 41.3vh;
        left: 102vw;
        transform: rotate(103deg);
    }

    100% {
        top: 41.3vh;
        left: 102vw;
        transform: rotate(103deg);
    }

    100% {
        top: 41.3vh;
        left: 102vw;
        transform: rotate(103deg);
    }

    100% {
        top: 41.3vh;
        left: 102vw;
        transform: rotate(103deg);
    }

    100% {
        top: 41.3vh;
        left: 102vw;
        transform: rotate(103deg);
    }

    100% {
        top: 41.3vh;
        left: 102vw;
        transform: rotate(103deg);
    }
}

@keyframes car-animation-right-to-turn {
    0% {
        right: -4vw;
        top: 35vh;
        transform: rotate(284deg);
    }

    1% {
        right: 21vw;
        top: 25.2vh;
        transform: rotate(284deg);
    }

    2% {
        right: 23vw;
        top: 22.2vh;
        transform: rotate(316deg);
    }

    3% {
        right: 23.8vw;
        top: 17.2vh;
        transform: rotate(363deg);
    }

    3% {
        right: 23.8vw;
        top: 17.2vh;
        transform: rotate(370deg);
    }

    5% {
        right: 19.2vw;
        top: -8.2vh;
        transform: rotate(380deg);
    }

    6% {
        right: 19.2vw;
        top: -8.2vh;
        transform: rotate(380deg);
    }

    7% {
        right: 19.2vw;
        top: -8.2vh;
        transform: rotate(380deg);
    }

    100% {
        right: 19.2vw;
        top: -8.2vh;
        transform: rotate(380deg);
    }

    100% {
        right: 19.2vw;
        top: -8.2vh;
        transform: rotate(380deg);
    }

    100% {
        right: 19.2vw;
        top: -8.2vh;
        transform: rotate(380deg);
    }

    100% {
        right: 19.2vw;
        top: -8.2vh;
        transform: rotate(380deg);
    }

    100% {
        right: 19.2vw;
        top: -8.2vh;
        transform: rotate(380deg);
    }

    100% {
        right: 19.2vw;
        top: -8.2vh;
        transform: rotate(380deg);
    }

    100% {
        right: 19.2vw;
        top: -8.2vh;
        transform: rotate(380deg);
    }
}

@keyframes car-animation-right-to-left {
    0% {
        right: -4vw;
        top: 35vh;
        transform: rotate(284deg);
    }

    1% {
        right: 26vw;
        top: 22vh;
        transform: rotate(287deg);
    }

    2% {
        right: 42vw;
        top: 12vh;
        transform: rotate(291deg);
    }

    3% {
        right: 67vw;
        top: -8vh;
        transform: rotate(291deg);
    }

    100% {
        right: 67vw;
        top: -8vh;
        transform: rotate(291deg);
    }

    100% {
        right: 67vw;
        top: -8vh;
        transform: rotate(291deg);
    }

    100% {
        right: 67vw;
        top: -8vh;
        transform: rotate(291deg);
    }

    100% {
        right: 67vw;
        top: -8vh;
        transform: rotate(291deg);
    }

    100% {
        right: 67vw;
        top: -8vh;
        transform: rotate(291deg);
    }

    100% {
        right: 67vw;
        top: -8vh;
        transform: rotate(291deg);
    }

    100% {
        right: 67vw;
        top: -8vh;
        transform: rotate(291deg);
    }

    100% {
        right: 67vw;
        top: -8vh;
        transform: rotate(291deg);
    }

    100% {
        right: 67vw;
        top: -8vh;
        transform: rotate(291deg);
    }

    100% {
        right: 67vw;
        top: -8vh;
        transform: rotate(291deg);
    }
}

@keyframes car-animation-turn-to-left {
    0% {
        left: 75vw;
        top: -10vh;
        transform: rotate(197deg);
    }

    1% {
        left: 71.2vw;
        top: 13vh;
        transform: rotate(197deg);
    }

    2% {
        left: 69.2vw;
        top: 17vh;
        transform: rotate(227deg);
    }

    3% {
        left: 66.2vw;
        top: 19vh;
        transform: rotate(265deg);
    }

    4% {
        left: 62.2vw;
        top: 16.5vh;
        transform: rotate(288deg);
    }

    5% {
        left: 30.2vw;
        top: -8vh;
        transform: rotate(295deg);
    }

    100% {
        left: 30.2vw;
        top: -8vh;
        transform: rotate(295deg);
    }

    100% {
        left: 30.2vw;
        top: -8vh;
        transform: rotate(295deg);
    }

    100% {
        left: 30.2vw;
        top: -8vh;
        transform: rotate(295deg);
    }

    100% {
        left: 30.2vw;
        top: -8vh;
        transform: rotate(295deg);
    }

    100% {
        left: 30.2vw;
        top: -8vh;
        transform: rotate(295deg);
    }

    100% {
        left: 30.2vw;
        top: -8vh;
        transform: rotate(295deg);
    }

    100% {
        left: 30.2vw;
        top: -8vh;
        transform: rotate(295deg);
    }
}

@keyframes car-animation-parking-to-left {
    0% {
        left: 65.5vw;
        top: 8.5vh;
        transform: rotate(351deg);
    }

    1% {
        left: 66.5vw;
        top: 16.5vh;
        transform: rotate(334deg);
    }

    2% {
        left: 69vw;
        top: 21vh;
        transform: rotate(288deg);
    }

    3% {
        left: 47vw;
        top: 7vh;
        transform: rotate(294deg);
    }

    4% {
        left: 31vw;
        top: -7.6vh;
        transform: rotate(294deg);
    }

    50% {
        left: -50vw;
        top: -7.6vh;
        transform: rotate(294deg);
    }

    60% {
        left: -50vw;
        top: 150vh;
        transform: rotate(294deg);
    }

    70% {
        left: 150vw;
        top: 150vh;
        transform: rotate(294deg);
    }

    80% {
        left: 102vw;
        top: 36vh;
        transform: rotate(284deg);
    }

    81% {
        left: 70vw;
        top: 22vh;
        transform: rotate(284deg);
    }

    82% {
        left: 67vw;
        top: 18vh;
        transform: rotate(322deg);
    }

    83% {
        left: 65.5vw;
        top: 8.5vh;
        transform: rotate(351deg);
    }
}

@keyframes car-animation-parking-to-top {
    0% {
        top: 7vh;
        right: 14.7vw;
        transform: rotate(76deg);
    }

    1% {
        top: 9.3vh;
        right: 19.7vw;
        transform: rotate(76deg);
    }

    2% {
        top: 13.3vh;
        right: 23.2vw;
        transform: rotate(17deg);
    }

    3% {
        top: -8.2vh;
        right: 19.2vw;
        transform: rotate(17deg);
    }

    4% {
        top: -10vh;
        right: 150vw;
        transform: rotate(17deg);
    }

    4% {
        top: -10vh;
        right: 150vw;
        transform: rotate(17deg);
    }

    5% {
        top: -7.2vh;
        right: 72.6vw;
        transform: rotate(114deg);
    }

    6% {
        top: 11.9vh;
        right: 52.7vw;
        transform: rotate(117deg);
    }

    7% {
        top: 19.8vh;
        right: 41.6vw;
        transform: rotate(109deg);
    }

    8% {
        top: 24.2vh;
        right: 34.6vw;
        transform: rotate(109deg);
    }

    9% {
        top: 21.2vh;
        right: 26.6vw;
        transform: rotate(50deg);
    }

    10% {
        top: 10.2vh;
        right: 18.6vw;
        transform: rotate(50deg);
    }

    11% {
        top: 7vh;
        right: 14.7vw;
        transform: rotate(76deg);
    }
}