/* Define a fonte padrão para toda a aplicação, conforme importado no HTML */
body {
    font-family: 'Inter', sans-serif;
}

/* Esconde os templates para que não sejam exibidos antes de serem processados pelo JavaScript */
template {
    display: none;
}

/* Animação de fade-in para o conteúdo da página, criando uma transição suave */
.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Estilos para o sistema de alerta customizado. 
   A classe 'transition-transform' e 'transform' junto com 'translate-x-full' 
   permitem a animação de entrada e saída do alerta pela lateral da tela. */
#custom-alert {
    transition: transform 0.3s ease-in-out;
}