body {
    margin: 0;
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(120deg, #000428, #004e92);
    font-family: 'Arial', sans-serif;
    overflow: hidden;
    opacity: 0; /* Initially hide the body */
    transition: opacity 1s ease-in-out; /* Smooth transition for 1 second */
}

body.loaded {
    opacity: 1; /* Make body visible */
}

.progress-text {
    font-size: 3rem;
    text-align: center;
    color: #ffffff;
    animation: glow 2s ease-in-out infinite alternate;
    z-index: 10;
    position: relative;
}

@keyframes glow {
    from {
        text-shadow: 0 0 5px #fff, 0 0 10px #00eaff,
        0 0 20px #00eaff, 0 0 30px #00eaff;
    }
    to {
        text-shadow: 0 0 10px #ff7aff, 0 0 20px #ff7aff,
        0 0 40px #ff7aff, 0 0 50px #ff7aff;
    }
}

@keyframes glowXO {
    from {
        text-shadow: 0 0 5px #fff, 0 0 10px #dfe235,
        0 0 20px #dfe235, 0 0 30px #dfe235;
    }
    to {
        text-shadow: 0 0 10px #c4122f, 0 0 20px #c4122f,
        0 0 40px #c4122f, 0 0 50px #c4122f;
    }
}

#movingXO {
    position: absolute;
    font-size: 50px;
    display: inline-block; /* Allows for setting width and height */
    width: 50px; /* Fixed width to match widest letter and prevent double-triggering when collision with right wall */
    text-align: center; /* Center the letter */
    cursor: help;
    color: #4d0404;
    animation: glowXO 2s ease-in-out infinite alternate;
}