/* =========================
    MULTICOLORED PETALS
========================= */

.petal {
    position: absolute;
    top: -40px;

    width: 12px;
    height: 18px;

    border-radius: 100% 0 100% 0;

    opacity: 0.8;

    /* Rainbow color shifting */
    background: hsl(var(--hue), 75%, 82%);

    animation:
        petal-fall linear infinite,
        petal-sway ease-in-out infinite alternate,
        rainbow-shift 8s linear infinite;
}

@keyframes petal-fall {
    0% {
        transform: translateY(-40px) rotate(0deg);
    }

    100% {
        transform: translateY(110vh) rotate(720deg);
    }
}

@keyframes petal-sway {
    0% {
        margin-left: -35px;
    }

    100% {
        margin-left: 35px;
    }
}

@keyframes rainbow-shift {
    0% {
        background: hsl(350, 75%, 82%);
    }

    16% {
        background: hsl(25, 80%, 80%);
    }

    33% {
        background: hsl(55, 75%, 80%);
    }

    50% {
        background: hsl(125, 55%, 80%);
    }

    66% {
        background: hsl(195, 70%, 82%);
    }

    83% {
        background: hsl(270, 65%, 83%);
    }

    100% {
        background: hsl(350, 75%, 82%);
    }
}


/* =========================
    MULTICOLORED FLOWERS
========================= */

.flower {
    position: absolute;
    top: -50px;

    opacity: 0.8;

    animation:
        flower-fall linear infinite,
        flower-sway ease-in-out infinite alternate,
        flower-rainbow 10s linear infinite;
}

@keyframes flower-fall {
    0% {
        transform: translateY(-50px) rotate(0deg);
    }

    100% {
        transform: translateY(110vh) rotate(540deg);
    }
}

@keyframes flower-sway {
    0% {
        margin-left: -30px;
    }

    100% {
        margin-left: 30px;
    }
}

@keyframes flower-rainbow {
    0% {
        color: #f4a6b7;
    }

    16% {
        color: #f6bd8b;
    }

    33% {
        color: #eadb8b;
    }

    50% {
        color: #a9d8b4;
    }

    66% {
        color: #9bcfe5;
    }

    83% {
        color: #c5a6df;
    }

    100% {
        color: #f4a6b7;
    }
}