html, body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

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

        .loading-progress circle:last-child {
            stroke: #2563eb;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8);
            transition: stroke-dasharray 0.05s ease-in-out;
        }

#blazor-error-ui {
    display: none;
}

.logo img {
    max-height: 40px;
    width: auto;
}

@media (max-width: 640px) {
    .logo img {
        max-height: 32px;
    }
}

/* Usunięcie obwódki z elementów nagłówkowych */
h1, h2, h3, h4, h5, h6 {
    outline: none;
}

/* Ogólna reguła dla usunięcia obwódki fokusa dla wszystkich elementów */
*:focus {
    outline: none !important;
}

/* Alternatywnie, możesz zastosować tę regułę tylko do nagłówka w sekcji hero */
.bg-blue-600 h1 {
    outline: none;
}

@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    h1, h2, h3 {
        hyphens: auto;
    }

    section {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
}

@media (max-width: 640px) {
    #how-it-works .container > div {
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }

    .logo + div a {
        width: 40px;
        height: 40px;
    }

        .logo + div a img {
            width: 1.25rem;
            height: 1.25rem;
        }
}

@media (max-width: 480px) {
    h2 {
        font-size: 1.75rem;
    }
}