/* ------ modal.css ------ */
/* -- Website Nina Hitz -- */

@import "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/fontawesome.min.css";


.modal-item {
  cursor: zoom-in;
}

.modal {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 4rem 1rem 3rem 1rem;
  z-index: 25;

  display: flex;
  justify-content: center;
  align-items: center;

  background-color: rgba(0, 0, 0, 0.733);
  animation: alpha 0.3s ease-in-out;
}

.modalDiv {
  display: flex;

  justify-content: space-around;
  align-items: center;

  height: 100%;
  width: 100%;
}

.imgDivContainer {
  display: flex;
  align-items: center;
  justify-content: center;

  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

.imgDiv {
  display: flex;
  align-items: center;
  justify-content: center;

  max-width: 100%;
  height: 100%;
}

img.modal-active-image {
  object-fit: contain;

  height: 100%;
  max-width: 100%;
}

.modal-active-image {
  animation: zoom 0.3s ease-in-out;
}

.navBtn {
  color: rgba(255, 255, 255, 0.87);
  font-size: 25px;
  margin: 20px;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}

.closeBtn {
  position: absolute;
  top: 0;
  right: 0;
}

.navBtn:hover {
  color: rgb(255, 255, 255);
}

.nextBtn {
}

.prevBtn {
}

@keyframes zoom {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

@keyframes alpha {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}