.btn{
    position: relative;
    display: inline-block;
    outline: none;
    border: none;
    cursor: pointer;
    padding: 14px 45px;
    background: var(--color--pink);
    color: var(--color--white);
    border-radius: 16px;
    font-family: var(--font--mulish-bold);
    font-size: var(--font--medium-min);
    -webkit-transition: var(--transition--main);
    -o-transition: var(--transition--main);
    transition: var(--transition--main);

    -webkit-animation-fill-mode: backwards;

    animation-fill-mode: backwards;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.302639);
    box-shadow: 0px 20px 56px rgba(255, 0, 144, 0.198645);
}

.btn:hover {
    /*-webkit-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    transform: translateY(-3px);*/
    -webkit-box-shadow: 0px 28px 64px rgba(255, 0, 144, 0.300945);
    box-shadow: 0px 28px 64px rgba(255, 0, 144, 0.300945);

}

.btn:active {
    /*-webkit-transform: translateY(-1px);
    -ms-transform: translateY(-1px);
    transform: translateY(-1px);*/
    -webkit-box-shadow: 0px 20px 56px rgba(255, 0, 144, 0.198645), inset 0px 4px 8px rgba(0, 0, 0, 0.19646);
    box-shadow: 0px 20px 56px rgba(255, 0, 144, 0.198645), inset 0px 4px 8px rgba(0, 0, 0, 0.19646);
}

/*.btn::after {
    content: "";
    display: inline-block;
    height: 100%;
    width: 100%;
    border-radius: 16px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background: var(--color--pink);
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

.btn:hover::after {
    -webkit-transform: scaleX(1.4) scaleY(1.6);
    -ms-transform: scaleX(1.4) scaleY(1.6);
    transform: scaleX(1.4) scaleY(1.6);
    opacity: 0;
}
*/
@media screen and (max-width: 1024px){
    .btn{
        font-size: var(--font--medium-min);
    }
}

@media screen and (max-width: 320px){
    .btn{
        padding: 21px 44px;
    }
}