@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');



.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  justify-content: center;
  align-items: center;
  padding: 0em 3em;
  grid-gap: 1em;
  margin-bottom: -20px;
}

.gallery img {
  width: 250px;
  height: 250px;
  object-fit: cover;
  object-position: center;
  cursor:pointer;
  border: 3px solid #504F7B;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

.gallery-title {
  margin: -10px auto 5px;
  font-weight: bold;
  color: #141414;
  font-size: 16px;
}


.lightbox-title,
.text {
  color: #fff;
  margin: 10px 20px;
  padding: 5px;
  text-align: justify;
}

.text {
  color: aliceblue;
  font-style: italic;
}

.image_desc {
  padding: 1.5em;
  display:block;
}


.container:hover img{
  transform: scale(1.1);
  transition-duration: .3s;
  transition-duration: .5s;
}

.button {
  display: inline-block;
  text-decoration: none;
  color: #A96762; 
  font-weight: bold;
  border: 1.5px solid #A96762; 
  padding: .2em .7em;
  border-radius: 4px;
  margin-top: 5px;
}

.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100wh;
  display: none;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-bottom: 2em;
  z-index: 10;
  padding: 2em;
} 

.lightbox-image {
  display: block;
  width: 100%;
  height: 510px;
  object-fit: cover;
  border-radius: 10px;
}

.lightbox_content {
  width: 35%;
  padding: 1em;
  background: #223A66;
  position: relative;
}

.lightbox:target {
  display: flex;
  transform: scale(1,1);
  /* transform-origin: left; */
}

.close {
  position: absolute;
  right: -.8em;
  top: -.8em;
  border: white 2px solid;
  width: 2.5em;
  height: 2.5em;
  background: red;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.close::after {
  content: 'X';
  font-weight: 800;
  color: white;
}

footer {
  background: #A96762;
  padding: 30px;
  font-size: 0.9rem;
  color: #000;
}

.return {
  display: inline-block;
  color: white;
  background: #ccc;
  padding: .3em 3em;
  border-radius: 4px;
  margin-bottom: 20px;
  font-size: 1.1rem;
}
 .return a {
  color: black;
  text-decoration: none;
 }
 .return a:visited {
  color: black;
 }
 .return a:hover {
  color: #A96762;
 }
 .return a:active {
  color: #fff;
 }









 @media only screen and (max-width: 600px) {
   
    .lightbox-image {
        display: block;
        width: 100%;
        height: 250px;
        object-fit: cover;
        border-radius: 10px;
      }
      .lightbox_content {
        width: 100%;
        padding: 1em;
        background: #223A66;
        position: relative;
      }
  }