.btn-retour{
    margin-top: 20px;
    padding: 10px;
    transition: transform 400ms;
    width: 174px;
}

#btn-retour__link {
    padding: 10px 30px;
    margin: 0px;
    font-size: smaller;
}

.btn-retour:hover {
    transform: rotate(10deg);
}

.container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 300px;
    flex-wrap: wrap;
    row-gap: 50px;
}

.container__btn {
    color:  rgb(3, 201, 151);
    background-color: rgb(0, 27, 49);
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: larger;
    padding: 10px 30px;
    border-radius: 30px;
    transition: transform 350ms;
    margin: 0px 20px;
    height: 22px;
}

.container__btn-scale:hover {
    transform: scale(1.15);
}

.exo_ball, .exo_ball-montante, .exo-popcat, .exo-barrel-roll, .exo-load-bar, .exo-3d-roll, .exo-load-bar-keyframe {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 20px;
}

.container__ball {
    width: 20px;
    height: 20px;
    background-color: rgb(3, 201, 151);
    border-radius: 10px;
    position: relative;
}

.container__btn__ball {
    color: white;
}

.container__btn__ball:hover + .container__ball--scale {
    transform: scale(5);
}

.container__ball--scale {
    transition: transform 1s;
}

.exo_ball {
    gap: 60px;
}
.container__ball__bar {
    background: linear-gradient(0deg, rgb(138, 44, 226) 0%, rgb(3, 201, 151) 100%);
    height: 220px;
    border-radius: 10px;
}

.container__ball--down {
    margin-top: 201px;
    transition: transform 2s;
    transition-timing-function: cubic-bezier(.13, .64, .02, .8);
    box-shadow: 0px 0px 1px 0.1px black;
}

.container__btn--cursor, .exo-load-bar__btn, .exo-load-bar__btn-keyframe {
    cursor: pointer
}

.container__btn--cursor:active + .container__ball__bar > .container__ball--down {
    transform: translateY(-201px);
}

#pop-cat, .pop-cat--translate {
    width: 50px;
    position: relative;
    right: -24px;
    top: 21px;
    transition: transform 800ms ease-in-out;
    transform: translateY(300%);
}

.container__ball__pop-cat {
    overflow: hidden;
    width: 100px;
    height: 100px;
    transform: scale(0.1);
    transition: transform 1.5s;
}

.container__btn__pop-cat:hover + .container__ball__pop-cat > #pop-cat {
    transform: translateY(0%);
}

.container__btn__pop-cat:hover + .container__ball__pop-cat {
    transform: scale(1);
}

.container__ball__arwing {
    width: 100px;
    height: 100px;
}

#arwing {
    width: 100px;
    position: relative;
    top: 33px;
}

.container__btn__barrel-roll--active:focus + .container__ball__arwing {
    animation: barrel-roll 1.5s;
}

@keyframes barrel-roll {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

.container__bar {
    width: 820px;
    height: 25px;
    border-radius: 0px;
    border: 2px solid rgb(138, 44, 226);
    display: flex;
}

.container__bar__progress {
    width: 815px;
    height: 20px;
    background-color: rgb(3, 201, 151);
    margin: auto;
    transform: scaleX(0);
    transition: transform 5s;
    transform-origin: left;
}

.exo-load-bar__btn:active + .container__bar > .container__bar__progress {
    transform: scaleX(1);
    transform-origin: left;
}

.container__bar__txt, .container__bar__txt-keyframe {
    width: 260px;
    margin: auto;
    display: block;
    opacity: 0%;
    transform: scale(0);
    transition: opacity 500ms 4500ms, transform;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: medium;
}

.exo-load-bar__btn:active + .container__bar > .container__bar__progress > .container__bar__txt {
    opacity: 100%;
    transform: scale(1);

}

.exo-load-bar, .exo-load-bar-keyframe {
    margin: 0px 10px;
}


.container__bar__progress-keyframe {
    width: 815px;
    height: 20px;
    background-color: rgb(3, 201, 151);
    margin: auto;
    transform: scaleX(0);
    /* animation: progress-bar 5s;
    transform-origin: left; */
}

.exo-load-bar__btn-keyframe:active + .container__bar > .container__bar__progress-keyframe {
    animation: progress-bar 5s;
    transform-origin: left;
}

@keyframes progress-bar {
    0% {
        transform: scaleX(0);
    }
    17% {
        transform: scaleX(.20);
    }
    24% {
        transform: scaleX(.5);
    }
    46% {
        transform: scaleX(.8);
    }
    100% {
        transform: scaleX(1);
    }
}