/* Reseteo básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    height: 100%;
    font-family: Arial, sans-serif;
    overflow: hidden;
}

/* Contenedor de estrellas */
.fondo-estrellas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black; /* Fondo oscuro */
    z-index: -1;
}

.fondo-estrellas::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(241, 241, 6, 0.8), transparent),
        radial-gradient(1.5px 1.5px at 40% 70%, rgba(231, 198, 10, 0.89), transparent),
        radial-gradient(1px 1px at 60% 20%, rgba(255, 255, 180, 0.8), transparent),
        radial-gradient(2px 2px at 80% 60%, rgba(226, 226, 13, 0.9), transparent),
        radial-gradient(1px 1px at 90% 10%, rgba(255, 255, 160, 0.7), transparent),
        radial-gradient(2px 2px at 10% 80%, rgba(243, 200, 10, 0.822), transparent),
        radial-gradient(1px 1px at 15% 25%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 25% 85%, rgba(255, 255, 210, 0.9), transparent),
        radial-gradient(1px 1px at 50% 50%, rgba(194, 197, 10, 0.8), transparent),
        radial-gradient(2px 2px at 75% 15%, rgba(231, 161, 11, 0.781), transparent),
        radial-gradient(1.5px 1.5px at 85% 80%, rgba(255, 255, 190, 0.7), transparent),
        radial-gradient(1px 1px at 95% 40%, rgba(255, 255, 160, 0.7), transparent),
        radial-gradient(1px 1px at 12% 12%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 30% 10%, rgba(250, 250, 180, 0.7), transparent),
        radial-gradient(1px 1px at 33% 90%, rgba(241, 220, 90, 0.8), transparent),
        radial-gradient(2px 2px at 70% 25%, rgba(240, 240, 190, 0.9), transparent),
        radial-gradient(1.5px 1.5px at 65% 35%, rgba(255, 255, 160, 0.8), transparent),
        radial-gradient(1px 1px at 95% 95%, rgba(250, 250, 100, 0.7), transparent),
        radial-gradient(2px 2px at 5% 5%, rgba(255, 255, 120, 0.85), transparent),
        radial-gradient(1px 1px at 40% 40%, rgba(243, 243, 120, 0.8), transparent),
        radial-gradient(2px 2px at 55% 75%, rgba(255, 255, 190, 0.8), transparent),
        radial-gradient(1px 1px at 10% 50%, rgba(245, 245, 100, 0.9), transparent),
        radial-gradient(2px 2px at 20% 90%, rgba(250, 250, 170, 0.9), transparent),
        radial-gradient(1px 1px at 85% 10%, rgba(255, 255, 150, 0.7), transparent),
        radial-gradient(1.5px 1.5px at 50% 25%, rgba(255, 255, 130, 0.7), transparent),
        radial-gradient(2px 2px at 60% 60%, rgba(255, 255, 140, 0.75), transparent),
        radial-gradient(1px 1px at 30% 60%, rgba(245, 245, 100, 0.9), transparent),
        radial-gradient(1px 1px at 70% 70%, rgba(255, 255, 170, 0.8), transparent),
        radial-gradient(2px 2px at 77% 77%, rgba(250, 250, 150, 0.7), transparent),
        radial-gradient(1px 1px at 3% 96%, rgba(255, 255, 200, 0.85), transparent);
    animation: moverEstrellas 10s linear infinite;
}

/* Movimiento sutil del fondo */
@keyframes moverEstrellas {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-10%, -10%);
    }
}

/* Contenido principal */
.contenido {
    position: relative;
    z-index: 1;
    color: white;
    padding: 50px;
    text-align: center;
}