@keyframes moveSquare{
    0%{
        height: var(--height);
        width: var(--height);
    }

    100%{
        height: var(--square-animation-size);
        width: var(--square-animation-size);
    }
}

@keyframes square{
    0%{
        border-radius: 0%;
        background-color: var(--color-dark-green);
        rotate: 0deg;
    }

    33%{
        background-color: var(--color-dark-purple);
    }

    50%{
        border-radius: 50% 10%;
    }

    66%{
        background-color: var(--color-dark-purple);
    }

    100%{
        border-radius: 0%;
        background-color: var(--color-dark-green);
        rotate: 720deg;
    }
}

@keyframes moveSquare-side-left{
    0%{
        translate: -100%;
    }

    100%{
        translate: -200%;
    }
}

@keyframes moveSquare-side-right{
    0%{
        translate: 100%;
    }

    100%{
        translate: 200%;
    }
}

@keyframes text-change {
    0%{
        color: var(--color-bone-White);
        text-shadow: none;
    }

    100%{
        color: var(--color-dark-green);
        text-shadow: var(--shadow);
    }
}