body {
  display: grid;
  place-items: center;
}

/* --- Small Circle Pulser --- */
.pulser{
    background-color: lightblue;
    height: 50px;
    width: 50px;
    border-radius: 30px;
    position: relative;
}


.pulser::after {
  animation: pulse 1000ms cubic-bezier(0.9, 0.7, 0.5, 0.9) infinite;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 20%;
  background-color: pink;
  border-radius: 30px;
}

@keyframes pulse{
    from{
        background-color: green;
    }
    50%{
        transform: scale(1.4);
        background-color: rgb(30, 113, 187);
    }
    70%{
        background-color: blueviolet;
        transform: scale(1.6);
    }
    90%{
        background-color: aqua;
        z-index: 3;
        transform: scale(0.8);
    }
    to{
        background-color: blue;
    }
}

/* --- Rectangle Grower element--- */
.grower{
    background-color: blue;
    width: 200px;
    height: 50px;
    animation: grow 2000ms infinite;
    animation-timing-function: steps(4, start);
    animation-direction: reverse;
    position: relative;
    margin: 10px 0;
    padding: 10px 20px;
}

.grower::after{
    content: 'Dancing Lotus';
    position: absolute;
    left: 50px;
    top: 20px;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: white;
    font-size: x-large;
}
@keyframes grow{
    from{
        /* width: 200px; */
        transform: scaleX(1.0);
    }
    50%{
        /* width: 50px; */
        transform: scaleX(1.7);
    }
    to{
        transform: scaleX(1.0);
    }
}

/* ---Lotus container, and the lotus within--- */
.circle-container{
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background-color: purple;
    animation: containerGrow 2.3s ease-in-out infinite;
}

@keyframes containerGrow{
    0%{
        transform: scale(1);
        
    }
    50%{
        transform: scale(1.025);
    }
    100%{
        transform: scale(1);
    }
}

.glow{
    fill: url(#gradient1);
    animation: glow 2.3s ease-in-out infinite;
}

@keyframes glow{
    0%{
        transform: scale(1);
        fill: url(#radialGradient1);
    }
    20%{
        fill: url(#radialGradient1);
    }
    50%{
        transform: scale(1.010);
        fill:url(#radialGradient1)
    }
    100%{
        transform: scale(1);
        fill: url(#radialGradient1);
    }
}