@keyframes spin {
    0% {background: url("./heads.jpg");
    transform: rotateY(660deg);}
    
    25% {background: url("./tails.jpg")}
    
    50% {background: url("./heads.jpg")}
    
    75% {background: url("./tails.jpg")}
    
    100% {background: url("./heads.jpg")}
}

#image{
    background: url("./heads.jpg");
    width: 385px;
    height: 385px;
    
}

.animate{
    background: url("./heads.jpg");
    width: 385px;
    height: 385px;
    animation-name: spin;
    animation-iteration-count: 2;
    animation-duration: 1s;
}

.canvas{
    width: 800px;
    height: 500px;
    margin: 50px auto;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5em;
}

#center{
    width: 385px;
    margin: 15px auto;
}

.selection, #player, #computer{
    display: inline;
    margin: 25px;
    font-size: 1.3em;
}

button {
    font-size: 1.2em;
    border-radius: 5px;
}