/**
 * Chameleon Background Animation
 * Recreates the CodePen reference on a container div instead of the body.
 */
.chameleon-animation {
    animation: chameleon-animation-theme 21s linear infinite;
}

.chameleon-animation::after,
.chameleon-animation::before {
    content: '';
    display: block;
    position: absolute;
    z-index: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    width: 100vmax;
    height: 100vmax;
    background: rgba(60, 120, 60, 0.03);
    animation: chameleon-animation-background 90s linear infinite;
    pointer-events: none;
}

.chameleon-animation::after {
    left: 15vw;
}

.chameleon-animation::before {
    right: 15vw;
    animation-delay: -30s;
    animation-direction: reverse;
}

@keyframes chameleon-animation-theme {
    0% {
        background: #f5fff4;
    }

    16% {
        background: #e4f8df;
    }

    33% {
        background: #d3f1cd;
    }

    50% {
        background: #bfe8b8;
    }

    66% {
        background: #a9dea8;
    }

    83% {
        background: #c8efc4;
    }

    100% {
        background: #f5fff4;
    }
}

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

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