:root{
    --width:0px;
    --height:0px;
    --width_1:0px;
    --height_1:0px;
    --width_2:0px;
    --height_2:0px;
    --movement_1: 0px;
    --movement_2: 0px;
    --movement_3: 0px;
    --scale:1;
    --rotation: 0deg;
}
body{
    margin: 0;
    padding: 0;
}
#app{
    width: 100%;
    min-height: 100vh;
}
#animationSheet{
    width: 100%;
    height: 160px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}
#animationSheet .layer{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img1{
    width: var(--width);
    height: var(--height);
    transform: translateX(var(--movement_1)) rotate(0);
}
.img2{
    width: var(--width);
    height: var(--height);
    transform: translateX(var(--movement_2)) rotate(0);
}
.img3{
    width: var(--width);
    height: var(--height);
    transform: translateX(var(--movement_3)) rotate(0);
}
.imgPlayer{
    width: var(--width_1);
    height: var(--height_1);

    transform:translateX(18vw) translateX(var(--movement_3)) rotate(var(--rotation));
}
.p2{
    width: var(--width_2);
    height: var(--height_2);
    transform:translateX(5vw) translateX(var(--movement_3)) rotate(var(--rotation)) scale(var(--scale));
}
.train{
    width: var(--width);
    height: var(--height);
    transform:translateX(5vw) translateX(var(--movement_3)) rotate(0);
}
.content{
    position: absolute;
    top: var(--height);
}