.NavigationBar {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  --nav-bg: black;
  --nav-text: #222;
  background-color: var(--nav-bg);
  color: var(--nav-text);
  padding-left: 10%;
  padding-right: 10%;
  width: 100%;
  margin-bottom: 1em;
}

@media (prefers-color-scheme: dark) {
  .NavigationBar {
    --nav-bg: #181818;
    --nav-text: #fff;
  }

  .NavigationBar .NavButton {
    color: var(--nav-text);
  }
}

/* Make the Link wrapper transparent to layout so the inner <button> keeps its exact styling */
.NavigationBar .NavButtonLink {
  display: contents;
}

/* Target the .NavButton class (applies to the <button> inside the Link) */
.NavigationBar .NavButton {
  height: 2.5em;
  width: 10%;
  font-size: 2vh;
  border: none;
  --nav-bt-bg: transparent;
  --nav-bt-text: white;
  color: var(--nav-bt-text);
  background-color: var(--nav-bt-bg);
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s ease-in-out;
  margin-right: 1em;
}

.NavigationBar .NavButton:hover {
  transform: scale(1.1);
}

/* Logged-in username: matches NavButton styling but no hover pop */
.NavigationBar .NavUser {
  margin-left: auto;
  height: 2.5em;
  font-size: 2vh;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.popupModalOverlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 30, 30, 0.35);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.popupModalContent {
  background: white;
  border-radius: 0.7em;
  border: 0.15em solid black;
  width: min(45vw, 600px);
  min-width: 320px;
  max-width: 90vw;
  padding: 1rem;
  box-sizing: border-box;
}

.popupModal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* TODO: make close button universal */
.close-button {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  color: black;
}

.popupModal-body p {
  border: 0.15em solid black;
  border-radius: 0.3em;
  padding: 0.75rem;
  margin-top: 1rem;
}

/*# sourceMappingURL=403ad54899c1da0f.css.map*/