body{
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body{
    background-color: black;
    background-image: url("https://caar1960-page.neocities.org/my%20places%20:3/misc%20pages/characters/character%20pages/applejack/aj.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    width: 100vw;
    height: 100vh;
}

.cajagrande{
    /* invisible pero existe */
    background: transparent;

    /* puedes manipularlo */
    position: fixed;
    top: 260px;
    left: 840px;
    width: 860px;

    color: white;
    font-size: 35px;
}

.caja-img{
    width: 820px;
    height: 460px;

    /* invisible */
    background: transparent;

    /* posicionable */
    position: fixed;
    top: 625px;
    left: 890px;

    /* controla la imagen dentro */
    overflow: hidden;

    
}

.img{
    width: 17%;
    height: 17%;
    object-fit: cover;
}

.cute_mark {
position:absolute;
    top: 73px;
    left:137px;
 width: 219px;

}

.happy_appy {

position:absolute;
    top: 39px;
    left:737px;
 width: 319px;
    
}

.oooh_shiny {

position:absolute;
    top: 323px;
    left: 137px;
 width: 219px;

}

.japanese_aj {

position:absolute;
    top: 63px;
    left:1557px;
 width: 205px;

}

.plushieeeee {

    position:absolute;
    top: 593px;
    left:137px;
 width: 189px;
}

.movil{
    position: absolute;
    top: 89.7%;

    width: 100px;

    animation: mover 30s linear infinite;
    
}

/* animación */
@keyframes mover{

    0%{
        left: -200px;
        transform: scaleX(-1);
    }

    49%{
        left: 100vw;
        transform: scaleX(-1);
    }

    50%{
        left: 100vw;
        transform: scaleX(1);
    }

    99%{
        left: -200px;
        transform: scaleX(1);
    }

    100%{
        left: -200px;
        transform: scaleX(1);
    }
}

.direction{

position:fixed;
    top: 880px;
    left:20px;

    width:70px;

    z-index:10;

    cursor:pointer;

    transform: scaleX(-1);
}