/* Custom.css < Do your own thing! */

body {
    background: transparent;

  background-image: url("/images/paper.gif"), url("paper.gif");

.grid-item img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s;
}

.grid-item img:hover {
  transform: scale(1.03);
  padding: 10px;
}

/* Modal styling */
#imageModal {
  display: none;
  position: fixed;
  z-index: 1050;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
}

#imageModal img {
  max-width: 90%;
  max-height: 80%;
  display: block;
  margin: auto;
  margin-top: 5%;
  border-radius: 10px;
}

.modal-nav {
  position: absolute;
  top: 50%;
  font-size: 2rem;
  color: white;
  cursor: pointer;
  padding: 1rem;
  user-select: none;
}

#modalPrev { left: 2%; }
#modalNext { right: 2%; }

#modalClose {
  position: absolute;
  top: 2%;
  right: 2%;
  font-size: 2rem;
  color: white;
  cursor: pointer;
}