@keyframes flower-rotate {

    0% {
        transform: rotateZ(360deg);
    }


    100% {
        transform: rotateZ(0deg);
    }
}

#flower {
    height: 100vh;
    background-image: url('/welcome/assets/flowertile1.png');
    background-image: url('/welcome/assets/flowertile1withfill.png');
    background-size: 125px;

    .flower-rotate {
        animation: flower-rotate 10s linear 0s infinite forwards;
        position: absolute;
        width: var(--w);
    }


    #main-image {
        --w: 40%;


        left: calc(50% - var(--w)/2);
        /* top: calc(50% - var(--w)/2); */

        z-index: 7;
    }

    #smile-hybiscus {
        --w: 30%;

        left: calc(25% - var(--w)/2);
        top: 200px;

        z-index: 1;
    }

    #drugs-hybiscus {
        --w: 30%;

        right: calc(25% - var(--w)/2);
        top: 200px;
        z-index: 2;

        animation-direction: reverse;
        animation-duration: 7s;
    }




}