body {
    max-width: 600px; /* opcional: limitar largura em telas grandes */
    margin: 0 auto;   /* centraliza o conteúdo */
    padding: 0 10px;  /* evita que o conteúdo encoste nas bordas do celular */
    height: 100vh;
    display: grid;
    place-items: center;
    /*background: radial-gradient(circle at center, #254daa, #0f172a);*/
    background: radial-gradient(circle at center, #0f172a, #020617);
    overflow: hidden;
}

.DivTop {
    position:absolute; 
    z-index:2;
    top:0%; 
    height:30%;
    width:100%; 
} 
.DivTop-H1 {
    font-family:Arial, Helvetica, sans-serif; 
    font-size:50pt;
    color:rgba(240,255,255,1);
    text-align: center;
    z-index:2;
}

.DivCenter {
    position:absolute;
    z-index:2;
    top:31%;
    width:100%;
}

.DivCenter-H2 {
    font-family:Arial, Helvetica, sans-serif;
    font-size:25pt;
    color:rgba(240,255,255,1);
    text-align: center;
    z-index:2;
}

/* container dos círculos */
.circles {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
}

/* estilo base dos círculos */
.circles span {
    position: absolute;
    display: block;
    border-radius: 70%;
    background: rgba(19, 44, 73, 0.39);
    animation: float 10s linear infinite,
            glow 2s ease-in-out infinite alternate;
}

/* animação de movimento */
@keyframes float {
    0% {
        transform: translateY(100vh) scale(0.5);
    }
    100% {
        transform: translateY(-10vh) scale(1);
    }
}

/* animação de brilho (cintilar) */
@keyframes glow {
    0% {
        opacity: 0.2;
        box-shadow: 0 0 5px rgba(9, 44, 73, 0.39);
    }
    100% {
        opacity: 1;
        box-shadow: 0 0 30px rgb(0, 140, 255);
    }
}

/* círculos horizontais */
.horizontal {
    position: absolute;
    z-index: 1;
    width: 20px;
    height: 10px;
    border-radius: 50%;
    background: rgba(0,200,255,0.8);
    box-shadow: 0 0 5px rgba(0,200,255,0.8);
    animation: moveX 30s linear 1s backwards infinite,
            glow 0.1s ease-in-out 0s infinite alternate;
}

/* movimento horizontal */
@keyframes moveX {
    /* começa fora da tela */
    0% {
        transform: translateX(calc(-100vw - 100%));
        opacity:0;
    }

    /* movimento acontece só no começo (1s ≈ 16%) */
    18.18% {
        transform: translateX(calc(300vw + 100%));
        opacity:1;
    }

    /* fica parado fora da tela por 5s */
    100% {
        transform: translateX(calc(300vw + 100%));
        opacity:0;
    }
}