/* ANIMATIONS */
/*for background*/
@keyframes gradient {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
/*for interative elements */
@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.03);
    }

    100% {
        transform: scale(1);
    }
}


@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/*These are the 2 decorative elements going in opposite directions*/
@keyframes float1 {

    0%,
    100% {
        /*start and end are the same*/
        transform: translate(0, 0) rotate(0deg);
    }

    50% {
        /*midpoint*/
        transform: translate(30px, 30px) rotate(90deg);
    }
}

@keyframes float2 {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    50% {
        transform: translate(-30px, -20px) rotate(-90deg);
    }
}