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

 
 .Character {
    width: calc(32px * var(--pixel-size));
    height: calc(32px * var(--pixel-size));
    overflow: hidden;
    position: absolute;
    /* margin: 4em auto; */
 }
 
 .Character_spritesheet {
    animation: moveSpritesheet 1s steps(4) infinite;
    width: calc(128px * var(--pixel-size));
    position: absolute;
    
 }
 .Character_shadow {
    position: absolute;
    width: calc(32px * var(--pixel-size));
    height: calc(32px * var(--pixel-size));
 }
 
 .pixelart {
    image-rendering: pixelated;
 }
 
 .face-right {
    top: calc(-32px * var(--pixel-size));
 }
 .face-up {
    top: calc(-64px * var(--pixel-size));
 }
 .face-left {
    top: calc(-96px * var(--pixel-size));
 }
 .sit-down {
    top: calc(-128px * var(--pixel-size));
 }
 .lick {
    top: calc(-160px * var(--pixel-size));
 }
 .sleep {
    top: calc(-192px * var(--pixel-size));
 }
 .wake-up {
    top: calc(-224px * var(--pixel-size));
 }

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