.subtitle{

    margin-bottom:30px;

    color:#666;

}

#dice{

    margin:35px auto;

    display:flex;

    justify-content:center;

}

#dice-face{

    font-size:7rem;

    color:#ff5c7c;

}

#dice-face.roll{

    animation:shake .9s ease;

}

@keyframes shake{

    0%{transform:rotate(0) scale(1);}
    15%{transform:translateX(-15px) rotate(-15deg);}
    30%{transform:translateX(15px) rotate(15deg);}
    45%{transform:translateX(-10px) rotate(-10deg);}
    60%{transform:translateX(10px) rotate(10deg);}
    75%{transform:translateY(-8px) rotate(-5deg);}
    100%{transform:none;}

}

#roll{

    border:none;

    background:#ff5c7c;

    color:#fff;

    padding:14px 30px;

    border-radius:12px;

    cursor:pointer;

    font-size:1rem;

    font-weight:600;

}

#roll:hover{

    opacity:.9;

}

#result{

    margin-top:25px;

    font-size:1.15rem;

    font-weight:600;

}