:root {
    --gradient: linear-gradient(
        90deg,
        rgba(92, 242, 55, 0.863) 0%,
        rgba(251, 255, 27, 0.829) 100%
    );
}

.min-h-full {
    min-height: 100vh;
    background-color: #eaeaea;
    background-image: var(--gradient);
    background-size: 200%;
    animation: gradient-animation 9s infinite alternate;
}

@keyframes gradient-animation {
    0% {
        background-position: left;
    }

    100% {
        background-position: right;
    }
}

.wave {
    animation-name: wave-animation;
    /* Refers to the name of your @keyframes element below */
    animation-duration: 2.5s;
    /* Change to speed up or slow down */
    animation-iteration-count: infinite;
    /* Never stop waving :) */
    transform-origin: 70% 70%;
    /* Pivot around the bottom-left palm */
    display: inline-block;
}

@keyframes wave-animation {
    0% {
        transform: rotate(0deg);
    }

    10% {
        transform: rotate(14deg);
    }

    /* The following five values can be played with to make the waving more or less extreme */
    20% {
        transform: rotate(-8deg);
    }

    30% {
        transform: rotate(14deg);
    }

    40% {
        transform: rotate(-4deg);
    }

    50% {
        transform: rotate(10deg);
    }

    60% {
        transform: rotate(0deg);
    }

    /* Reset for the last half to pause */
    100% {
        transform: rotate(0deg);
    }
}

.blinkAnnouncement {
    animation: blink 4s infinite;
}
.blinkMonitoring {
    animation: blink 2s infinite;
}
.blinkSendVerification {
    animation: blink 5s infinite;
}
@keyframes blink {
    0%,
    50%,
    100% {
        opacity: 1;
    }
    25%,
    75% {
        opacity: 0;
    }
}