body {
    background: url("../../assets/backgrounds/fototierra.jpg") no-repeat center center fixed;
    background-size: cover;
    background-attachment: fixed;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center, rgba(0,0,20,0.4), rgba(0,0,0,0.9));
    z-index: -2;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 30% 50%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1.5px 1.5px at 50% 10%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 70% 30%, rgba(255,255,255,0.3), transparent),
        radial-gradient(1px 1px at 90% 60%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1.2px 1.2px at 20% 80%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.5px 1.5px at 80% 90%, rgba(255,255,255,0.3), transparent),
        radial-gradient(1px 1px at 40% 40%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 15% 65%, rgba(255,255,255,0.4), transparent);
    opacity: 0.2;
    animation: stars 200s linear infinite;
    z-index: -1;
}

@keyframes stars {
    from { transform: translateY(0) translateX(0); }
    to { transform: translateY(-2000px) translateX(30px); }
}

@media (max-width: 768px) {
    body {
        background-attachment: scroll;
    }

    body::after {
        animation: none;
    }
}