/* CSS Document */

body.modal-open {
  position: fixed;
  overflow: hidden;
  width:100%;
  height:100vh;
}

.modal {
  position: fixed;
  top:0;
  left:0;
  width:100vw;
  height:100dvh;
  background: rgba(255, 255, 255, 0.9);
  z-index: 1000;
  opacity:0;
  transition:opacity 0.3s linear;
}

.modal .inner {
  position: relative;
  text-align: center;
  max-width:92%;
  width:fit-content;
  height:calc(100% - 5em);
  margin:5em auto 0;
  opacity:0;
  transition:opacity 0.3s linear, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  transform:scale(0.98);
}
.modal .inner .img_container {
  overflow: auto;
  /*max-width:100%;*/
  max-width: 1200px;
  max-height:100%;
}

.modal.on {opacity:1;}
.modal .inner.on {opacity:1;transform:scale(1);}

.modal .inner .controller {
  display:flex;
  gap:2em;
  position: absolute;
  right:0;
  transform:translateY(-100%);
}
.modal .inner .controller button {
  background: none;
  border:none;
}
.modal .inner .controller .close_button {
  position: relative;
  width:3em;
  aspect-ratio: 1 / 1;
}
.modal .inner .controller .close_button::before,
.modal .inner .controller .close_button::after {
  content:"";
  display:block;
  width:100%;
  height:3px;
  background: #063190;
  position: absolute;
  top:50%;
}
.modal .inner .controller .close_button::before {
  transform:rotate(45deg);
}
.modal .inner .controller .close_button::after {
  transform:rotate(-45deg);
}