.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;
    --color-2: #ff3d00;
    --size: 1px;

    display: block;
    position: relative;
    height: calc(12 * var(--size));
    width: 180px;
    border: calc(1 * var(--size)) solid var(--color-1);
    border-radius: calc(10 * var(--size));
    overflow: hidden;
}
.loader:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: var(--color-2);
    animation: 4.1s prog ease-in forwards;
}

@keyframes prog {
    to {
        width: 100%;
    }
}