#root header a[href="/"] img,
.pb-loading-screen img[alt="Logo"] {
  mix-blend-mode: lighten;
  object-fit: contain;
}

#root header a[href="/"] img {
  height: clamp(2rem, 5vw, 2.75rem) !important;
  max-width: min(200px, 46vw) !important;
}

.pb-loading-screen img[alt="Logo"] {
  height: clamp(2.25rem, 12vw, 3.75rem) !important;
  max-width: min(280px, 72vw) !important;
}

.pb-loading-screen .relative.mb-12 > .absolute.-inset-8 {
  display: none;
}

.pb-loading-screen {
  background-color: #0a0210 !important;
  min-height: 100dvh !important;
  padding:
    max(12px, env(safe-area-inset-top, 0px))
    max(12px, env(safe-area-inset-right, 0px))
    max(12px, env(safe-area-inset-bottom, 0px))
    max(12px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
}

.pb-loading-screen > .absolute.inset-0:first-child {
  display: none !important;
}

.pb-loading-screen .pb-loading-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.pb-loading-screen > .relative.z-10 {
  width: min(100%, 26rem);
  max-width: 100%;
  padding-inline: clamp(12px, 5vw, 24px);
}

.pb-loading-screen .relative.mb-12 {
  margin-bottom: clamp(1.25rem, 6vw, 3rem) !important;
}

.pb-loading-screen .relative.mb-8 {
  margin-bottom: clamp(0.875rem, 4vw, 2rem) !important;
}

.pb-loading-screen .relative.w-12.h-12,
.pb-loading-screen .relative.w-12.h-12 svg {
  width: clamp(2.5rem, 11vw, 3rem) !important;
  height: clamp(2.5rem, 11vw, 3rem) !important;
}

.pb-loading-screen .text-center.space-y-2 {
  width: 100%;
  max-width: min(20rem, 88vw);
}

.pb-loading-screen .text-center.space-y-2 p {
  font-size: clamp(0.875rem, 3.6vw, 1.125rem) !important;
  line-height: 1.35 !important;
}

.pb-loading-screen .text-center.space-y-2 p.text-white\/40 {
  font-size: clamp(0.75rem, 3vw, 0.875rem) !important;
}

.pb-loading-screen .mt-8.w-48 {
  width: min(12rem, 72vw) !important;
  margin-top: clamp(1rem, 4vw, 2rem) !important;
}

@media (max-width: 767px) {
  .pb-loading-screen .absolute.top-1\/3.left-1\/4 {
    width: min(220px, 58vw) !important;
    height: min(220px, 58vw) !important;
  }

  .pb-loading-screen .absolute.bottom-1\/4.right-1\/3 {
    width: min(180px, 48vw) !important;
    height: min(180px, 48vw) !important;
  }
}

@media (max-width: 380px) {
  .pb-loading-screen img[alt="Logo"] {
    max-width: min(200px, 64vw) !important;
  }

  .pb-loading-screen .relative.w-12.h-12,
  .pb-loading-screen .relative.w-12.h-12 svg {
    width: 2.25rem !important;
    height: 2.25rem !important;
  }
}
