/* simple ROUND style jelly button START */

button.jelly {
    border-radius: 50rem;
}


/* simple ROUND style jelly button END */


/* candy style jelly button START */


/* button.jelly {
    cursor: pointer;
    position: relative;
    padding: .5rem 1rem;
    border-radius: 3.75rem;
    line-height: 2.5rem;
    font-size: 2rem;
    font-weight: 600;
    border: none;
    background-image: linear-gradient(-180deg, #FF89D6 0%, #C01F9E 100%);
    transition: all .2s;
    box-shadow: 0 .1rem .15rem 0 rgba(22, 75, 195, 0.50),
        0 -0.25rem 1.5rem rgba(110, 15, 155, .1) inset,
        0 0.75rem 0.5rem rgba(255, 255, 255, 0.4) inset,
        0 0.25rem 0.5rem 0 rgba(180, 70, 207, 1) inset;
}

button.jelly:hover {
    transform: scale(1);
}

button.jelly:active {
    transform: scale(0.8);
    transition: all 0s;
}

button.jelly span {
    color: rgba(255, 255, 255, .75);
    background-image: linear-gradient(0deg, #EE82DA 0%, #FEFAFD 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 2px 2px hsla(290, 100%, 20%, 1));
}

button.jelly::before {
    content: "";
    display: block;
    height: 0.25rem;
    position: absolute;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 7.5rem);
    background: #fff;
    border-radius: 100%;
    opacity: 0.7;
    background-image: linear-gradient(-270deg, rgba(255, 255, 255, 0.00) 0%, #FFFFFF 20%, #FFFFFF 80%, rgba(255, 255, 255, 0.00) 100%);
}

button.jelly::after {
    content: "";
    display: block;
    height: 0.25rem;
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 7.5rem);
    background: #fff;
    border-radius: 100%;

    filter: blur(1px);
    opacity: 0.05;
    background-image: linear-gradient(-270deg, rgba(255, 255, 255, 0.00) 0%, #FFFFFF 20%, #FFFFFF 80%, rgba(255, 255, 255, 0.00) 100%);
}

button.jelly i { 
    opacity: .3;
} */


/* candy style jelly button END */