.subtitle{

    margin-bottom:30px;

    color:#666;

}

#coin{

    width:160px;
    height:160px;

    margin:0 auto 30px;

    display:flex;

    justify-content:center;
    align-items:center;

}

#coin-face{

    width:150px;
    height:150px;

    border-radius:50%;

    background:linear-gradient(145deg,#ffd54f,#ffb300);

    display:flex;

    justify-content:center;
    align-items:center;

    font-size:64px;

    box-shadow:0 18px 40px rgba(0,0,0,.18);

    transition:transform .15s;

}

#coin-face i{

    transition:opacity .2s;

}

#coin-face.spin{

    animation:flip 2.2s cubic-bezier(.22,.61,.36,1);

}

@keyframes flip{

    0%{

        transform:rotateY(0) translateY(0);

    }

    25%{

        transform:rotateY(720deg) translateY(-30px);

    }

    50%{

        transform:rotateY(1440deg) translateY(-55px);

    }

    75%{

        transform:rotateY(2160deg) translateY(-25px);

    }

    100%{

        transform:rotateY(2880deg) translateY(0);

    }

}

#flip{

    border:none;

    background:#ff5c7c;

    color:white;

    padding:14px 28px;

    border-radius:12px;

    cursor:pointer;

    font-size:1rem;

    font-weight:600;

}

#flip:hover{

    opacity:.9;

}

#result{

    margin-top:25px;

    font-size:1.2rem;

    font-weight:600;

}