#popup-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
/*   background-color: white; */
  background: url('https://cdn.glitch.global/e20286cc-361b-4e00-94eb-486775f1b327/bombaflat.png?v=1745345773777');
  padding: 1rem;
  border-radius: 3px;
/*   box-shadow: 5px 5px 10px cyan; */
  border: 2px solid black;
  
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
/*   background: linear-gradient(45deg, #F6D1C1, #F5E1D0, #D6C7FF, #B7F1FF); */
/*   background-size: 400% 400%; */
  animation: gradientShadow5 4s ease infinite;



  
  width: 110px;
  height: auto; 
  
  max-width: 200px;
  max-height: 80vh; 
}

.close-button {
 position: absolute;
  top: 0rem;
  right: 0rem;
  cursor: pointer;
  padding: 0.5rem;
  font-size: 0.7rem;
  color: cyan;
/*   color: #de4537; */
/*   color: yellow; */
/*   font-weight: */
/*   color: lime; */
/*   border: 2px solid #212121; */
  background: #212121;
  width: 100%;
}

.popup input[type="text"] {
  width: 100%;
  margin-top: 33px;
  padding: 0.1px;
  margin-bottom: 5px;
  background: rgba(255,255,255,0.8);
}

@keyframes gradientShadow1 {
  0% {
    box-shadow: 5px 5px 20px rgba(255, 193, 204, 1), 0 0 30px rgba(207, 226, 255, 0.7);
  }
  50% {
    box-shadow: 5px 5px 20px rgba(255, 187, 255, 1), 0 0 30px rgba(195, 248, 255, 0.7);
  }
  100% {
    box-shadow: 5px 5px 20px rgba(217, 219, 255, 1), 0 0 30px rgba(250, 215, 255, 0.7);
  }
}

@keyframes gradientShadow2 {
  0% {
    box-shadow: 5px 5px 20px rgba(255, 94, 87, 1), 0 0 30px rgba(255, 252, 97, 0.6), 0 0 50px rgba(80, 209, 160, 0.6);
  }
  50% {
    box-shadow: 5px 5px 20px rgba(255, 252, 97, 1), 0 0 30px rgba(80, 209, 160, 0.6), 0 0 50px rgba(30, 144, 255, 0.6);
  }
  100% {
    box-shadow: 5px 5px 20px rgba(80, 209, 160, 1), 0 0 30px rgba(30, 144, 255, 0.6), 0 0 50px rgba(255, 94, 87, 0.6);
  }
}

@keyframes gradientShadow3 {
  0% {
    box-shadow: 5px 5px 20px rgba(255, 87, 34, 1), 0 0 30px rgba(255, 195, 0, 0.7);
  }
  50% {
    box-shadow: 5px 5px 20px rgba(255, 0, 110, 1), 0 0 30px rgba(255, 102, 0, 0.7);
  }
  100% {
    box-shadow: 5px 5px 20px rgba(255, 195, 0, 1), 0 0 30px rgba(255, 87, 34, 0.7);
  }
}


@keyframes gradientShadow4 {
  0% {
    box-shadow: 5px 5px 20px rgba(0, 255, 0, 1), 0 0 30px rgba(0, 128, 0, 0.6);
  }
  50% {
    box-shadow: 5px 5px 20px rgba(173, 255, 47, 1), 0 0 30px rgba(0, 255, 127, 0.5);
  }
  100% {
    box-shadow: 5px 5px 20px rgba(0, 255, 127, 1), 0 0 30px rgba(0, 255, 0, 0.7);
  }
}

@keyframes gradientShadow5 {
  0% {
    box-shadow: 5px 5px 20px rgba(116, 246, 248, 1),
                0 0 30px rgba(116, 246, 248, 0.6);
  }
  50% {
    box-shadow: 5px 5px 20px rgba(180, 255, 255, 1),
                0 0 30px rgba(116, 246, 248, 0.8);
  }
  100% {
    box-shadow: 5px 5px 20px rgba(116, 246, 248, 1),
                0 0 30px rgba(116, 246, 248, 0.6);
  }
}