#popup .blur-overlay {
  z-index: 9999;
  top: 0;
  left: 0;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}
#popup .popup-container {
  z-index: 999999;
  background-color: var(--background-light);
  border: 2px solid black;
  border-radius: 10px;
  width: clamp(8rem, 50%, 20rem);
  padding: 0.5rem 1rem;
}
#popup .popup-container .button-container {
  padding: 0.5rem;
}
#popup .popup-container .button-container #close-popup-button {
  top: 0.5rem;
  right: 0.5rem;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  line-height: 0;
  padding: 0.5rem;
  border-radius: 7px;
}
#popup .popup-container .button-container #close-popup-button svg path {
  stroke: var(--background-base);
}
#popup .popup-container .button-container #close-popup-button:hover {
  background-color: var(--background-base);
}
#popup .popup-container .button-container #close-popup-button:hover svg path {
  stroke: var(--background-base);
}
#popup .popup-container #popup-header {
  padding-top: 0.5rem;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
}
#popup .popup-container #popup-button {
  margin: 0.5rem;
  width: auto;
  min-height: 2.7rem;
  padding: 0.6rem 0;
  border-radius: 10px;
  font-family: "Inder", sans-serif;
  background-color: var(--accent-base);
  color: var(--text-secondary);
}
#popup .popup-container #popup-button:hover {
  color: var(--accent-base);
  background-color: var(--background-light);
  outline: 2px solid var(--accent-base);
}
@media (max-width: 400px) {
  #popup .popup-container {
    width: clamp(8rem, 80%, 18rem);
  }
}/*# sourceMappingURL=popup.css.map */