@keyframes rotate{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

@keyframes rotate-anti{
    0%{
        transform: rotate(360deg);
    }
    100%{
        transform: rotate(0deg);
    }
}

@keyframes bubbles{
    0%{
        transform: translateY(100vh) scale(0);
    }
    100%{
        transform: translateY(-10vh) scale(1);
    }
}

@keyframes bounce{
    0%, 100%{
        margin-top: -100px;
    }
    60%{
        margin-top: -200px;
    }
}

@keyframes bounce-shadow{
    0%, 100%{
        filter: blur(0px);
    }
    60%{
        filter: blur(15px);
    }
}

@keyframes grid-gap-change{
    0%, 100%{
        gap: 0px;
        translate: calc(-50px * var(--x));
    }
    50%{
        gap: 30px;
        translate: calc(-80px * var(--x));
    }
}

@keyframes grid-backside-gap{
    0%, 100%{
        translate: -40px -40px;
    }
    50%{
        translate: -70px -70px;
    }
}

@keyframes grid-front-gap{
    0%, 100%{
        translate: 40px 40px;
    }
    50%{
        translate: 70px 70px;
    }
}