/*  Fonte */

@font-face {
    font-family: happy-school;
    src: url('../font/Happy/School.ttf');
}

@font-face {
    font-family:janda-bubble;
    src: url('../font/JandaManateeBubble.ttf');
}
/* Container da galeria de verificação */
#galeria-verificacao {
    margin: 70px 0; /* espaçamento acima e abaixo da galeria */
    background-image:url('../image/fundo-sky.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;

    /*background-color: rgb(24, 5, 77); /* fundo azul-escuro */
}

/* Imagem principal com gradiente escuro sobreposto */
#mainImage {

    background-image: linear-gradient(rgba(0, 0, 0, .9), rgba(17, 65, 85, .8), rgba(0, 0, 0, .8)), url('./image/fundo-sky.png');
    transition: all 0.3s ease; /* transição suave ao alterar propriedades */
}

/* Área de miniaturas (thumbnails) */
#thumbs {
    display: flex; 
    flex-wrap: wrap;         /* permite quebrar linha */
    gap: 10px;               /* espaçamento entre miniaturas */
    justify-content: center; /* centraliza na horizontal */
}

/* Estilo das miniaturas */
.thumb {
    width: 140px;
    height: 80px;
    border: 2px solid transparent; /* borda invisível por padrão */
    border-radius: 8px;            /* cantos arredondados */
    overflow: hidden;              /* esconde partes da imagem que saem da borda */
    cursor: pointer;               /* mostra que é clicável */
}

/* Ajuste da imagem dentro da miniatura */
.thumb img {
    width: 100%;
    height: 100%;
    object-fit:inherit; /* mantém proporção e preenche o espaço */
}

/* Estado da miniatura quando verificada (selecionada) */
.thumb.verificada {
    border-color: #10b981; /* verde (tailwind emerald-500) */
}

/* Texto de progresso */
#progress {
    font-weight: bold;       /* negrito */
    color: rgb(218, 5, 5);   /* vermelho */
    font-size: 16px;         /* tamanho da fonte */
}