#popup-display:not(.display-none) {
  position: fixed;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* True centering */
  width: 100%;
  height: auto;
  max-height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#popup-display {
  z-index: 101;
}

#popup-container {
  position: relative; /* For absolute positioning of error message */
  width: clamp(70%, 70%, 900px);
  background: var(--menu-color);
  border: clamp(1px, calc(var(--screenScalingFactor) * 5px), 3px) solid var(--menu-border-color);
  border-radius: calc(var(--screenScalingFactor) * 50px);
  height: auto;
  z-index: 101;
}

#popup-exit-button {
  position: absolute;
  top: calc(var(--screenScalingFactor) * 40px);
  right: calc(var(--screenScalingFactor) * 40px);
  height: calc(var(--screenScalingFactor) * 25px);
  width: auto;
  object-fit: contain;
}

#popup-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: calc(var(--screenScalingFactor) * 125px);
  padding: calc(var(--screenScalingFactor) * 75px) calc(var(--screenScalingFactor) * 75px) calc(var(--screenScalingFactor) * 40px) calc(var(--screenScalingFactor) * 75px);
  overflow: auto;
}

#popup-message {
  font-size: calc(var(--screenScalingFactor) * 40px);
  font-variant: small-caps;
  white-space: pre-wrap;
  text-align: center;
  padding-left: 0;
  padding-right: 0;
}

.popup-message-style {
  color: var(--popup-message-color);
}

.popup-error-style {
  color: var(--popup-error-color);
}