:root {
  --animation-speed: 0.8;
}

        

        .initial-loader {
            pointer-events: none;
            align-items: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background-color: #000;
            height: 100%;
            position: fixed;
            top: 0;
            width: 100%;
            user-select: none;
        }

        .part {
            position: relative;
            width: 136px;
        }

        #id1,
        #id2,
        #id3,
        #id4 {
            width: 100%;
            transform-origin: center center;
        }

        #id2,
        #id3,
        #id4 {
            position: absolute;
            left: 0;
            top: 0;
        }

        #id1 {
            animation: id1Anim calc(5.217s / var(--animation-speed)) normal infinite forwards;
            filter: hue-rotate(0deg);
        }

        #id2 {
            animation: id2Anim calc(5.217s / var(--animation-speed)) normal infinite forwards;
            filter: hue-rotate(0deg);
            /* transform-origin: 50% 50%; */
        }

        #id3 {
            animation: id3Anim calc(5.217s / var(--animation-speed)) normal infinite forwards;
        }

        #id4 {
            animation: id4Anim calc(5.217s / var(--animation-speed)) normal infinite forwards;
        }

        @keyframes id1Anim {
            0% {
                filter: hue-rotate(0deg);
                transform: scale(1.3);
                opacity: 0;
            }

            7.99% {
                opacity: 1;
            }

            19.17% {
                filter: hue-rotate(0deg);
                transform: scale(1);
                opacity: 1;
            }

            23.32% {
                filter: hue-rotate(0deg);
                opacity: 1;
            }

            48.88% {
                filter: hue-rotate(-360deg);
                opacity: 1;
            }

            74.44% {
                filter: hue-rotate(-720deg);
                opacity: 1;
            }

            100% {
                filter: hue-rotate(-1080deg);
                opacity: 1;
            }
        }

        @keyframes id2Anim {
            0% {
                filter: hue-rotate(0deg);
                transform: rotate(-30deg);
                opacity: 0;
                scale: 0;
            }

            4.15% {
                transform: rotate(-30deg);
                opacity: 0;
                scale: 0;
            }

            23.32% {
                filter: hue-rotate(0deg);
                transform: rotate(0deg);
                opacity: 1;
                scale: 1;
            }

            48.88% {
                filter: hue-rotate(-360deg);
            }

            74.44% {
                filter: hue-rotate(-720deg);
            }

            100% {
                filter: hue-rotate(-1080deg);
            }
        }

        @keyframes id3Anim {
            0% {
                transform: scale(1.3) translate(-10px, 10px);
                opacity: 0;
            }

            7.35% {
                transform: scale(1.3) translate(-10px, 10px);
                opacity: 0;
            }

            16.93% {
                transform: scale(1) translate(0, 0);
                opacity: 1;
            }

            100% {
                transform: scale(1) translate(0, 0);
                opacity: 1;
            }
        }

        @keyframes id4Anim {
            0% {
                transform: scale(1.3) translateX(10px);
                opacity: 0;
            }

            13.74% {
                transform: scale(1.3) translateX(10px);
                opacity: 0;
            }

            23.32% {
                transform: scale(1) translateX(0);
                opacity: 1;
            }

            100% {
                transform: scale(1) translateX(0);
                opacity: 1;
            }
        }
.initial-loader {
  z-index: 99999;
  left: 0;
  opacity: 1;
  transition: opacity .35s ease;
}
.initial-loader.hide {
  opacity: 0;
}
.initial-loader .boot-tip {
  margin-top: 18px;
  color: #9aa;
  font-size: 13px;
  letter-spacing: .5px;
}