/* ==============================
   FLAPPY BIRD STYLE PIPES
   ============================== */

#pipes-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    z-index: 3;
}

/* ==============================
   PIPE BASE STYLE
   ============================== */

.pipe {
    position: absolute;
    width: 52px;
    box-sizing: border-box;
    background: linear-gradient(to right,
        #73c92d 0%,
        #73c92d 10%,
        #8fd84a 20%,
        #6ebe2a 50%,
        #569d20 90%,
        #569d20 100%
    );
    border: 3px solid #3a5c1f;
    border-radius: 0;
    overflow: visible;
}

/* ==============================
   PIPE CAP - centered
   ============================== */

.pipe::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 66px;
    height: 26px;
    background: linear-gradient(to right,
        #73c92d 0%,
        #73c92d 10%,
        #8fd84a 20%,
        #6ebe2a 50%,
        #569d20 90%,
        #569d20 100%
    );
    border: 3px solid #3a5c1f;
    border-radius: 3px;
    box-sizing: border-box;
}

/* ==============================
   TOP PIPE
   ============================== */

.pipe.pipe-top {
    top: 0;
    border-top: none;
    border-radius: 0;
}

.pipe.pipe-top::before {
    bottom: -3px;
    top: auto;
}

/* ==============================
   BOTTOM PIPE
   ============================== */

.pipe.pipe-bottom {
    border-bottom: none;
    border-radius: 0;
}

.pipe.pipe-bottom::before {
    top: -3px;
    bottom: auto;
}