.modal {
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:1000;
  display:none;
  position:fixed;
  overflow:hidden;
  align-items:center;
  justify-content:center;
  background-color:rgba(0, 0, 0, 0.7);
}

.modal-content {
  width:80%;
  padding:20px;
  max-width:400px;
  max-height:90vh;
  overflow-y:auto;
  overflow-x:auto;
  position:relative;
  text-align:center;
  border-radius:12px;
  background-color:var(--bg);
  box-shadow:0 4px 8px rgba(0, 0, 0, 0.2);
}

.modal-content img {
  height:auto;
  max-width:100%;
  border-radius:8px;
  backdrop-filter:blur(10px);
}

.close {
  top:-10px;
  right:6px;
  color:#aaa;
  padding:2px;
  font-size:28px;
  cursor:pointer;
  font-weight:bold;
  position:absolute;
  transform-origin:center;
  transition:color 0.3s, transform 0.5s; 
}

.close:hover {
  color:var(--primary);
  transform:scale(1.1);
}

.loading {
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:1;
  display:none;
  position:relative;
  align-items:center;
  justify-content:center;
}

.mjjLoader {
  display:flex;
  margin-top:20px;
  margin-bottom:20px;
  flex-direction:row; 
}

.mjjLoader div {
    width:6px;
    margin:2px;
    height:20px;
    background:#FE4A49;
    border-radius:25px; 
}

.mjjLoader div:nth-child(1) {
  animation:mjjLoader 1s ease-in-out infinite 0s;
}
.mjjLoader div:nth-child(2) {
  animation:mjjLoader 1s ease-in-out infinite 0.15s;
}
.mjjLoader div:nth-child(3) {
  animation:mjjLoader 1s ease-in-out infinite 0.3s;
}
.mjjLoader div:nth-child(4) {
  animation:mjjLoader 1s ease-in-out infinite 0.45s;
}
.mjjLoader div:nth-child(5) {
  animation:mjjLoader 1s ease-in-out infinite 0.3s;
}
.mjjLoader div:nth-child(6) {
  animation:mjjLoader 1s ease-in-out infinite 0.15s;
}
.mjjLoader div:nth-child(7) {
  animation:mjjLoader 1s ease-in-out infinite 0s;
}

@keyframes mjjLoader {
  0% {
    transform: scaleY(0.5);
    background: #FED766;
  }
  25% {
    transform:scaleY(1);
    background: #009FB7;
  }
  50% {
    transform: scaleY(2);
    background: #59CD90;
  }
  75% {
    transform:scaleY(1);
    background: #FE4A49;
  }
  100% {
    transform: scaleY(0.5);
    background: #D91E36;
  } 
}