.website-loading {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    min-height: 100vh;
    background: radial-gradient(circle at 20% 10%, rgba(210, 35, 55, 0.28), transparent 55%),
    radial-gradient(circle at 80% 20%, rgba(195, 25, 45, 0.25), transparent 55%),
    radial-gradient(circle at 50% 100%, rgba(155, 20, 35, 0.28), transparent 65%),
    #321014;
    color: var(--accent-main);
    font-size: 1rem;
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
}


.loader {
    --color-1: #fff;
    --size: 0.7px;

    color: var(--color-1);
    position: relative;
    display: inline-block;
    margin-top: calc(40 * var(--size));
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(48 * var(--size));
    letter-spacing: calc(4 * var(--size));
    box-sizing: border-box;
}

.loader::before {
    content: '';
    position: absolute;
    right: calc(69 * var(--size));
    bottom: calc(20 * var(--size));
    height: calc(26 * var(--size));
    width: calc(4 * var(--size));
    background: currentColor;
    box-sizing: border-box;
    animation: animloader1 1s linear infinite alternate;
}

.loader::after {
    content: '';
    width: calc(10 * var(--size));
    height: calc(10 * var(--size));
    position: absolute;
    left: calc(125 * var(--size));
    top: calc(2 * var(--size));
    border-radius: 50%;
    background: red;
    box-sizing: border-box;
    animation: animloader 1s linear infinite alternate;
}

@keyframes animloader {
     0% {
         transform: translate(0, 0) scaleX(1);
     }
     14% {
         transform: translate(calc(-12 * var(--size)), calc(-16 * var(--size))) scaleX(1.05);
     }
     28% {
         transform: translate(calc(-27 * var(--size)), calc(-28 * var(--size))) scaleX(1.07);
     }
     42% {
         transform: translate(calc(-46 * var(--size)), calc(-35 * var(--size))) scaleX(1.1);
     }
     57% {
         transform: translate(calc(-70 * var(--size)), calc(-37 * var(--size))) scaleX(1.1);
     }
     71% {
         transform: translate(calc(-94 * var(--size)), calc(-32 * var(--size))) scaleX(1.07);
     }
     85% {
         transform: translate(calc(-111 * var(--size)), calc(-22 * var(--size))) scaleX(1.05);
     }
     100% {
         transform: translate(calc(-125 * var(--size)), calc(-9 * var(--size))) scaleX(1);
     }
 }

@keyframes animloader1 {
     0% {
         box-shadow: 0 calc(-16 * var(--size)),
         calc(-124.5 * var(--size)) calc(-8 * var(--size));
     }
     25%,
     75% {
         box-shadow: 0 0,
         calc(-124.5 * var(--size)) calc(-8 * var(--size));
     }
     100% {
         box-shadow: 0 0,
         calc(-124.5 * var(--size)) calc(-24 * var(--size));
     }
 }