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


.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

body {
    height: 100%;
}
.Bunny {
  width: calc(32px * var(--pixel-size));
  height:calc(32px * var(--pixel-size));
  overflow: hidden;
  position: absolute;
  z-index:2;
}

.Carrots {
  width: calc(16px * var(--pixel-size));
  height:calc(16px * var(--pixel-size));
  overflow: hidden;
  position: absolute;
  z-index:1;
}
.CarrotLives {
  position: relative;
}

.pixelart {
  image-rendering: pixelated;
}
.Bunny_shadow {
  position:absolute;
  width: calc(32px * var(--pixel-size));
  height: calc(32px * var(--pixel-size));
  top: calc(-8px * var(--pixel-size));
}
.Bunny_long_shadow_left {
  width: calc(156px * var(--pixel-size));
  height: calc(64px * var(--pixel-size));
  left: calc(-5px * var(--pixel-size));
}

.Bunny_long_shadow_right {
  width: calc(156px * var(--pixel-size));
  height: calc(64px * var(--pixel-size));
  left: calc(-2px * var(--pixel-size));
}

.Move_spritesheet {
  animation: moveSpritesheet 1s steps(4) infinite;
  width: calc(128px * var(--pixel-size));
  position: absolute;
}
.Shadow_spritesheet {
  animation: moveSpritesheet 1s steps(4) infinite;
  width: calc(128px * var(--pixel-size));
  height: calc(64px * var(--pixel-size));
  position: absolute;
}
.shadow-default {
  top: calc(-8px * var(--pixel-size));
  width: calc(128px * var( --pixel-size));
  height: calc(64px * var( --pixel-size));
}
.jump-face-up {
  top: calc(-9px * var(--pixel-size));
}
.jump-face-right {
  top: calc(-96px * var(--pixel-size));
  left: calc(4px * var(--pixel-size));
}
.jump-face-left {
  top: calc(-32px * var(--pixel-size));
  left: calc(-4px * var(--pixel-size));
}
.jump-face-down {
  top: calc(-64px * var(--pixel-size));
}
.face-up {
  top: calc(-127px * var(--pixel-size));
}
.face-right {
  top: calc(-223px * var(--pixel-size));
}
.face-left {
  top: calc(-159px * var(--pixel-size));
}
.face-down {
  top: calc(-191px * var(--pixel-size));
}
.shadow-left {
  left: calc(-4px * var(--pixel-size));
  top: calc(-40px * var(--pixel-size));
}
.shadow-right {
  left: calc(4px * var(--pixel-size));
}

@keyframes moveSpritesheet {
  from {
     transform: translate3d(0px,0,0)
  }
  to {
    transform: translate3d(-100%,0,0)
  }
}
.saturate { filter: saturate(10); }
.grayscale { filter: grayscale(100%); }
.contrast { filter: contrast(160%); }
.brightness { filter: brightness(0.25); }
.blur { filter: blur(3px); }
.invert { filter: invert(100%); }
.sepia { filter: sepia(100%); }
.huerotate { filter: hue-rotate(180deg); }
.rss.opacity { filter: opacity(50%); }