@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap");

#preload {
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    font-size: 28px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


#loader {
    width: 90px;
    height: 14px;
    box-shadow: 0 3px 0 var(--g-color-text-primary);
    background: linear-gradient(var(--g-color-text-primary) 0 0) 50%/2px 100% no-repeat;
    display: grid;
  }
#loader:before,
#loader:after{
content: "";
grid-area: 1/1;
background: radial-gradient(circle closest-side, var(--c,var(--g-color-text-primary)) 92%,#0000 ) 0 0/calc(100%/4) 100%;
clip-path: inset(0 50% 0 0);
animation: l3 1s infinite linear;
}
#loader:after{
--c: red; 
clip-path: inset(0 0 0 50%);
}
@keyframes l3 {
    100% {background-position: calc(100%/3) 0}
}