table {
    border-collapse: collapse;
    margin: 0 auto;
    margin-top: 100px;
}
td {
    width: 80px;
    height: 80px;
    box-sizing: border-box;
    position: static;
    background-image: url(assets/cellbackground.png);
    padding: 0;
}

/* dropping animation */
@keyframes coinplaced1 { from { bottom: 80px } to { bottom: 0 }}
@keyframes coinplaced2 { from { bottom: 160px } to { bottom: 0 }}
@keyframes coinplaced3 { from { bottom: 240px } to { bottom: 0 }}
@keyframes coinplaced4 { from { bottom: 320px } to { bottom: 0 }}
@keyframes coinplaced5 { from { bottom: 400px } to { bottom: 0 }}
@keyframes coinplaced6 { from { bottom: 480px } to { bottom: 0 }}
img[class*="coin-placed"] {
    position: relative;
    animation-timing-function: ease-in;
    display: block;
}
img.coin-placed1 { animation-name: coinplaced1; animation-duration: 0.5s; }
img.coin-placed2 { animation-name: coinplaced2; animation-duration: 0.5s; }
img.coin-placed3 { animation-name: coinplaced3; animation-duration: 0.75s; }
img.coin-placed4 { animation-name: coinplaced4; animation-duration: 0.75s; }
img.coin-placed5 { animation-name: coinplaced5; animation-duration: 1s; }
img.coin-placed6 { animation-name: coinplaced6; animation-duration: 1s; }
img.cell-img {
    width: 100%;
    z-index: -1;
}

/* win classes */
@keyframes winningcoin {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}
img.winning-coin {
    animation-name: winningcoin;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* utility classes */
.utility-container {
    margin-top: 20px;
    text-align: center;
}
button {
    font-size: 16px;
    padding: 8px;
}
#timerSpeedInputContainer {
    margin-top: 20px;
    display: none;
}

/* text classes */
* {
    font-family: sans-serif;
}
.win-display {
    margin: 0 auto;
    padding: 20px;
    width: 250px;
    text-align: center;
    display: none;
}
.copyright {
    font-size: 14px;
    color: gray;
    text-align: center;
}