/* Simule une longue page */
.spacer {
    height: 10vh;
    background: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
}
img {
    display: block;
    -webkit-user-drag: none; /* Prevents dragging in Webkit/Blink browsers */
    user-select: none; /* Prevents text/image selection */
    -moz-user-select: none; /* Firefox specific selection prevention */
    -webkit-user-select: none;
    -ms-user-select: none;
}
.horizontal-display {
    display: flex;
}

.image-container {
    overflow: hidden;
}

.paul {
    width: 125px;
    margin: 20px auto;
    /*height: 200px;*/
    position: relative;
    /*background-color: red;*/
    animation-name: myAnimation;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}

.theo {
    width: 125px;
    margin: 20px auto;
    /*height: 200px;*/
    position: relative;
    /*background-color: red;*/
    animation-name: myAnimation2;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}

.clickable-zone {
    border: 1px solid #e00b0b;
    background-color: #f0f0f0;
    min-height: 400px;
    position: relative;
    overflow: hidden;
}

.ball {
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 10px;
    background-color: #000;
    transition: left 0.5s linear;
}

.target-container {
    width: 100px;
    margin: 30px 20px 30px auto;
}

.target-container:last-child {
    /*margin-bottom: 10px;*/
}

.hp-container {
    justify-content: center;
    min-height: 15px;
}

.target {
    height: 50px;
    margin: 0 auto 10px;
    /*margin: 50px 20px 10px auto;*/
}

.hp {
    width: 15px;
    height: 15px;
}

@keyframes myAnimation {
    0% {
        transform: rotate(-10deg);
        /*transform: translateX(-100%);*/
        /*background-color: red;*/
        /*left: -500px;*/
        left: -80vw;
        top: 0px;
    }
    25% {
        transform: rotate(10deg);
        /*background-color: yellow;*/
        left: -40vw;
        top: 0px;
    }
    50% {
        transform: rotate(-10deg);
        /*background-color: blue;*/
        left: 0vw;
        top: 0px;
    }
    75% {
        transform: rotate(10deg);
        /*background-color: green;*/
        left: 40vw;
        top: 0px;
    }
    100% {
        transform: rotate(-10deg);
        /*background-color: red;*/
        left: 100vw;
        top: 0px;
    }
}

@keyframes myAnimation2 {
    0% {
        transform: rotate(-10deg);
        transform: translateX(-100%);
        /*background-color: red;*/
        /*left: -500px;*/
        left: -80vw;
        top: 0px;
    }
    25% {
        transform: rotate(10deg);
        /*background-color: yellow;*/
        left: -40vw;
        top: 0px;
    }
    50% {
        transform: rotate(-10deg);
        /*background-color: blue;*/
        left: 0vw;
        top: 0px;
    }
    75% {
        transform: rotate(10deg);
        /*background-color: green;*/
        left: 40vw;
        top: 0px;
    }
    100% {
        transform: rotate(-10deg);
        /*background-color: red;*/
        left: 80vw;
        top: 0px;
    }
}