body {
   margin: 0;
   padding: 0;
 }
 .splash-screen {
   position: absolute;
   z-index: 1000;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   font-family: Helvetica, 'sans-serif';
   background-color: #fff;
   color: #5e6278;
   line-height: 1;
   font-size: 14px;
   font-weight: 400;
 }
 .splash-screen span {
   color: #5e6278;
   transition: none !important;
   text-size-adjust: 100%;
   -webkit-font-smoothing: antialiased;
 }
 .splash-screen img {
   margin-left: calc(100vw - 100%);
   margin-bottom: 30px;
   height: 30px !important;
 }
 [data-bs-theme='dark'] .splash-screen {
   background-color: #151521;
   color: #92929f;
 }
 [data-bs-theme='dark'] .splash-screen span {
   color: #92929f;
 }
 .arc {
   position: absolute;
   margin: auto;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   width: 100px;
   height: 100px;
   border-radius: 50%;
   border-top: 2px solid #82017F;
   border-left: 1px solid transparent;
   border-right: 1px solid transparent;
   animation: rt 2s infinite linear;
 }
 .arc::before {
   content: "";
   position: absolute;
   margin: auto;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   width: 70px;
   height: 70px;
   border-radius: 50%;
   border-top: 2px solid #91468f;
   border-left: 1px solid transparent;
   border-right: 1px solid transparent;
   animation: rt 4s infinite linear reverse;
 }
 .arc::after {
   content: "";
   position: absolute;
   margin: auto;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   width: 0;
   height: 0;
   border-radius: 50%;
   border-top: initial;
   border-left: initial;
   border-right: initial;
   animation: cw 1s infinite;
   background: #def2ea;
 }
 .splash-h1 {
   position: absolute;
   height: 40px;
   margin: auto;
   top: 200px;
   left: 0;
   right: 0;
   bottom: 0;
   text-transform: capitalize;
   text-align: center;
   letter-spacing: 0.1em;
   font-size: 14px;
   font-weight: 600;
   color: #000;
 }
 .splash-h1 span {
   display: none;
 }
 .splash-h1::after {
   animation: txt 5s infinite;
   content: "";
 }
 @keyframes rt {
   100% {
     transform: rotate(360deg);
   }
 }
 @keyframes cw {
   0% {
     width: 0;
     height: 0;
   }
   75% {
     width: 25px;
     height: 25px;
   }
   100% {
     width: 0;
     height: 0;
   }
 }
 @keyframes txt {
   0% {
     content: "Loading.";
   }
   50% {
     content: "Loading..";
   }
   100% {
     content: "Loading...";
   }
 }