/* this is widely inspred by the Moema button style of codedrops*/

button {
    border: none;
    padding: 1.5em 3em;
    border-radius: 50px;
    background: #ECEEF1;
    color: #3C4C53;
    -webkit-transition: background-color 0.5s, color 0.5s;
    transition: background-color 0.5s, color 0.5s;
    outline: none;
}
button::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    bottom: -20px;
    right: -20px;
    background: inherit;
    border-radius: 50px;
    z-index: -1;
    opacity: 0.4;
    -webkit-transform: scale3d(0.8, 0.5, 1);
    transform: scale3d(0.8, 0.5, 1);
}


button.clicked {
    -webkit-transition: background-color 0.1s 0.5s, color 0.1s 0.5s;
    transition: background-color 0.1s 0.5s, color 0.1s 0.5s;
    color: #ECEFF1;
    background-color: #7986CB;
    -webkit-animation: anim-moema-1 0.5s forwards;
    animation: anim-moema-1 0.5s forwards;
}

button.clicked::before {
    -webkit-animation: anim-moema-2 0.5s 0.5s forwards;
    animation: anim-moema-2 0.5s 0.5s forwards;
}
@-webkit-keyframes anim-moema-1 {
    60% {
        -webkit-transform: scale3d(0.8, 0.8, 1);
        transform: scale3d(0.8, 0.8, 1);
    }
    85% {
        -webkit-transform: scale3d(1.1, 1.1, 1);
        transform: scale3d(1.1, 1.1, 1);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes anim-moema-1 {
    60% {
        -webkit-transform: scale3d(0.8, 0.8, 1);
        transform: scale3d(0.8, 0.8, 1);
    }
    85% {
        -webkit-transform: scale3d(1.1, 1.1, 1);
        transform: scale3d(1.1, 1.1, 1);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@-webkit-keyframes anim-moema-2 {
    to {
        opacity: 0;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes anim-moema-2 {
    to {
        opacity: 0;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}