@font-face {
    font-family: "Sora";
    src: url("fonts/Sora-Variable.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
}

:root {
    --soundmusi-font-family: "Sora", "Segoe UI", sans-serif;
}

html,
body,
button,
input,
select,
textarea,
.mud-typography,
.mud-button-root,
.mud-chip,
.mud-nav-link,
.mud-list-item,
.mud-tab {
    font-family: var(--soundmusi-font-family);
}

h1:focus {
    outline: none;
}

.app-loading {
    min-height: 100vh;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 1rem;
    color: #4338ca;
}

.app-loading-mark {
    width: 3rem;
    height: 3rem;
    border: 4px solid rgba(67, 56, 202, 0.16);
    border-top-color: #4338ca;
    border-radius: 50%;
    animation: app-loading-spin 0.8s linear infinite;
}

@keyframes app-loading-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-loading-mark {
        animation: none;
    }
}

.legal-title {
    overflow-wrap: anywhere;
    font-size: clamp(2rem, 8vw, 3rem) !important;
    line-height: 1.12 !important;
}

.legal-page code {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.mud-drawer.navigation-drawer {
    border-right: 1px solid rgba(68, 53, 177, 0.1);
    background:
        radial-gradient(circle at 8% 10%, rgba(0, 202, 222, 0.1), transparent 28%),
        radial-gradient(circle at 92% 88%, rgba(168, 38, 231, 0.08), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #f8f8ff 100%);
}

#blazor-error-ui {
    background: #fff3cd;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    color: #664d03;
    display: none;
    left: 0;
    padding: 0.75rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
}