@media screen and (min-width: 900px){/* para compus o mas */
    * {
        margin: 0; 
        padding: 0;
    }

    body {
        background-image: url("./fotos/fotoFondo.jpg");
        background-size: 100%;
        width: 100%;
        font-family: "Ubuntu";
    }
    .boton{
        color: blueviolet;
    }
    .frasetitulo{
        display: flex;
        justify-content: center;
        height: 18vw;
    }

    .contenedor-galeria {
        width: 85vw;
        height: 23vw;
        overflow: hidden;
        margin: 70px auto;
        box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
        -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
        -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
        border-radius: 2vw;
    }

    .contenedor-galeria ul {
        width: 100vw;
    }

    .contenedor-galeria li {
        position: relative;
        display: block;
        width: 5vw;
        height: 23vw;
        float:left;
        box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
        -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
        transition: all 0.5s;
        border-radius: 2vw;
    }

    .contenedor-galeria ul:hover li {
        width: 60px;
        filter: brightness(50%);
    }

    .contenedor-galeria ul li:hover {
        width: 50vw;
        filter: brightness(100%);
    }

    .contenedor-galeria li img {
        display: block;
        width: 50vw;
        height: 23vw;
    }

    .titulo-imagen {
        background: rgba(0, 0, 0, 0.8);
        position: absolute;
        top: 100%;
        width: 100%;
        display: block;
        transition: all 0.5s ease;
        animation: cambia-color 10s linear infinite;
        background: -webkit-linear-gradie nt(left, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.8));
        background-size: 400% 400%;
    }

    .contenedor-galeria ul li:hover .titulo-imagen {
        top: 0%;
        box-shadow: 0 0 25px 10px rgba(100, 125, 236, 0.5);
        -webkit-box-shadow: 0 0 25px 10px rgba(221, 80, 226, 0.5);
        -moz-box-shadow: 0 0 25px 10px rgba(101, 137, 255, 0.5);
    }

    .titulo-imagen:hover a {
        transform: scale(1.1);
        transition: all 0.5s ease;
    }

    .titulo-imagen:active {
        background: rgba(255, 255, 255, 0.5);
    }
}

@media screen and (min-width: 400px) and (max-width:900px){
  
    * {
        margin: 0; 
        padding: 0;
    }

    body {
        background-color: rgb(132, 189, 243);
        width: 100%;
        font-family: "Ubuntu";
    }
    header{
        background-image: url("./fotos/fotoFondo.jpg");
        background-size: 100%;
        top: -4vw;
        height: 40vw;
    }
    .boton{
        color: blueviolet;
    }
    .frasetitulo{
        display: flex;
        justify-content: center;
        margin-top: 10vw;
        height: 23vw;
    }
    .contenedor-galeria{
        display: grid;
        grid-row: inherit;
        justify-content:center;
    }
    .fotos{
        width:40vw;
        margin: 2vw;
    }
}
@media screen and (max-width:400px){ /* para celulares */
  
    * {
        margin: 0; 
        padding: 0;
    }

    body {
        background-color: rgb(132, 189, 243);
        width: 100%;
        font-family: "Ubuntu";
    }
    header{
        background-image: url("./fotos/fotoFondo.jpg");
        background-size: 100%;
        top: -4vw;
        height: 35vw;
    }
    .boton{
        color: blueviolet;
    }
    .frasetitulo{
        display: flex;
        justify-content: center;
        margin-top: 5vw;
        height: 18vw;
    }
    .contenedor-galeria{
        display: flex;
        justify-content:center;
    }
    .fotos{
        width:40vw;
        margin: 2vw;
    }
    
}