body {
  display: grid;
  place-items: center;
  margin: 0;
  height: 100vh;
  overflow: hidden;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.background {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 150vw;
  height: 100vh;
  background: radial-gradient(
      ellipse at 20% 30%,
      color-mix(in srgb, var(--highlight-color) 90%, transparent) 0%,
      rgba(138, 43, 226, 0) 60%
    ),
    radial-gradient(
      ellipse at 80% 50%,
      color-mix(in srgb, var(--second-toolbar-color) 40%, transparent) 0%,
      rgba(0, 191, 255, 0) 70%
    ),
    radial-gradient(
      ellipse at 50% 80%,
      color-mix(in srgb, var(--highlight-second-color) 20%, transparent) 0%,
      rgba(50, 205, 50, 0) 65%
    ),
    linear-gradient(135deg, var(--bs-body-bg) 0%, #0a0520 100%);
  background-blend-mode: overlay, screen, hard-light;
  overflow: hidden;
  animation: aurora-drift 25s infinite alternate ease-in-out;
}
@keyframes aurora-drift {
  0% {
    background-position: 0% 0%, 0% 0%, 0% 0%;
    filter: hue-rotate(0deg) brightness(1);
  }
  50% {
    background-position: -10% -5%, 5% 10%, 0% 15%;
    filter: hue-rotate(30deg) brightness(1.2);
  }
  100% {
    background-position: 5% 10%, -10% -5%, 15% 0%;
    filter: hue-rotate(60deg) brightness(1);
  }
}

.background img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  pointer-events: none;
  opacity: 0.8;
}

.login {
  position: relative;
  z-index: 2;
  background-color: rgba(var(--bs-secondary-bg-rgb), 0.25);
  backdrop-filter: blur(28px) brightness(1.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.75rem;
  padding: 3rem 1.5rem 2rem;
  width: clamp(320px, 66%, 420px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: left;
}

.login form {
  text-align: left;
  width: 90%;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 48px;
  display: flex;
  flex-direction: row-reverse;
}
.login_avatar {
  display: inline-block;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  border: 2px solid white;
  background-size: cover;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  position: absolute;
  top: -64px;
  right: -64px;
  z-index: 1;
}

@media (max-width: 800px) {
  .login_avatar {
    width: 96px;
    height: 96px;
    right: calc(50% - 48px);
    top: 48px;
  }
}