body { margin: 0px; }
html { overflow: hidden scroll; }
#loading-bg { position: absolute; display: block; background: var(--initial-loader-bg, #fff); block-size: 100%; inline-size: 100%; }
.loading-logo { position: absolute; inset-block-start: 40%; inset-inline-start: calc(50% - 45px); }
@media (max-width: 500px) {
  .loading-logo { margin-block-start: -3em; }
}
.loading { position: absolute; box-sizing: border-box; border: 3px solid transparent; border-radius: 50%; block-size: 55px; inline-size: 55px; inset-block-start: 50%; inset-inline-start: calc(50% - 35px); }
.loading .effect-1, .loading .effect-2, .loading .effect-3 { position: absolute; box-sizing: border-box; border: 3px solid transparent; border-radius: 50%; block-size: 100%; border-inline-start: 3px solid var(--initial-loader-color, #eee); inline-size: 100%; }
.loading .effect-1 { animation: 1s ease 0s infinite normal none running rotate; }
.loading .effect-2 { animation: 1s ease 0.1s infinite normal none running rotate-opacity; }
.loading .effect-3 { animation: 1s ease 0.2s infinite normal none running rotate-opacity; }
.loading .effects { transition: 0.3s; }
@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(1turn); }
}
@keyframes rotate-opacity {
  0% { opacity: 0.1; transform: rotate(0deg); }
  100% { opacity: 1; transform: rotate(1turn); }
}