*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font: 400 14px/1.5 var(--mw-font);
    color: var(--mw-text);
    background: var(--mw-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    margin: 0;
    color: var(--mw-text);
    letter-spacing: -.01em;
}

p {
    margin-top: 0;
}

a {
    color: var(--mw-primary-text);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1:focus {
    outline: none;
}

code,
.mono {
    font-family: var(--mw-mono);
    font-size: 12.5px;
}

code {
    background: var(--mw-surface-2);
    border: 1px solid var(--mw-border);
    border-radius: 4px;
    padding: 1px 6px;
}

pre code {
    background: none;
    border: none;
    padding: 0;
}

.num {
    font-variant-numeric: tabular-nums;
}

:focus-visible {
    outline: 2px solid var(--mw-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

[hidden] {
    display: none !important;
}

/* Framework form-validation hooks (Blazor's own class names). */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--mw-success);
}

.invalid {
    outline: 1px solid var(--mw-danger);
}

.validation-message {
    color: var(--mw-danger);
}

.blazor-error-boundary {
    background: var(--mw-danger);
    padding: 1rem 1rem 1rem 1.5rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}