/* KK Logo + Your Loader Style */

#loader{
    position: fixed;
    inset: 0;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 99999;
    gap: 25px;
}

/* Logo */
#loader img{
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
}

/* Given Loader */
.loader{
   --s: 25px;
   height: calc(var(--s)*0.9);
   width: calc(var(--s)*5);

   --v1:transparent,#f5d000 0.5deg 108deg,#0000 109deg;
   --v2:transparent,#f5d000 0.5deg 36deg,#0000 37deg;

   -webkit-mask:
    conic-gradient(from 54deg at calc(var(--s)*0.68) calc(var(--s)*0.57),var(--v1)),
    conic-gradient(from 90deg at calc(var(--s)*0.02) calc(var(--s)*0.35),var(--v2)),
    conic-gradient(from 126deg at calc(var(--s)*0.5) calc(var(--s)*0.7),var(--v1)),
    conic-gradient(from 162deg at calc(var(--s)*0.5) 0,var(--v2));

   -webkit-mask-size: var(--s) var(--s);
   -webkit-mask-composite: xor,destination-over;
   mask-composite: exclude,add;
   -webkit-mask-repeat: repeat-x;

   background: linear-gradient(#f5d000 0 0) left/0% 100% #222 no-repeat;
   animation: l20 1.2s infinite linear;
}

@keyframes l20{
   90%,100%{
      background-size:100% 100%;
   }
}