:root {
    --lightest: #fefffa;
    --light: #f8cd94;
    --dark: #e88440;
    --darkest: #743232;
}

body {
    font-family: Arial, sans-serif;
    background-color: var(--lightest);
    color: var(--darkest);
    font-weight: bold;
}

#cats {
    display: flex;
}

.card {
    border: 2px solid var(--darkest);
    background-color: var(--dark);
    margin: 1rem;
    padding: 0.5rem;
}

.catCard {
    width: 10rem;
    display: flex;
    flex-direction: column;
}

.catCard > * {
    margin: 0.5rem auto;
}

button {
    color: var(--lightest);
    border-radius: 5px;
    border-color: var(--darkest);
    background-color: var(--darkest);
}

img {
    image-rendering: -webkit-optimize-contrast; /* webkit */
    image-rendering: -moz-crisp-edges /* Firefox */
}

.blinking {
    animation: blinkingText 1s infinite;
}

.flashOnce {
    animation: blinkingText 1s;
}

@keyframes blinkingText {
    0% {     color: var(--darkest);   }
    50% {    color: var(--lightest);  }
}

.bobbing {
    animation:bob 1s infinite;
}

@keyframes bob {
    0% {     rotate: -5deg;  }
    50% {    rotate: 5deg;  }
    100% {    rotate: -5deg;  }
}

.image {
    width: 32px;
    height: 32px;
    background: url(img/mj80-cats.png);
    background-size: 1024px;
    image-rendering: -webkit-optimize-contrast; /* webkit */
    image-rendering: -moz-crisp-edges /* Firefox */
}
.normalCat { background-position: 0 0; }
.happyCat { background-position: 0px -32px; }
.sadCat { background-position: -32px -32px; }
.food { background-position: -96px -32px; }
.soap { background-position: -64px -32px; }
.money { background-position: -96px 0px; }