html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion) {
    html {
        scroll-behavior: auto;
    }
}

@media (max-width: 599px) {
    html {
        scroll-padding-top: calc(var(--mud-appbar-height) - var(--mud-appbar-height)/8);
    }
}

.loading-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.loading-progress {
    position: relative;
    width: clamp(120px, 30vw, 160px);
    aspect-ratio: 1 / 1;
}

    .loading-progress svg {
        width: 100%;
        height: 100%;
        display: block;
    }

    .loading-progress circle {
        fill: none;
        stroke-width: 4;
        transform: rotate(-90deg);
        transform-origin: 50% 50%;
    }

    .loading-progress .background {
        stroke: #e0e0e0;
    }

    .loading-progress .foreground {
        stroke: black;
        stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
        transition: stroke-dasharray 0.05s ease-in-out;
    }

.loading-progress-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    object-fit: contain;
    transform: translate(-50%, -54%);
    pointer-events: none;
}