.bg-pieces {
    height: calc(var(--vh, 1vh) * 100);
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
    opacity: 0.2;
}

.bg-pieces img{
    -webkit-filter: brightness(0) invert(1); 
    filter: brightness(0) invert(1);
    width: 30vw;
}

.bg-pieces .right-piece{
    animation: move 15s linear infinite;
    position: absolute;
    right: 0;
    top: 10%;
}

.bg-pieces .center-piece {
    animation: move 15s linear infinite;
    bottom: -30%;
    left: 15%;
    position: absolute;
}

.bg-pieces .left-piece {
    animation: move2 15s linear infinite;
    left: -10%;
    position: absolute;
    top: -50%;
}

@keyframes move {
    0%, 100% {
        right: -30%;
        top: 10%;
        transform: rotate(0deg);
    }

    25% {
        right: 30%;
        top: -70%;
        transform: rotate(90deg);
    }

    50% {
        right: 90%;
        top: 20%;
        transform: rotate(240deg);
    }

    75% {
        right: 30%;
        top: 80%;
        transform: rotate(60deg);
    }
}

@keyframes move2 {
    0%, 100% {
        left: -30%;
        top: 10%;
        transform: rotate(0deg);
    }

    25% {
        left: 30%;
        top: -70%;
        transform: rotate(90deg);
    }

    50% {
        left: 90%;
        top: 20%;
        transform: rotate(240deg);
    }

    75% {
        left: 30%;
        top: 80%;
        transform: rotate(60deg);
    }
}