:root{
  --pixel-size: 6;
}

@media (max-width: 3840px) {
  :root { --pixel-size: 7; }
}

@media (max-width: 1440px) {
  :root { --pixel-size: 5; }
}

@media (max-width: 1024px) {
  :root { --pixel-size: 4; }
}

@media (max-width: 600px) {
  :root { --pixel-size: 3; }
}

@media (max-width: 400px) {
  :root { --pixel-size: 2; }
}

body {
  margin: 0;
  height: 100vh;
  background: linear-gradient(135deg, #b8f2e6, #e0fff7);
  /* display: flex;
  justify-content: center;
  align-items: center; */
  font-family: 'Comic Sans MS', cursive;
  overflow: hidden; 
}

/* ================= CHARACTER ================= */
.character {
  width: calc(32px * var(--pixel-size));
  height: calc(32px * var(--pixel-size));
  overflow: hidden;
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
}

.sprite-wrapper {
  width: 100%;
  height: 100%;
}

.character-sprite {
  height: 100%;
  display: block; 
}

.pixelart{
  image-rendering: pixelated;
}

/* Facing direction */
.face-right { transform: scaleX(1); }
.face-left  { transform: scaleX(-1); }

/* Animation states */
/* .sleeping{

}

.sitting{

}

.idle{

}

.walking{

}
 */
@keyframes moveSpritesheet {
  from {
    transform: translate3d(0px,0,0)
  }
  to {
    transform: translate3d(-100%,0,0)
  }
}