#game {
    display: none;
}

#game.on {
    display: block;
}

#game #player,
#game #lasers {
    position: absolute;
    top: 0;
    left: 5%;
    height: 200%;
    aspect-ratio: 250 / 150;
    z-index: 5;
} 

#game #bg img {
    position: absolute;
    bottom: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: contain;
}

#game #bg #bgEarth {
    position: fixed;
    top: 2%;
    right: 10%;
    width: 500px;
    left: auto;
    z-index: -5;
    display: block;
}

#game #bg #bgFloor {
    left: 150%;
    width: 1250px;
    z-index: -1;
    animation: bgFloorAnimation 1.2s linear infinite;
}

@keyframes bgFloorAnimation {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-300%);
    }
}

#game #bg #bgFront1, #game #bg #bgFront2 {
    width: 3000px;
    z-index: -2;
    animation: bgAnimation 2s linear infinite;
}

#game #bg #bgFront2 {
    left: 3000px;
}

#game #bg #bgMid1, #game #bg #bgMid2 {
    bottom: 5%;
    width: 3000px;
    z-index: -3;
    animation: bgAnimation 8s linear infinite;
}

#game #bg #bgMid2 {
    left: 3000px;
}

#game #bg #bgBack1, #game #bg #bgBack2 {
    bottom: 19%;
    width: 3000px;
    z-index: -4;
    animation: bgAnimation 16s linear infinite;
}

#game #bg #bgBack2 {
    left: 3000px;
}

@keyframes bgAnimation {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}