#loading-bg {
  background: #060d1f;
}

.loading-logo {
  position: absolute;
  inset-block-start: 38%;
  inset-inline-start: calc(50% - 40px);
}

.pre-loading {
  position: absolute;
  box-sizing: border-box;
  border: 3px solid transparent;
  block-size: 55px;
  border-radius: 50%;
  inline-size: 55px;
  inset-block-start: calc(38% + 100px);
  inset-inline-start: calc(50% - 27.5px);
}

.pre-loading .effect-1,
.pre-loading .effect-2,
.pre-loading .effect-3 {
  position: absolute;
  box-sizing: border-box;
  border: 3px solid transparent;
  block-size: 100%;
  border-radius: 50%;
  inline-size: 100%;
}

.pre-loading .effect-1 {
  border-inline-start: 3px solid #00f0ff;
  animation: rotateA 1s ease infinite;
}

.pre-loading .effect-2 {
  border-block-end: 3px solid #a855f7;
  animation: rotateB 1s ease infinite;
}

.pre-loading .effect-3 {
  border-inline-start: 3px solid #10b981;
  animation: rotateA 1s ease infinite reverse;
}

@keyframes rotateA {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes rotateB {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}