:root {
    --borderWidth_animation9: 2%;
    --duration_animation9: 2s;
}
/* ----------------------------------------------- */

#svg_animation9 > polygon {
    stroke: black;
    stroke-width: var(--borderWidth_animation9);
}

#svg_animation9 > #outerBorder {
    stroke-width: calc(var(--borderWidth_animation9)*2);
}

#svg_animation9 > #square1 {
    fill: hsl(240, 100%, 50%);
    animation-name: changeBrightness1;
    animation-duration: var(--duration_animation9);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate;
}

@keyframes changeBrightness1 {
    0% {fill: hsl(240, 100%, 25%);}
    100% {fill: hsl(240, 100%, 75%);}
}

#svg_animation9 > #square2 {
    fill: hsl(44, 100%, 100%);
}

#svg_animation9 > #square3 {
    fill: hsl(44, 100%, 50%);
    animation-name: changeBrightness3;
    animation-duration: var(--duration_animation9);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate-reverse;
}

@keyframes changeBrightness3 {
    0% {fill: hsl(44, 100%, 25%);}
    100% {fill: hsl(44, 100%, 75%);}
}

#svg_animation9 > #square4 {
    fill: hsl(0, 100%, 50%);
    animation-name: changeBrightness4;
    animation-duration: var(--duration_animation9);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate-reverse;
}

@keyframes changeBrightness4 {
    0% {fill: hsl(0, 100%, 25%);}
    100% {fill: hsl(0, 100%, 75%);}
}

#svg_animation9 > #square5 {
    fill: hsl(184, 100%, 50%);
    animation-name: changeBrightness5;
    animation-duration: var(--duration_animation9);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate;
}

@keyframes changeBrightness5 {
    0% {fill: hsl(184, 100%, 25%);}
    100% {fill: hsl(184, 100%, 75%);}
}

#svg_animation9 > #square6 {
    fill: hsl(113, 100%, 50%);
    animation-name: changeBrightness6;
    animation-duration: var(--duration_animation9);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate-reverse;
}

@keyframes changeBrightness6 {
    0% {fill: hsl(113, 100%, 25%);}
    100% {fill: hsl(113, 100%, 75%);}
}

#svg_animation9 > #square7 {
    fill: hsl(64, 100%, 100%);
}

#svg_animation9 > #square8 {
    fill: hsl(273, 100%, 100%);
}

#svg_animation9 > #square9 {
    fill: hsl(61, 100%, 50%);
    animation-name: changeBrightness9;
    animation-duration: var(--duration_animation9);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate;
}

@keyframes changeBrightness9 {
    0% {fill: hsl(61, 100%, 25%);}
    100% {fill: hsl(61, 100%, 75%);}
}

#svg_animation9 > #square10 {
    fill: hsl(298, 100%, 50%);
    animation-name: changeBrightness10;
    animation-duration: var(--duration_animation9);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate-reverse;
}

@keyframes changeBrightness10 {
    0% {fill: hsl(298, 100%, 25%);}
    100% {fill: hsl(298, 100%, 75%);}
}