/* Main Header */
.main-header {
    display: flex;
    justify-content: center; /* Centering the text */
    font-size: 5rem; /* Ensures the text is large */
    letter-spacing: 0; /* No space between the letters */
    visibility: hidden; /* Initially hidden */
}

/* Basic Styles for Letters */
.letter {
    display: inline-block;
    opacity: 0; /* Start invisible */
    font-size: 1em; /* Keep the font size consistent with the parent container */
    animation: puzzleRearrange 2s ease forwards;
    color: inherit; /* White text */
    text-shadow: 
        0 0 5px rgba(255, 0, 0, 0.7),     /* Soft red glow */
        0 2px 10px rgba(255, 0, 0, 0.5),  /* Larger red shadow */
        0 4px 15px rgba(255, 0, 0, 0.3);  /* Fading red shadow */
    position: relative; /* Ensure correct positioning */
}

/* Puzzle Rearranging Animation */
@keyframes puzzleRearrange {
    0% {
        opacity: 0;
        transform: translate(calc(var(--random-x)), calc(var(--random-y))); /* Start from random positions */
    }
    70% {
        opacity: 1;
        transform: translate(0, 0); /* Letters come to their final position */
    }
    100% {
        opacity: 1;
        transform: translate(0, 0); /* Letters stay at their final position */
    }
}

/* Add randomness using CSS variables for each letter */
.letter:nth-child(1) { --random-x: -50px; --random-y: -30px; animation-delay: 0s; }
.letter:nth-child(2) { --random-x: 80px; --random-y: 40px; animation-delay: 0.1s; }
.letter:nth-child(3) { --random-x: -40px; --random-y: 100px; animation-delay: 0.2s; }
.letter:nth-child(4) { --random-x: 20px; --random-y: -70px; animation-delay: 0.3s; }
.letter:nth-child(5) { --random-x: 100px; --random-y: -50px; animation-delay: 0.4s; }
.letter:nth-child(6) { --random-x: -90px; --random-y: 60px; animation-delay: 0.5s; }
.letter:nth-child(7) { --random-x: 40px; --random-y: -120px; animation-delay: 0.6s; }
.letter:nth-child(8) { --random-x: -60px; --random-y: 80px; animation-delay: 0.7s; }
.letter:nth-child(9) { --random-x: 50px; --random-y: -30px; animation-delay: 0.8s; }
.letter:nth-child(10) { --random-x: -30px; --random-y: 100px; animation-delay: 0.9s; }
.letter:nth-child(11) { --random-x: 70px; --random-y: -90px; animation-delay: 1s; }
.letter:nth-child(12) { --random-x: -80px; --random-y: 40px; animation-delay: 1.1s; }
.letter:nth-child(13) { --random-x: 30px; --random-y: -60px; animation-delay: 1.2s; }
.letter:nth-child(14) { --random-x: 90px; --random-y: 50px; animation-delay: 1.3s; }
.letter:nth-child(15) { --random-x: -120px; --random-y: 30px; animation-delay: 1.4s; }
.letter:nth-child(16) { --random-x: 40px; --random-y: -80px; animation-delay: 1.5s; }
.letter:nth-child(17) { --random-x: -30px; --random-y: 50px; animation-delay: 1.6s; }
.letter:nth-child(18) { --random-x: 60px; --random-y: -40px; animation-delay: 1.7s; }
.letter:nth-child(19) { --random-x: -70px; --random-y: 10px; animation-delay: 1.8s; }
.letter:nth-child(20) { --random-x: 100px; --random-y: -60px; animation-delay: 1.9s; }
.letter:nth-child(21) { --random-x: -40px; --random-y: 20px; animation-delay: 2s; }
.letter:nth-child(22) { --random-x: 90px; --random-y: 70px; animation-delay: 2.1s; }
.letter:nth-child(23) { --random-x: -50px; --random-y: 40px; animation-delay: 2.2s; }
.letter:nth-child(24) { --random-x: 80px; --random-y: -20px; animation-delay: 2.3s; }
.letter:nth-child(25) { --random-x: -30px; --random-y: 60px; animation-delay: 2.4s; }
.letter:nth-child(26) { --random-x: 50px; --random-y: -30px; animation-delay: 2.5s; }
.letter:nth-child(27) { --random-x: -90px; --random-y: 10px; animation-delay: 2.6s; }
.letter:nth-child(28) { --random-x: 60px; --random-y: -80px; animation-delay: 2.7s; }
.letter:nth-child(29) { --random-x: -20px; --random-y: 90px; animation-delay: 2.8s; }
.letter:nth-child(30) { --random-x: 100px; --random-y: 50px; animation-delay: 2.9s; }
.letter:nth-child(31) { --random-x: -80px; --random-y: -60px; animation-delay: 3s; }
.letter:nth-child(32) { --random-x: 40px; --random-y: 80px; animation-delay: 3.1s; }
.letter:nth-child(33) { --random-x: -30px; --random-y: 40px; animation-delay: 3.2s; }
.letter:nth-child(34) { --random-x: 70px; --random-y: 10px; animation-delay: 3.3s; }
.letter:nth-child(35) { --random-x: -40px; --random-y: -70px; animation-delay: 3.4s; }
.letter:nth-child(36) { --random-x: 90px; --random-y: -40px; animation-delay: 3.5s; }
.letter:nth-child(37) { --random-x: -50px; --random-y: 30px; animation-delay: 3.6s; }
.letter:nth-child(38) { --random-x: 60px; --random-y: 50px; animation-delay: 3.7s; }
.letter:nth-child(39) { --random-x: -70px; --random-y: -30px; animation-delay: 3.8s; }
.letter:nth-child(40) { --random-x: 100px; --random-y: 90px; animation-delay: 3.9s; }
.letter:nth-child(41) { --random-x: -60px; --random-y: 20px; animation-delay: 4s; }
.letter:nth-child(42) { --random-x: 80px; --random-y: -50px; animation-delay: 4.1s; }
.letter:nth-child(43) { --random-x: -20px; --random-y: 60px; animation-delay: 4.2s; }
.letter:nth-child(44) { --random-x: 50px; --random-y: -20px; animation-delay: 4.3s; }
.letter:nth-child(45) { --random-x: -90px; --random-y: 10px; animation-delay: 4.4s; }
.letter:nth-child(46) { --random-x: 60px; --random-y: 80px; animation-delay: 4.5s; }
.letter:nth-child(47) { --random-x: -30px; --random-y: -40px; animation-delay: 4.6s; }
.letter:nth-child(48) { --random-x: 100px; --random-y: 70px; animation-delay: 4.7s; }
.letter:nth-child(49) { --random-x: -80px; --random-y: -60px; animation-delay: 4.8s; }
.letter:nth-child(50) { --random-x: -10px; --random-y: -60px; animation-delay: 4.9s; }