/* Faz a largura dos elementos incluir o padding e a borda */
* {
    box-sizing: border-box;
}


body {
    background-color: #0b1026;
    color: #f0f0f0;
    font-family: Arial, sans-serif;
}

/* Organiza o cabeçalho do observatório */
.cabecalho {
    /* Centraliza os textos do cabeçalho */
    text-align: center;

    /* Cria espaço dentro do cabeçalho */
    padding: 40px 20px;

    /* Cria espaço abaixo do cabeçalho */
    margin-bottom: 20px;
}

/* Estiliza o título principal do observatório */
.cabecalho h1 {
    /* Aumenta o tamanho das letras */
    font-size: 36px;

    /* Remove a margem superior padrão do título */
    margin-top: 10px;

    /* Controla o espaço abaixo do título */
    margin-bottom: 15px;

    /* Define uma cor clara com um leve tom azulado */
    color: #e3e9ff;
}

/* Estiliza a pequena assinatura acima do título */
.assinatura {
    /* Diminui o tamanho do texto */
    font-size: 12px;

    /* Aumenta o espaço entre as letras */
    letter-spacing: 3px;

    /* Usa um tom dourado discreto */
    color: #c9ad75;
}

/* Estiliza as seções principais do observatório */
main section {
    /* Cria espaço interno entre o conteúdo e as bordas */
    padding: 24px;

    /* Adiciona espaço entre uma seção e outra */
    margin: 20px;

    /* Define um fundo um pouco mais claro que o céu */
    background-color: #141b35;

    /* Arredonda os cantos dos painéis */
    border-radius: 12px;
}

/* Estiliza os títulos das seções */
main section h2 {
    /* Separa o título do conteúdo abaixo */
    margin-bottom: 12px;

    /* Usa um tom claro para manter o contraste */
    color: #e3e9ff;
}

/* Destaca a seção de descoberta diária */
#descoberta {
    /* Adiciona uma borda dourada discreta à esquerda */
    border-left: 3px solid #c9ad75;
}

/* Organiza a área principal do observatório */
main {
    /* Impede que o conteúdo fique largo demais */
    max-width: 900px;

    /* Centraliza a área principal na página */
    margin: 0 auto;
}

/* Ajusta o observatório para celulares */
@media (max-width: 600px) {

    /* Diminui o espaço ao redor do cabeçalho */
    .cabecalho {
        padding: 30px 12px;
    }

    /* Reduz o título para caber em telas estreitas */
    .cabecalho h1 {
        font-size: 28px;
    }

    /* Diminui o espaço externo dos painéis */
    main section {
        margin: 12px 8px;

        /* Reduz o espaço interno dos painéis */
        padding: 18px;
    }

}

/* Melhora a leitura dos textos dentro dos painéis */
main section p {
    /* Aumenta o espaço entre as linhas */
    line-height: 1.6;

    /* Usa um tom mais suave para os textos */
    color: #c8cee5;
}

/* Estiliza os subtítulos, como "Seu próximo destino" */
main section h3 {
    /* Dá aos subtítulos um tom dourado discreto */
    color: #c9ad75;

    /* Cria espaço abaixo do subtítulo */
    margin-bottom: 10px;
}

/* Organiza o rodapé do observatório */
footer {
    /* Centraliza o texto */
    text-align: center;

    /* Cria espaço interno */
    padding: 25px 15px;

    /* Usa uma cor discreta */
    color: #9ba5c6;

    /* Deixa o texto um pouco menor */
    font-size: 13px;
}

/* Controla o espaço entre as linhas do rodapé */
footer p {
    margin: 6px 0;
}

/* Área onde ficará o mapa do céu */
#ceu-estrelado {
    /* Define uma área com altura suficiente para explorar */
    height: 300px;

    /* Ocupa toda a largura disponível */
    width: 100%;

    /* Cria espaço entre a borda e o conteúdo */
    padding: 15px;

    /* Define um fundo mais escuro, como o espaço */
    background-color: #080d1c;

    /* Arredonda os cantos do céu */
    border-radius: 10px;

    /* Permite posicionar estrelas em pontos específicos */
    position: relative;

    /* Evita que estrelas ultrapassem os limites da área */
    overflow: hidden;
}

/* Aparência básica de cada estrela interativa */
.estrela {
    background-color: transparent;
    border: none;
    padding: 0;
    appearance: none;

    color: #fff4c2;
    font-size: 20px;
    text-shadow: 0 0 8px #f5d98b;

    position: absolute;
    transform: translate(-50%, -50%);

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
}
.estrela:hover{
    transform: translate(-50%, -50%)scale(1.4);
}
.estrela:focus-visible{
    outline: 2px solid #c9ad75;
    outline-offset: 5px;
}

/* Animação suave de cintilação */
@keyframes cintilar {
    0%, 100% {
        opacity: 0.5;
        filter: brightness(0.7);
        text-shadow: 0 0 4px #fff4c2;
    }

    50% {
        opacity: 1;
        filter: brightness(2);
        text-shadow: 0 0 18px #fff4c2;
    }
}

/* Aplica a animação às estrelas */
.estrela {
    animation: cintilar 3s ease-in-out infinite;
}