:root {
  --bg-color: #232526;
  --bg-color2: #414345;
  --jb-color1: #4776e6;
  --jb-color2: #8e54e9;
}

html {
  /* background: var(--bg-color); */
  /* fallback for old browsers */
  /* background: -webkit-linear-gradient(to right, var(--bg-color), var(--bg-color2)); */
  /* Chrome 10-25, Safari 5.1-6 */
  /* background: linear-gradient(to right, var(--bg-color), var(--bg-color2)); */
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.os-init-page-loading {
  position: absolute;
  top: calc(50% - 100px);
  left: calc(50% - 50px);
  width: 88px;
  height: 88px;
  border-radius: 50%;
  perspective: 800px;
}

.os-init-page-loading>h1 {
  position: absolute;
  width: 250px;
  top: 100px;
  right: -120px;
  font-size: 24px;
  font-weight: bolder;
  background: linear-gradient(0deg, var(--jb-color1) 0%, var(--jb-color2) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.os-init-page-loading .inner {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.os-init-page-loading .inner.one {
  left: 0%;
  top: 0%;
  animation: rotate-one 1s linear infinite;
  border-bottom: 3px solid var(--jb-color2);
}

.os-init-page-loading .inner.two {
  right: 0%;
  top: 0%;
  animation: rotate-two 1s linear infinite;
  border-right: 3px solid var(--jb-color1);
}

.os-init-page-loading .inner.three {
  right: 0%;
  bottom: 0%;
  animation: rotate-three 1s linear infinite;
  border-top: 3px solid var(--jb-color2);
}

@keyframes rotate-one {
  0% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }

  100% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}

@keyframes rotate-two {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }

  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}

@keyframes rotate-three {
  0% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }

  100% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}