.plant {
    position: relative;
    font-family: sans-serif;
    text-transform: uppercase;
    font-size: 2em;
    letter-spacing: 4px;
    overflow: hidden;
    background: linear-gradient(90deg, #000, #fff, #000);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 3s linear infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(255, 255, 255, 0);
}

@keyframes animate {
    0% {
        background-position: -500%;
    }
    100% {
        background-position: 500%;
    }
}

.pill {
    width: 200px;
    height: 100px;
    background: dodgerblue;
    border-radius: 40px 999em 999em 40px;
}


/**FONT CIRCLERS**/

.circle-top-left-mid
{
    width: 50px;
    height: 50px;
    background-color: rgba(194, 19, 19, 0.62);
    position: absolute;
    margin-top: 1rem;
    filter: blur(0.25rem);
    border-radius: 50%;
    animation-name: moveUpDown;
    animation-duration: 15s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.circle-top-left-sm-mid
{
    width: 40px;
    height: 40px;
    background-color: rgba(23, 101, 178, 0.42);
    position: absolute;
    margin-left: 3rem;
    margin-top: 1rem;
    filter: blur(0.2rem);
    border-radius: 50%;
    animation-name: moveRightLeft;
    animation-duration: 15s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;


}


/**MID CIRCLES**/
.circle-top-mid-mid
{
    width: 50px;
    height: 50px;
    background-color: rgb(255, 196, 0);
    position: absolute;
    margin-bottom: 10%;
    margin-left: 10rem;
    filter: blur(0.3rem);
    border-radius: 50%;
    animation-name: moveUpDown;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.circle-top-mid-sm-right
{
    width: 40px;
    height: 40px;
    background-color: rgba(23, 101, 178, 0.62);
    position: absolute;
    margin-left: 12rem;
    margin-top: 1rem;
    filter: blur(0.3rem);
    border-radius: 50%;
    animation-name: moveRightLeft;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;

}
/**RIGHT CIRCLES**/

.circle-top-right-mid
{
    width: 60px;
    height: 60px;
    background-color: rgba(37, 101, 37, 0.68);
    position: absolute;
    margin-bottom: 10%;
    margin-left: 30rem;
    filter: blur(0.3rem);
    border-radius: 50%;
    animation-name: moveUpDown;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.circle-top-right-right
{
    width: 40px;
    height: 40px;
    background-color: rgba(100, 66, 225, 0.62);
    position: absolute;
    margin-left: 29rem;
    margin-top: 1rem;
    filter: blur(0.5rem);
    border-radius: 50%;
    animation-name: moveRightLeft;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;

}

/** SET 1**/

.circle-G-One-UP
{
    width: 40px;
    height: 40px;
    background-color: rgba(123, 41, 189, 0.52);
    position: absolute;
    margin-left: 24rem;
    margin-bottom: 10%;
    margin-top: -1rem;
    filter: blur(0.0rem);
    border-radius: 50%;
    animation-name: moveRightLeft;
    animation-duration: 15s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.circle-G-One-DOWN
{
    width: 50px;
    height: 50px;
    background-color: rgba(28, 148, 192, 0.47);
    position: absolute;
    margin-bottom: 10%;
    margin-left: 21.5rem;
    margin-top: -1rem;
    filter: blur(0.0rem);
    border-radius: 50%;
    animation-name: moveUpDown;
    animation-duration: 15s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

/** SET 1 END **/



/** SET 2 END **/
.circle-G-TOW-UP
{
    width: 40px;
    height: 40px;
    background-color: rgb(255, 196, 0);
    position: absolute;
    margin-left: 25rem;
    margin-bottom: 10%;
    margin-top: -4rem;
    filter: blur(0.0rem);
    border-radius: 50%;
    animation-name: moveRightLeft;
    animation-duration: 20s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.circle-G-TOW-DOWN
{
    width: 50px;
    height: 50px;
    background-color: rgba(23, 101, 178, 0.62);
    position: absolute;
    margin-bottom: 10%;
    margin-left: 26rem;
    margin-top: -3rem;
    filter: blur(0.0rem);
    border-radius: 50%;
    animation-name: moveUpDown;
    animation-duration: 20s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

/** SET 2 END **/


/** SET 3  **/
.circle-G-THREE-UP
{
    width: 40px;
    height: 40px;
    background-color: rgba(255, 188, 0, 0.6);
    position: absolute;
    margin-left: 25rem;
    margin-bottom: 10%;
    margin-top: -4.5rem;
    filter: blur(0.0rem);
    border-radius: 50%;
    animation-name: moveRightLeft;
    animation-duration: 20s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.circle-G-THREE-DOWN
{
    width: 50px;
    height: 50px;
    background-color: rgba(255, 0, 88, 0.55);
    position: absolute;
    margin-bottom: 10%;
    margin-left: 26rem;
    margin-top: -6rem;
    filter: blur(0.0rem);
    border-radius: 50%;
    animation-name: moveUpDown;
    animation-duration: 20s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
/** SET 3 END **/


/**BRANCHEN BEREICH**/

.circle-branche-bereich-1
{
    width: 150px;
    height: 150px;
    background-color: rgba(19, 22, 69, 0.51);
    position: absolute;
    margin-left: 15rem;
    margin-bottom: 10%;
    margin-top: -7rem;
    filter: blur(0.0rem);
    border-radius: 50%;
    animation-name: moveRightLeft;
    animation-duration: 20s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.circle-branche-bereicht-2
{
    width: 100px;
    height: 100px;
    background-color: rgba(229, 194, 133, 0.79);
    position: absolute;
    margin-bottom: 10%;
    margin-left: 60rem;
    margin-top: -9rem;
    filter: blur(0.0rem);
    border-radius: 50%;
    animation-name: moveUpDown;
    animation-duration: 20s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
/**BRANCHEN BEREICH END**/



@keyframes moveUpDown {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }}

@keyframes moveRightLeft {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateX(-10px);
    }}