@keyframes slide {
    0% {
        transform: translateX(-25%);
    }

    100% {
        transform: translateX(25%);
    }
}

.fsh-wasm {
    animation: slide 3s ease-in-out infinite alternate;
    bottom: 0;
    left: -50%;
    opacity: .5;
    position: fixed;
    right: -50%;
    top: 0;
    z-index: -1
}

.fsh-wasm-cont {
    left: 50%;
    padding: 10vmin;
    position: fixed;
    text-align: center;
    top: 40%;
    transform: translate(-50%, -50%)
}

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 50vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress rect {
        fill: none;
        stroke: #27272f;
        stroke-width: 0.6rem;
    }

    .loading-progress path {
        fill: none;
        stroke: #00AFB5;
        stroke-width: 0.6rem;
        stroke-dasharray: var(--blazor-load-percentage, 0), 100;
        transition: stroke-dasharray 0.05s ease-in-out;
    }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(50vh + 3.5rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }