body {
  margin: 0;
}

html {
  overflow-x: hidden;
  overflow-y: scroll;
}

#loading-bg {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--initial-loader-bg, #fff);
  block-size: 100%;
  gap: 1rem 0;
  inline-size: 100%;
}

.loading-logo {
  position: relative;
}
.loader {
  position: absolute;
  top: 33%;
  left: 45%;
  --c1: #F77825;
  --c2: #D3CE3D;
  --c3: #60B99A;
  --c4: #554236;
  width: 60px;
  height: 30px;
  aspect-ratio: 8/5;
  --_g: no-repeat radial-gradient(#000 68%,#0000 71%);
  -webkit-mask: var(--_g),var(--_g),var(--_g);
  -webkit-mask-size: 25% 50%;
  background: conic-gradient(var(--c1) 50%,var(--c2) 0) no-repeat, conic-gradient(var(--c3) 50%,var(--c4) 0) no-repeat;
  background-size: 200% 50%;
  animation: back 3s infinite steps(1), load 1.5s infinite linear;
}

@keyframes load {
  0%   {-webkit-mask-position: 0% 0%  ,50% 0%  ,100% 0%  }
  12.5%{-webkit-mask-position: 0% 50% ,50% 0%  ,100% 0%  }
  25%  {-webkit-mask-position: 0% 100%,50% 50% ,100% 0%  }
  37.5%{-webkit-mask-position: 0% 100%,50% 100%,100% 50% }
  50%  {-webkit-mask-position: 0% 100%,50% 100%,100% 100%}
  62.5%{-webkit-mask-position: 0% 50% ,50% 100%,100% 100%}
  75%  {-webkit-mask-position: 0% 0%  ,50% 50% ,100% 100%}
  87.5%{-webkit-mask-position: 0% 0%  ,50% 0%  ,100% 50% }
  100% {-webkit-mask-position: 0% 0%  ,50% 0%  ,100% 0%  }
}
@keyframes back {
  0%,
  100%{background-position: 0%   0%,0%   100%}
  25% {background-position: 100% 0%,0%   100%}
  50% {background-position: 100% 0%,100% 100%}
  75% {background-position: 0%   0%,100% 100%}
}