
#showImage {
  background: radial-gradient(
    circle at center,         /* shape and position */
    white 0%,               /* bright green in the middle */
    #CFC8B6 40%,              /* medium green ring */
    #e6dcc2 100%              /* fade to beige edges */
  );
  border: 1px solid black;
  border-radius: 10px;
  box-shadow: 0 10px 10px rgba(0,0,0,0.2);
  font-size: 20px;
  font-weight: bold;
  color: black; /* richer gold tone */
  cursor: pointer;
  display: inline-flex;       /* keeps image + text inline */
  align-items: center;        /* vertically center them */
  gap: 10px;                  /* space between image and text */
  padding: 10px 18px;
  transition: all 0.3s ease;  /* smooth hover effect */
  text-decoration: none;
}

/* Hover effect */
#showImage:hover {
  background: linear-gradient(135deg, #f1e5bf, #e0d7b9);
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
  transform: translateY(-3px);
  color: #8b5e00;
}



/* Optional slow movement for a gentle attention grab */
@keyframes moveText {
  0% { transform: translateX(0); }
  100% { transform: translateX(3px); }
}

/* Image size inside the text */
.imageposter {
  width: 100px;   /* adjust size as needed */
  height: auto;
  animation : blink 1s infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }   /* fully visible */
  50% { opacity: 0; }        /* invisible mid-way */
}

 /* Popup container */
.popup-container {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #D6CFBC;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  z-index: 1001;
}

/* Poster image */
.popup-img {
  max-width: 40%;
  height: 40%;
  border-radius: 10px;
}

/* Register link */
.register-link {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 20px;
  background-color: #009966;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  transition: background 0.3s;
  text-align:center;
}
.register-link:hover {
  background-color: #007a52;
}

/* Overlay */
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 1000;
}

/* Close button */
.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  color: #333;
  cursor: pointer;
  transition: color 0.3s;
}
.close-btn:hover {
  color: red;
}
