/* little girl sitting on the commissions button */

.character-button {
    position: relative;
    width: 100%;
}


.button-girl {
    position: absolute;

    width: 90px;
    height: auto;

    right: 10px;
    bottom: 58px;

    z-index: 5;

    cursor: pointer;

    transform-origin: bottom center;

    user-select: none;
    -webkit-user-drag: none;

    filter:
        drop-shadow(0 3px 4px rgba(80, 50, 100, .15));

    transition:
        transform .15s ease;
}


/* the cute little jostle */

.button-girl.jostle {
    animation: girlJostle .45s ease;
}


@keyframes girlJostle {

    0% {
        transform:
            rotate(0deg)
            translateY(0);
    }

    18% {
        transform:
            rotate(-7deg)
            translateY(-3px);
    }

    35% {
        transform:
            rotate(6deg)
            translateY(1px);
    }

    52% {
        transform:
            rotate(-5deg)
            translateY(-2px);
    }

    70% {
        transform:
            rotate(3deg)
            translateY(0);
    }

    86% {
        transform:
            rotate(-1deg)
            translateY(0);
    }

    100% {
        transform:
            rotate(0deg)
            translateY(0);
    }

}


/* mobile */

@media (max-width: 480px) {

    .button-girl {

        width: 65px;

        right: 8px;

        bottom: 55px;
    }

}