* {
    margin: 0;
    padding: 0;
    line-height: 0;
}

.root {
    --pixel-size: 10;
}

body {
    background-color: #fff;
    text-align: center;
}

.container {
    width: 128px;
    margin: 10px auto;
    border: 0 solid;
    overflow: auto;
}

.character {
    position: absolute;
    width: 128px;
    height: 128px;
    left: 0;
    top: 0;
    transition: left 0.1s linear, top 0.1s linear;
    image-rendering: pixelated;
}

.Character {
    width: calc(32px * var(--pizel-size));
    height: calc(32px * var(--pizel-size));
}

.spritesheet {
    width: 128px;
    margin: 10px auto;
    border: 0 solid;
    overflow: auto;
}

.sprite {
    width: 32px;
    float: left;
    border: 0 solid;
    box-sizing: border-box
}

.pixelart {
    image-rendering: pixelated;
}
