body {
  background-color: black;
  color: white;
  font-family: Verdana;
  margin: 0%;
}

.pixel-art {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.sprite {
  width: 512px;      /* frame width */
  height: 512px;     /* frame height */
  background-image: url('/CylonWebBannerSprite.png');
  background-repeat: no-repeat;
}
@keyframes starTwinkle {
  from { background-position: 0 0; }
  to   { background-position: -975px 0; }
}

.star-twinkle {
  width: 512px;
  height: 512px;
  background-position: 0 0;
  animation: starTwinkle 0.8s steps(2) infinite;
}


.moon-glow {
  width: 64px;
  height: 64px;
  background-position: 0 -64px;
  animation: moonGlow 1.2s steps(4) infinite;
}
.waterfall {
  width: 64px;
  height: 128px;
  background-position: 0 -128px;
  animation: waterfallFlow 0.6s steps(4) infinite;
}
.biplane {
  width: 64px;
  height: 64px;
  background-position: 0 -256px;
  animation: biplaneFly 10s steps(4) infinite;
}
.character-typing {
  width: 64px;
  height: 64px;
  background-position: 0 -320px;
  animation: typingLoop 0.8s steps(4) infinite;
}
.cat-tail {
  width: 32px;
  height: 32px;
  background-position: 0 -384px;
  animation: catSwish 1.2s steps(4) infinite;
}
.ufo-beam {
  width: 64px;
  height: 64px;
  background-position: 0 -416px;
  animation: ufoPulse 1s steps(4) infinite;
}
.city-lights {
  width: 128px;
  height: 64px;
  background-position: 0 -480px;
  animation: cityFlicker 0.8s steps(4) infinite;
}