#alertButton { /* Estilização para o botão de alerta, representado pela imagem */
    cursor: pointer; /* Define o cursor como uma mãozinha ao passar sobre a imagem para indicar interatividade */
    width: 80%; /* Define largura relativa para a imagem do botão */
    max-width: 300px; /* Limita a largura máxima do botão em 300px */
}

#alertMessage { /* Estilização para a mensagem de alerta */
    display: none; /* Define a mensagem inicialmente oculta */
    position: fixed; /* Posiciona a mensagem fixa na tela */
    top: 20px; /* Define a posição no topo com 20px de margem */
    left: 50%; /* Centraliza horizontalmente */
    transform: translateX(-50%); /* Ajusta a posição horizontal para exatamente o centro da tela */
    padding: 10px 20px; /* Adiciona preenchimento interno de 10px vertical e 20px horizontal para tornar a mensagem maior */
    background-color: red; /* Define a cor de fundo da mensagem como vermelho */
    color: white; /* Define a cor do texto como branco */
    font-weight: bold; /* Deixa o texto em negrito */
    border-radius: 5px; /* Adiciona bordas arredondadas de 5px */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Aplica uma sombra para destacar a mensagem */
    z-index: 1000; /* Garante que a mensagem fique acima de outros elementos na página */
    font-size: 16px; /* Tamanho de fonte adequado para leitura */
    word-wrap: break-word; /* Garante que a mensagem seja quebrada em várias linhas, se necessário */
}

@media (max-width: 600px) { /* Adiciona responsividade para dispositivos menores que 600px */
    #alertMessage {
        font-size: 14px; /* Menor tamanho de fonte em dispositivos menores */
    }
}