.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0);
    opacity: 0;             /* Start with 0 opacity */
    visibility: hidden;      /* Hide it, but keep it in the layout */
    transition: background-color 0.3s ease, opacity 0.3s ease; /* Add opacity transition */
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal.show {
    opacity: 1; 
    visibility: visible;
    background-color: rgba(11, 0, 150,0.9); /*  Dark blue */
    background-color: rgba(243, 0, 131,0.9); /* Pink (accent #1) */
    background-color:rgba(255,255,255,0.9);
    background:url("/mal-di-schiena/assets/fine-speckled-paper.webp");
}
.modal-content {
    position: relative;
    padding: 0;
    width:500px;
    max-width:80%;
    transform: scale(0.5);
    transition: transform 0.3s ease; 
}

.modal.show .modal-content {
    transform: scale(1);    /* Scale to 100% */
}

#lightbox-img{
    border: var(--stroke-style);
    border-color:var(--accent-color-2);
}

.close {
  color: white;
  color: var(--accent-color-2);
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color:#F94700;
  text-decoration: none;
  cursor: pointer;
}