/* PICTURE MODAL OR WHATEVER */
.modal {
  display:none;
  position:fixed;
  z-index:9999;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  background-color:rgba(0,0,0,0.85);
  opacity:0;
  transition:0.3s ease;
  align-items:center;
  justify-content:center;
}
.modal.visible {
  display:flex;
  opacity:1;
}
.modal.show {
  display:flex;
  opacity:1;
}
.modalbody {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.modalcontent {
  max-width:80vw;
  max-height:80vh;
  border-radius:4px;
  animation:zoomIn 0.3s ease;
}
@keyframes zoomIn {
  from {
  transform:scale(0.8);
  opacity:0;
}
to {
  transform:scale(1);
  opacity:1;
}
}.close {
  position:absolute;
  font-family:Comic Relief;
  top:20px;
  right:30px;
  color:white;
  font-size:30px;
  font-weight:bold;
  cursor:pointer;
  transition:0.3s ease;
}
.close:hover {
  color:yellow;
  transform:scale(1.2);
}
#caption {
  margin-top:10px;
  color:#ddd;
  font-size:1rem;
  font-family:Comic Relief;
}
@keyframes zoomOut {
  from {
  transform:scale(1);
  opacity:1;
}
to {
  transform:scale(0.8);
  opacity:0;
}
}.modalcontent.exit {
  animation:zoomOut 0.3s ease forwards;
}
.modal.fadeout {
  opacity:0;
  transition:opacity 0.3s ease;
}