html[data-auth-loading] #__docusaurus {
  visibility: hidden;
}

html[data-auth-loading] body {
  overflow: hidden;
}

html[data-auth-loading] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  background:
    radial-gradient(circle at 20% 20%, rgba(33, 206, 178, 0.14), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(33, 206, 178, 0.1), transparent 42%),
    #ffffff;
}

html[data-auth-loading] body::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: 54px;
  height: 54px;
  margin-left: -27px;
  margin-top: -27px;
  border-radius: 50%;
  border: 4px solid rgba(33, 206, 178, 0.25);
  border-top-color: #21ceb2;
  box-shadow: 0 0 0 6px rgba(33, 206, 178, 0.08);
  z-index: 9999;
  animation: authLoaderSpin 0.9s linear infinite;
}

@keyframes authLoaderSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}