* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: 'Raleway', sans-serif;

}

h1{
    font-weight:400;
    text-align:center;
    padding:20px 0;
    font-size:40px;
}
.linea{
    background:#b200ff;
    height:5px;
    width:100%;
    display:block;
}
.galeria {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    width:90%;
    margin:auto;
    grid-area: 10;
    padding:40px 0;
    overflow:hidden;
}
.galeria > a{
    display:block;
    position:relative;
    overflow:hidden;
    box-shadow:0 0 6px rgba(0,0,0,0.5);

}
.galeria img {       /*ajusta       el tamaño de las imagenes  */
        width: 100%;
        vertical-align: top;
        height: 200px;
        object-fit: cover;
        transition-duration: 0.5s;
}




.galeria a:hover img {
        filter: blur(3px); /* da efecto de sombra */
        transform: rotate(10deg) scale(1.3);  /*da efecto de mover */
    }

.light-box {
    position:fixed;
    top:0;
    left:0;
    background:rgba(0,0,0,0.5);

    transition-duration: 0.3s;
   transform-style: preserve-3d;

    width:100%;
    height:100vh;
    z-index:1000;
    display:flex;
    justify-content:center;
    align-items:center;
    transform:scale(0); /* oculta la imagne*/

}

.light-box img{
    width:75vw;
    max-height:70vh;

}

.light-box:target{

    transform:scale(1);  /* muestra la imagen*/

}
.close {
    display:block;
    position:absolute;
    top:40px;
    right:40px;
    background:#851919;
    color:#fff;
    text-decoration:none;
    width:40px;
    height:40px;
    text-align:center;
    line-height:40px;
    border-radius:50%;

}

.next {
    display:block;
    background:#851919;
    color:#fff;
    height:30px;
    width:30px;
    line-height:30px;
    text-decoration:none;
    text-align:center;

}
@media screen and (max-width:400px) {
    .galeria {
        grid-template-columns: repeat(auto-fit,minmax(200px,1fr));

    }
    .close {
        top:20px;
        right:20px;
    }
}