*{
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }
 body {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
 }


 h1 {
   font-weight: 400;
   text-align: center;
   padding: 20px 0;
   font-size: 40px;
   color: #fff;

 }

 .linea {
   background: #550b51;
   height: 5px;
   width: 100%;
   display: block;

 }


#inicio{
  width: 40px;
  height: 40px;
  background: #000;
  transition: transform 0.5s ease-in-out;
}


#inicio:target{
  
  transform: translateX(500%);

}



 .galeria {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   width: 95%;
   margin: auto;
   grid-gap: 10px;
   padding: 40px 0;
   overflow: hidden;
 }


 .galeria img{
   width: 100%;
   vertical-align: top;
   height: 300px;
   object-fit: cover;
   transition: transform 0.5s;
 }

 .galeria > a{
  display: block;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 6px rgba(0, 0, 0, .5);
}


 .galeria a:hover img{
   filter: drop-shadow(0 10px 10px #5936ba) brightness(1.1);
   transform: rotate(7deg) scale(1.3);
 }

 

 .light-box{
   position: fixed;
   top: 0;
   left: 0;
   background: rgba(0, 0, 0, .5);
   transition: transform .3s ease-in-out;
   width: 100%;
   
   height: 100vh;
   z-index: 1000;
   display: flex;
   justify-content: center;
   align-items: center;
   transform: scale(0);
   
 }

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

 .light-box:target{
   transform: scale(1);
 }

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

 .next{
   display: block;
   background: #101055;
   color: #fff;
   height: 40px;
   width: 40px;
   line-height: 40px;
   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;
   }
   
 }