/*estilos universales*/
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
/*estilos para el header*/
header{
    background-color: darkslateblue;
    padding: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}
header h1{
    color: gold;
}
/*estilos para el main*/
main{
    padding: 50px 0;
}
main h2{
    text-align: center;
    margin: 20px auto;
}

/*estilos para la escena*/
.escena{
    background-image: url(../img/fondo.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 70vw;
    height: 70vh;
    margin: 0 auto;
    position: relative;
}
.escena img{
    width: 100px;
    display: block;
    position: absolute;
    bottom: 150px;
    left: 10px;
    animation-name: volar;
    animation-duration: 5000ms;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    transition: 5000ms linear all;
}
/*estilos para la animacion*/
@keyframes volar{
    0%{
        bottom: 150px;
        left: 10px; 
    }
    16%{
        left: 70px;
    }
    25%{
        left: 70px;
        bottom: 170px;
    }
    35%{
        bottom: 70px;
    }
    55%{
        bottom:200px;
    }
    85%{
        bottom: 70px;
    }
    100%{
        bottom: 150px;
        left: 800px;
    }
}
/*estilos para el footer*/
footer{
    background-color: palevioletred;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*estilos para responsive*/
@media only screen (min-width:321px) and (max-width:480px){
    img{
        width: 100vh;
    }
}  

@media only screen (min-width:768px) and (max-width:1024){
    img{
        width: 100vh;
    }
}

@media only screen (min-width:1224px){
    img{
        width: 100vh;
    }
}