/* Paleta e fontes do site inteiro. Tudo usa estas variáveis, então mudar
   uma cor aqui muda o site todo. O site é noturno de propósito (só um tema). */
:root {
    --noite: #0f0b24;
    --noite-2: #1b1440;
    --luz: #ffd27a;
    --rosa: #ff6f91;
    --papel: #fbf5ea;
    --tinta: #3a2329;
    --texto: #f6eefc;
    --texto-suave: #b9aed6;
    --fonte-mao: "Caveat", "Segoe Script", cursive;
    --fonte-titulo: "Fraunces", Georgia, serif;
    --fonte-texto: "Nunito", system-ui, sans-serif;
    color-scheme: dark;
}

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

html, body { margin: 0; }

body {
    min-height: 100dvh;
    background: radial-gradient(ellipse at 50% -10%, var(--noite-2), var(--noite) 60%) fixed;
    color: var(--texto);
    font: 400 1rem/1.6 var(--fonte-texto);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--fonte-titulo); text-wrap: balance; margin: 0; }

/* O Blazor coloca o foco no h1 ao trocar de tela (bom pra leitores de tela),
   mas não precisa mostrar o contorno nesse caso. */
h1:focus { outline: none; }

img { max-width: 100%; }

a { color: var(--luz); }

/* Tela de carregamento, antes do Blazor ligar. */
.carregando {
    min-height: 100dvh;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 8px;
    color: var(--texto-suave);
}

.carregando-coracao {
    font-size: 3rem;
    color: var(--rosa);
    animation: bater 1.1s ease-in-out infinite;
}

@keyframes bater {
    0%, 100% { transform: scale(1); }
    30% { transform: scale(1.18); }
}

#blazor-error-ui {
    background: var(--rosa);
    color: var(--noite);
    bottom: 0;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}