@media screen and (min-width: 750px) {
html, body {
    padding: 0;
    margin: 0;
    scroll-behavior: smooth;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

header {
    position: fixed;
    left: 0vw;
    top: 0vh;
    width: 100vw;
    height: 20vh;
    background-color: darksalmon;
    color: black;
    text-align: center;
    line-height: 125px;
    font-size: 30px;
    align-items: center;
    padding: 0;
}

nav {
    left: 0vw;
    top: 20vh;
    position: sticky;
    width: 100vw;
    height: 10vh;
    background-color:rgb(255, 253, 113);
    color: black;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 15px;
}

nav a {
    text-decoration: none;
    color: black;
    font-family:'Courier New', Courier, monospace;
    border-radius: 10px;
    display: block;
    padding: 40px;
    height: 5vh;
    line-height: 5vh;
    background-size: cover;
    background-position: center;
}

nav a:hover {
    background-color: rgb(145, 133, 255);
    color: black;
    padding: 20px;
}

section {
    width: 100vw;
    height: 100vh;
}

#introduccion {
    background-color: rgb(211, 160, 126);
    background-image: URL(https://http2.mlstatic.com/pelota-balon-de-voley-molten-v58slc1-soft-touch-original-D_NQ_NP_752325-MPE25430619667_032017-F.jpg);
    background-size: cover;
    background-position: center;
}

.texto1 {
    color: black;
    font-size: 25px;
    text-align: center;
    position: static;
    padding: 150px 130px 0px 700px;
    text-shadow: 1px 1px 2px rgb(255, 255, 255);

}

.imagen1 {
    display: flex;
    flex-wrap: wrap;
}

.imagen1 img {
    width: 450px;
    height: 600px;
    padding: 30px 50px 100px 20px;
}

#infancia {
    background-color: rgb(248, 177, 177);
}

.imagenesinfancia {
    display: flex;
    flex-wrap: wrap;
/*    object-fit: cover;
    width: 100px;
    height: 100px;*/
    justify-content: space-around;
}

.imagenesinfancia img {
    width: 150px;
    height: 150px;
    padding: 15px;
    margin: 7px;
}

#paso {
    background-color: rgb(76, 206, 156);
}

.paso {
    display: flex;
    flex-wrap: wrap;
 /*   object-fit: cover;
    width: 20px;
    height: 20px; */
    justify-content: space-around;
}

.paso img {
    width: 100px;
    height: 100px;
    padding: 15px;
    margin: 7px;
}

#viaje {
    background-color: rgb(211, 170, 248);
}

.ba2024 {
    display: flex;
    flex-wrap: wrap;
 /*   object-fit: cover;
    width: 20px;
    height: 20px; */
    justify-content: space-around;
}

.ba2024 img {
    width: 125px;
    height: 125px;
    padding: 5px;
    margin: 7px;
}

#random {
    background-color: rgb(133, 182, 133);
}

.random {
    display: flex;
    flex-wrap: wrap;
/*    object-fit: cover;
    width: 20px;
    height: 20px;  */
    justify-content: space-around;
}

.random img {
    width: 150px;
    height: 150px;
    padding: 4px;
    margin: 5px;
}


footer {
    position: relative;
    left: 0vw;
    bottom: 0vh;
    width: 100vw;
    height: 10vh;
    background-color:#87008b;
    color: rgb(0, 0, 0);
    text-shadow: 1px 1px 2px rgb(255, 255, 255);
    text-align: center;
    line-height: 60px;
    font-size: 20px;
    align-items: center;
    justify-content: space-around;
    display: flex;
}

footer a:hover {
    background-color: rgb(145, 133, 255);
    color: black;
    padding: 20px;
    border-radius: 10px;
}

}



@media screen and (max-width: 750px) {
    html, body {
        padding: 0;
        margin: 0;
        scroll-behavior: smooth;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    }
    
    header {
        position: fixed;
        left: 0vw;
        top: 0vh;
        width: 100vw;
        height: 10vh;
        background-color: darksalmon;
        color: black;
        text-align: center;
        line-height: 25px;
        font-size: 30px;
        align-items: center;
        padding: 0;
    }
    
    nav {
        left: 0vw;
        top: 10vh;
        position: sticky;
        width: 100vw;
        height: 15vh;
        background-color:rgb(255, 253, 113);
        color: black;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 2px;
    }
    
    nav a {
        text-decoration: none;
        color: black;
        font-family:'Courier New', Courier, monospace;
        border-radius: 4px;
        display: block;
        padding: 8px;
        height: 10vh;
        line-height: 5vh;
        background-size: cover;
        background-position: center;
    }
    
    nav a:hover {
        background-color: rgb(145, 133, 255);
        color: black;
        padding: 5px;
        font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    
    section {
        width: 100vw;
        height: 100vh;
    }
    
    #introduccion {
        background-color: rgb(211, 160, 126);
        background-image: URL(https://http2.mlstatic.com/pelota-balon-de-voley-molten-v58slc1-soft-touch-original-D_NQ_NP_752325-MPE25430619667_032017-F.jpg);
        background-size: cover;
        background-position: center;
    }
    
    .texto1 {
        color: black;
        font-size: 26px;
        text-align: center;
        position: static;
        padding: 5px;
        margin: 60px;
        text-shadow: 1px 1px 2px rgb(255, 255, 255);
    }

    #infancia {
        background-color: rgb(248, 177, 177);
    }
    
    .imagenesinfancia {
        display: flex;
        flex-wrap: wrap;
    /*    object-fit: cover;
        width: 100px;
        height: 100px;*/
        justify-content: space-around;
    }
    
    .imagenesinfancia img {
        width: 90px;
        height: 90px;
        padding: 4px;
        margin: 2px;
    }
    
    #paso {
        background-color: rgb(76, 206, 156);
    }
    
    .paso {
        display: flex;
        flex-wrap: wrap;
     /*   object-fit: cover;
        width: 20px;
        height: 20px; */
        justify-content: space-around;
    }
    
    .paso img {
        width: 70px;
        height: 70px;
        padding: 7px;
        margin: 2px;
    }
    
    #viaje {
        background-color: rgb(211, 170, 248);
    }
    
    .ba2024 {
        display: flex;
        flex-wrap: wrap;
     /*   object-fit: cover;
        width: 20px;
        height: 20px; */
        justify-content: space-around;
    }
    
    .ba2024 img {
        width: 70px;
        height: 70px;
        padding: 3px;
        margin: 6px;
    }
    
    #random {
        background-color: rgb(133, 182, 133);
    }
    
    .random {
        display: flex;
        flex-wrap: wrap;
    /*    object-fit: cover;
        width: 20px;
        height: 20px;  */
        justify-content: space-around;
    }
    
    .random img {
        width: 80px;
        height: 80px;
        padding: 4px;
        margin: 6px;
    }
    
    footer {
        position: relative;
        left: 0vw;
        bottom: 0vh;
        width: 100vw;
        height: 10vh;
        background-color:#87008b;
        color: rgb(0, 0, 0);
        text-shadow: 1px 1px 2px rgb(255, 255, 255);
        text-align: center;
        line-height: 6px;
        font-size: 18px;
        align-items: center;
        justify-content: space-around;
        display: flex;
    }
    
    footer a:hover {
        background-color: rgb(145, 133, 255);
        color: black;
        padding: 5px;
        border-radius: 4px;
    }
}