body {
    /* (d) Define a largura e altura da tela e remove margens padrão */
    width: 100vw;
    height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center; /* Centraliza o container na horizontal */
    align-items: center; /* Centraliza o container na vertical */
    background-color: #f0f0f0; /* Cor de fundo suave */
    overflow: hidden; /* Garante que nada fora do body seja visível */
}

#screen-container {
    /* Define a área visível do letreiro */
    width: 80vw; /* 80% da largura da viewport como "tela" do letreiro */
    height: 150px;
    border: 3px solid #0056b3; /* Borda para visualização da "tela" */
    background-color: #ffffff;
    position: relative; /* Essencial para que o letreiro filho (marquee) se posicione em relação a ele */
    overflow: hidden; /* (d) Oculta o texto quando ele estiver fora desta área */
}

#marquee {
    /* O letreiro em si */
    /* (f) Define o alinhamento do texto (em torno do letreiro) - Aqui ele preenche o letreiro */
    /* (e) Determina o espaço livre em torno do letreiro (interno) */
    padding: 20px;
    
    /* Estilização do texto (c) Frase motivacional */
    font-family: 'Arial', sans-serif;
    font-size: 32px;
    font-weight: bold;
    color: #cc0000;
    white-space: nowrap; /* Impede que o texto quebre linha */
    text-align: center; /* (f) Alinhamento do texto interno */

    /* Posicionamento inicial para o JS animar */
    position: absolute;
    top: 50%; /* Alinha o topo do letreiro ao meio do container */
    transform: translateY(-50%); /* Ajusta para centralizar verticalmente */

    /* (b) Inicia fora da esquerda da "tela" */
    left: 100%; 
}

/* ... seu código CSS anterior ... */

#screen-container {
    /* Mantenha as configurações existentes */
    width: 80vw;
    height: 150px;
    border: 3px solid #0056b3; 
    background-color: #ffffff;
    position: relative; 
    overflow: hidden; 
    
    /* ADICIONE flexbox para que a imagem fique embaixo, mantendo a altura total. */
    /* Para que o letreiro #marquee fique sobre a imagem, o #marquee precisa continuar com position: absolute */
}

/* Novo estilo para a imagem */
#banner-image {
    /* Para que a imagem fique no fundo do container, sob o letreiro */
    position: absolute;
    bottom: 0; /* Coloca a imagem na parte inferior */
    left: 0;
    width: 100%; /* Faz a imagem preencher a largura do container */
    max-height: 100%; /* Garante que a imagem não ultrapasse a altura do container */
    object-fit: cover; /* Recorta a imagem para cobrir toda a área sem distorção */
    z-index: 0; /* Garante que a imagem fique por baixo do letreiro (z-index padrão do #marquee é 1) */
}

#marquee {
    /* Mantenha as configurações existentes */
    padding: 20px;
    /* ... outros estilos ... */
    
    position: absolute;
    top: 50%; 
    transform: translateY(-50%); 
    left: 100%; 
    
    /* ADICIONE z-index para garantir que o texto animado fique acima da imagem */
    z-index: 10; 
    background-color: rgba(255, 255, 255, 0.7); /* Adicione um fundo semi-transparente para o texto se destacar sobre a imagem */
}