.nav-bar, .nav-bar-padder.scrolled {
  height: var(--nav-bar-height);
  padding: 1rem;
}
.nav-bar-padder {
  height: 0;
  padding: 0rem;
}
.nav-bar-padder, .nav-bar-padder.scrolled {
  transition: none;
  box-sizing: border-box;
}
body.light .nav-bar {
  background: white;
  color: black;
  border-bottom: 8px solid transparent;
}
body.light .nav-bar.scrolled {
  background: hsla(var(--base-hue), 80%, 95%, 60%);
  border-bottom: none;
}
body.light .nav-bar a {
  color: black;
}
body.light .nav-bar a:hover {
  color: hsl(var(--base-hue), 100%, 35%);
}
body.light .nav-bar .left.mobile-only button g {
  fill: black;
}
.nav-bar {
  box-sizing: border-box;
  backdrop-filter: blur(15px);
  transition: 200ms;
}
.nav-bar.scrolled {
  position: fixed;
  width: 100%;
  z-index: 10;
  background: rgba(0, 0, 0, 0.4666666667);
  animation: 400ms slide-down forwards;
  animation-timing-function: var(--default-animation-timing-function);
}
.nav-bar .left {
  max-width: 50%;
}
.nav-bar .left.desktop-only {
  margin-left: 2rem;
}
.nav-bar .left.mobile-only button {
  background-color: transparent;
  box-shadow: none;
}
.nav-bar .left.mobile-only button g {
  fill: white;
}
.nav-bar .left a {
  color: white;
  font-weight: bold;
}
.nav-bar .left a:hover {
  color: hsl(var(--base-hue), 90%, 70%);
}
.nav-bar .left img {
  height: 35px;
}
.nav-bar a {
  color: white;
}
.nav-bar a:hover {
  color: hsla(var(--base-hue), 100%, 70%);
  font-size: 1.04rem;
}
.nav-bar a[href=login] button {
  filter: saturate(0);
}
.nav-bar a[href=Dashboard] > div {
  font-weight: bold;
  text-shadow: 0 2px 3px black;
  padding: 0.5rem;
  border-radius: 0.9rem;
  --highlight: hsl(var(--base-hue), 70%, 70%);
  border: 4px solid var(--highlight);
  font-size: 1.4rem;
  scale: 0.92;
}
.nav-bar a[href=Dashboard] > div, .nav-bar a[href=Dashboard] > div * {
  transition: 200ms;
  transition-timing-function: var(--default-animation-timing-function);
}
.nav-bar a[href=Dashboard] > div svg {
  --size: 1.60rem;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.5333333333));
}
.nav-bar a[href=Dashboard] > div svg path {
  fill: rgba(255, 255, 255, 0.6666666667);
}
.nav-bar a[href=Dashboard] > div:hover {
  --highlight: hsl(var(--base-hue), 85%, 80%);
  color: #333;
  background-color: var(--highlight);
  text-shadow: none;
  scale: 0.94;
  border-radius: 3rem;
}
.nav-bar a[href=Dashboard] > div:hover svg {
  --size: 2.0rem;
}
.nav-bar a[href=Dashboard] > div:hover svg path {
  fill: rgba(0, 0, 0, 0.4666666667);
}
.nav-bar .right.admin-pic {
  position: relative;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 1rem;
}
.nav-bar .right.admin-pic:hover {
  background-color: rgba(0, 0, 0, 0.0666666667);
}
.nav-bar .right.admin-pic > span {
  font-weight: bold;
  font-size: 1.25rem;
  letter-spacing: 0.01rem;
}
.nav-bar .right.admin-pic > img {
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
}
.nav-bar .right > a button {
  font-weight: bold;
}
.nav-bar .user-info {
  position: relative;
  --size: 3rem;
}
.nav-bar .user-info > button {
  background: #333;
  border-radius: 50%;
  width: var(--size);
  height: var(--size);
}
.nav-bar .user-info .info-dashboard {
  position: absolute;
  right: 0;
  top: calc(var(--size) + 15px);
  padding: 1rem;
  background: hsla(var(--base-hue), 40%, 50%, 45%);
  border-radius: 1rem;
  backdrop-filter: blur(10px);
  width: clamp(275px, 30vw, 600px);
  animation: 300ms fade-up forwards;
  animation-timing-function: var(--default-animation-timing-function);
  --fade-up-to: calc(var(--size) + 15px);
  --fade-up-from: var(--size);
}
.nav-bar .user-info .info-dashboard > * {
  width: 100%;
}
.nav-bar .user-info .info-dashboard .semi-pill {
  align-items: stretch;
  gap: 4px;
}
.nav-bar .user-info .info-dashboard .semi-pill * {
  font-weight: bold;
}
.nav-bar .user-info .info-dashboard .semi-pill button {
  border-radius: 0;
}
.nav-bar .user-info .info-dashboard .semi-pill a button {
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  padding: 1rem;
}
.nav-bar .user-info .info-dashboard .semi-pill > button {
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}
div.page-pop-up .account-pop-up {
  position: absolute;
  animation: 0.25s fade-up forwards;
  opacity: 0;
  --fade-up-from: calc(100% + 2rem);
  --fade-up-to: calc(100% + 0rem);
  padding: 1rem;
  border-radius: 1rem;
  background: hsla(var(--base-hue), 100%, 90%, 70%);
  margin-top: 0.7rem;
  border-top-right-radius: 0;
  margin-right: 1rem;
  width: max-content;
}
div.page-pop-up .account-pop-up button {
  background: hsl(var(--base-hue), 100%, 85%);
  color: black;
  font-weight: bold;
}
div.page-pop-up .account-pop-up button:hover {
  scale: 1.1;
  border: transparent;
}