.pong-container {
    left: 100px;
    position: relative;
}

.paddle-one, .paddle-two {
    height: 40px;
    width: 3px;
    background-color: #106cc8;
    position: relative;
}

.paddle-one {
    left: -180px;
    animation: movePaddleOne 4s infinite;
}

.paddle-two {
    left: 20px;
    animation: movePaddleTwo 4s infinite;
}

.ball {
    position: relative;
    height: 5px;
    width: 5px;
    border-radius: 50%;
    background-color: #ff5252;
    animation: moveBall 4s infinite linear;
}

@keyframes movePaddleOne {
    0%, 100% {
        transform: translate(0px, 100px);
    }
    25% {
        transform: translate(0px, 0px);
    }
    50% {
        transform: translate(0px, 0px);
    }
    75% {
        transform: translate(0px, 100px);
    }
}
@keyframes movePaddleTwo {
    0%, 100% {
        transform: translate(0px, -50px);
    }
    25% {
        transform: translate(0px, 10px);
    }
    50% {
        transform: translate(0px, 0px);
    }
    75% {
        transform: translate(0px, 50px);
    }
}
@keyframes moveBall {
    0%, 100% {
        transform: translate(-180px, 30px);
    }
    25% {
        transform: translate(18px, -25px);
    }
    50% {
        transform: translate(-180px, -55px);
    }
    75% {
        transform: translate(18px, 15px);
    }
}