#fountain {
    width: 220px;
    height: 220px;
    position: relative;
}


.basin {
    position: absolute;
    bottom: 20px;
    left: 30px;

    width: 160px;
    height: 50px;

    border: 3px solid white;
    border-radius: 50%;
}


.pool {
    width: 100%;
    height: 100%;

    background: rgba(0,150,255,.3);
    border-radius: 50%;
}


.nozzle {
    position: absolute;

    bottom: 70px;
    left: 105px;

    width: 12px;
    height: 12px;

    background: white;
    border-radius: 50%;
}


.jet {
    position: absolute;

    bottom: 75px;

    width: 8px;
    height: 80px;

    background: cyan;
    border-radius: 20px;

    transform-origin: bottom;

    animation: fountainFlow 1.2s infinite ease-in-out;
}


.jet-center {
    left: 106px;
    height: 120px;
}


.jet-left {
    left: 70px;
    transform: rotate(-25deg);
}


.jet-right {
    left: 140px;
    transform: rotate(25deg);
}

/* PRESSURE STATES */

.high-pressure .jet {
    animation-duration: 0.6s;
}


.high-pressure .jet-center {
    height: 150px;
}


.high-pressure .jet-left,
.high-pressure .jet-right {
    height: 110px;
}



.low-pressure .jet {
    animation-duration: 1.8s;
}


.low-pressure .jet-center {
    height: 50px;
}


.low-pressure .jet-left,
.low-pressure .jet-right {
    height: 40px;
}


@keyframes fountainFlow {

    0% {
        height: 30px;
        opacity: .5;
    }

    50% {
        height: 100px;
        opacity: 1;
    }

    100% {
        height: 30px;
        opacity: .5;
    }

}