/* Configurações básicas */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    /* *** NOVO: Cor de fundo mais combinando (azul escuro) *** */
    background-color: #2F4F7F; /* Um azul marinho escuro, quase oceano */
    /* OU experimente: background-color: #4682B4; (azul aço) */
    /* OU experimente: background-color: #5F9EA0; (azul cadete) */
    /* OU experimente: background-color: #1a1a1a; (cinza muito escuro) */
    overflow: hidden;
}

/* Container para a área de visualização */
.container-baleia {
    width: 512px;
    height: 512px;
    overflow: hidden;
    /* *** REMOVIDO: A borda não existe mais *** */
    /* border: 2px solid #ffffff; */ /* Comentei ou deletei esta linha */
}

/* O elemento com a imagem e a animação */
.baleia-animada {
    background-image: url('cetaceo-pixel.webp'); 
    background-size: cover;
    width: 100%;
    height: 100%;

    animation: pulo-baleia 3s infinite alternate ease-in-out;
}

/* Definição da Animação (Keyframes) */
@keyframes pulo-baleia {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0);
    }
}