.lvl {
    --sprite-size: 60px;
    --safety-margin: 20px;
    --movement-per-px: 3ms;
    
    width: calc((1 + 1 + 3 + 3 + 3 + 3 + 3 + 4) * var(--sprite-size)); /* 1260px */
    --lvl-length: 1260;
    height: calc(2 * var(--sprite-size) + 2 * var(--safety-margin));
    border-bottom: 4px solid black;
    position: relative;
    margin-bottom: 40px;
}

@keyframes running {
    0% {left: 0px;}
    100% {left: 1200px;} /* calc(var(--lvl-length) - var(--sprite-size)) */
}
.running {
    animation-name: running;
    animation-duration: 3600ms; /* calc((var(--lvl-length) - 60) * var(--movement-per-px)) */
    animation-timing-function: linear;
    animation-iteration-count: 1;
}
.jumping {
    transform: translateY(calc(0px - (var(--sprite-size) + 20px)));
}

.dino {
    width: var(--sprite-size);
    height: var(--sprite-size);
    position: absolute;
    bottom: 0px;
    left: 0px;
    background-image: url('dino-idle.png');
    background-size: contain;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    transition: transform 270ms ease-out;
}

cactus {
    display: block;
    width: var(--sprite-size);
    height: var(--sprite-size);
    position: absolute;
    bottom: 0px;
    background-image: url('kaktus.png');
    background-size: contain;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    
    --first-cactus-offset: calc(120px);
    --cactus-gap: calc(var(--sprite-size) + 120px);
}
cactus:after {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    color: white;
    font-family: monospace;
    transform: translate(-50%, -50%);
}
cactus:nth-of-type(1) {
    left: calc(var(--first-cactus-offset) + 1 * var(--cactus-gap));
}
cactus:nth-of-type(1):after {
    content: '0';
}
cactus:nth-of-type(2) {
    left: calc(var(--first-cactus-offset) + 2 * var(--cactus-gap));
}
cactus:nth-of-type(2):after {
    content: '1';
}
cactus:nth-of-type(3) {
    left: calc(var(--first-cactus-offset) + 3 * var(--cactus-gap));
}
cactus:nth-of-type(3):after {
    content: '2';
}
cactus:nth-of-type(4) {
    left: calc(var(--first-cactus-offset) + 4 * var(--cactus-gap));
}
cactus:nth-of-type(4):after {
    content: '3';
}
cactus:nth-of-type(5) {
    left: calc(var(--first-cactus-offset) + 5 * var(--cactus-gap));
}
cactus:nth-of-type(5):after {
    content: '4';
}

.code, .code * {
    font-family: monospace;
    font-size: 20px;
}

.msgBox {
    position: relative;
    margin-top: 40px;
    border: 2px solid black;
    border-radius: 3px;
    width: 600px;
    height: 200px;
}
.msgCon {
    position: absolute;
    left: 60px;
    bottom: 10px;
    width: 500px;
    max-height: 180px;
    font-size: 25px;
    font-family: monospace;
}
.dinoHead {
    width: 48px;
    height: 48px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-image: url('dino-kopf.png');
    background-size: contain;
    background-repeat: no-repeat;
    image-rendering: pixelated;
}