body {
    margin: 0;
    /*overflow: hidden;*/ /* Prevents page scrolling */
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    z-index: 9998; /* Ensure overlay is below the loader */
    display: none; /* Hide initially */
}

.loader {
    font-family: 'Orbitron', sans-serif;
    font-size: 2rem;
    display: flex;
    gap: 0.5rem;
    animation: glow 1.5s infinite alternate;
    position: fixed; /* Use fixed positioning */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999; /* Ensure loader is on top of all other elements */
    display: none; /* Hide initially */
}

    .loader span {
        display: inline-block;
        opacity: 0;
        animation: appear 1s infinite, colorShift 2s infinite, rotate 2s infinite linear, scale 1.5s infinite alternate;
        transform: perspective(100px) rotateX(20deg) rotateY(20deg);
    }

        .loader span:nth-child(1) {
            animation-delay: 1s, 1s;
        }

        .loader span:nth-child(2) {
            animation-delay: 2s, 2s;
        }

        .loader span:nth-child(3) {
            animation-delay: 3s, 3s;
        }

        .loader span:nth-child(4) {
            animation-delay: 4s, 4s;
        }

@keyframes appear {
    0%, 100% {
        opacity: 0;
    }

    10%, 90% {
        opacity: 1;
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes scale {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.5);
    }
}

@keyframes glow {
    0% {
        text-shadow: 0 0 10px #00FFFF, 0 0 20px #00FFFF, 0 0 30px #00FFFF, 0 0 40px #00FFFF;
    }

    100% {
        text-shadow: 0 0 20px #FF00FF, 0 0 30px #FF00FF, 0 0 40px #FF00FF, 0 0 50px #FF00FF;
    }
}

@keyframes colorShift {
    0%, 100% {
        color: #00FFFF;
    }

    50% {
        color: #FF00FF;
    }
}

/* Responsive Design */
@media (max-width: 600px) {
    .loader {
        font-size: 1.5rem;
        gap: 0.3rem;
    }
}

@media (max-width: 400px) {
    .loader {
        font-size: 1rem;
        gap: 0.2rem;
    }
}