:root {
    --duration_animation5: 4s;
    --boundFill1: hsl(154,100%,50%);
    --boundFill2: hsl(177,100%,50%);
    --boundFill3: hsl(199,100%,50%);
    --boundFill4: hsl(221,100%,50%);
}
/* ----------------------------------------------- */

#svg_animation5 > #stick1 {
    width: 10%;
    height: 30%;
    animation-name: rotateStick1;
    animation-duration: var(--duration_animation5);
    animation-delay: calc((var(--duration_animation5)/4)*0);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: normal;
    transform-origin: 30% 60%;

}

@keyframes rotateStick1 {
    0% {
        animation-timing-function: ease-in;
        x: 30%;
        y: 30%;
        transform: rotate(0deg);
        fill: var(--boundFill4);
    }
    25% {
        animation-timing-function: step-start;
        transform: rotate(90deg);
        x: 30%;
        y: 30%;
        fill: var(--boundFill4);
    }
    100% {
        transform: rotate(90deg);
        x: 30%;
        y: 30%;
        fill: none;
    }
}

#svg_animation5 > #stick2 {
    width: 30%;
    height: 10%;
    animation-name: rotateStick2;
    animation-duration: var(--duration_animation5);
    animation-delay: calc((var(--duration_animation5)/4)*-3);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: normal;
    transform-origin: 60% 70%;
}

@keyframes rotateStick2 {
    0% {
        animation-timing-function: ease-in;
        x: 30%;
        y: 60%;
        transform: rotate(0deg);
        fill: var(--boundFill1);
    }
    25% {
        animation-timing-function: step-start;
        transform: rotate(90deg);
        x: 30%;
        y: 60%;
        fill: var(--boundFill1);
    }
    100% {
        transform: rotate(90deg);
        x: 30%;
        y: 60%;
        fill: none;
    }
}


#svg_animation5 > #stick3 {
    width: 10%;
    height: 30%;
    animation-name: rotateStick3;
    animation-duration: var(--duration_animation5);
    animation-delay: calc((var(--duration_animation5)/4)*-2);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: normal;
    transform-origin: 70% 40%;

}

@keyframes rotateStick3 {
    0% {
        animation-timing-function: ease-in;
        x: 60%;
        y: 40%;
        transform: rotate(0deg);
        fill: var(--boundFill2);
        /* fill: blue; */
    }
    25% {
        animation-timing-function: step-start;
        transform: rotate(90deg);
        x: 60%;
        y: 40%;
        fill: var(--boundFill2);
        /* fill:blue; */
    }
    100% {
        transform: rotate(90deg);
        x: 60%;
        y: 40%;
        /* fill:blue; */
        fill: none;
    }
}

#svg_animation5 > #stick4 {
    width: 30%;
    height: 10%;
    animation-name: rotateStick4;
    animation-duration: var(--duration_animation5);
    animation-delay: calc((var(--duration_animation5)/4)*-1);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: normal;
    transform-origin: 40% 30%;

}

@keyframes rotateStick4 {
    0% {
        animation-timing-function: ease-in;
        x: 40%;
        y: 30%;
        transform: rotate(0deg);
        fill: var(--boundFill3);
        /* fill: blue; */
    }
    25% {
        animation-timing-function: step-start;
        transform: rotate(90deg);
        x: 40%;
        y: 30%;
        fill: var(--boundFill3);
        /* fill:blue; */
    }
    100% {
        transform: rotate(90deg);
        x: 40%;
        y: 30%;
        fill: none;
        /* fill:blue; */
    }
}

/* ----------------------------------------------- */

#svg_animation5 > #boundingRect1 {
    width: 100%;
    height: 100%;
    x: 0%;
    y: 0%;
    animation-name: switchBoundCOlor;
    animation-duration: var(--duration_animation5);
    animation-delay: calc((var(--duration_animation5)/4)*0);
    animation-iteration-count: infinite;
    animation-timing-function: step-end;
    animation-direction: normal;
}

#svg_animation5 > #boundingRect2 {
    width: 80%;
    height: 80%;
    x: 10%;
    y: 10%;
    animation-name: switchBoundCOlor;
    animation-duration: var(--duration_animation5);
    animation-delay: calc((var(--duration_animation5)/4)*-3);
    animation-iteration-count: infinite;
    animation-timing-function: step-end;
    animation-direction: normal;
}

#svg_animation5 > #boundingRect3 {
    width: 60%;
    height: 60%;
    x: 20%;
    y: 20%;
    animation-name: switchBoundCOlor;
    animation-duration: var(--duration_animation5);
    animation-delay: calc((var(--duration_animation5)/4)*-2);
    animation-iteration-count: infinite;
    animation-timing-function: step-end;
    animation-direction: normal;
}

#svg_animation5 > #boundingRect4 {
    width: 40%;
    height: 40%;
    x: 30%;
    y: 30%;
    animation-name: switchBoundCOlor;
    animation-duration: var(--duration_animation5);
    animation-delay: calc((var(--duration_animation5)/4)*-1);
    animation-iteration-count: infinite;
    animation-timing-function: step-end;
    animation-direction: normal;
}

@keyframes switchBoundCOlor {
    0% { fill: var(--boundFill1)}
    25% { fill: var(--boundFill2)}
    50% { fill: var(--boundFill3)}
    75% { fill: var(--boundFill4)}
    100% { fill: var(--boundFill1)}
}