v{
    position: absolute;
    width: 4px;
    height: 4px;
    background: #DE3710;
    /* pointer-events: none; */
    animation: animate 2s linear forwards;
}

@keyframes animate
{
    0%{
        opacity: 1;
        transform: translate(0, 0);
    }
    100%{
        opacity: 0;
        transform: translate(var(--x), var(--y));
    }
}


.loader {
      position: fixed; /* Cover the entire viewport */
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: white; /* Overlay background */
      display: flex; /* Use flexbox to center its content (the "Loading..." text and animation) */
      justify-content: center;
      align-items: center;
      z-index: 9999; /* Ensure it's on top of all other content */

      /* Original loader text styles - applied directly to the .loader div */
      font-family: helvetica, arial, sans-serif;
      text-transform: uppercase;
      font-weight: 900;
      color: #DE3710;
      letter-spacing: 0.2em;
      min-width: 250px; /* Ensure enough space for the animation to play out */
      text-align: center; /* Center the text within its flex item space */
      line-height: 50px; /* Vertically align text if loader height is 50px */
    }

    /* Pseudo-elements for the animation, now positioned relative to the .loader flex item */
    .loader::before,
    .loader::after {
      content: "";
      display: block;
      width: 15px;
      height: 15px;
      background: #DE3710;
      position: absolute; /* Position absolute relative to the .loader container */
      animation: load 0.7s infinite alternate ease-in-out;
    }

    .loader::before {
      top: 0;
      left: 0; /* Start from the left edge of the .loader content area */
    }

    .loader::after {
      bottom: 0;
      /* Position at the right edge of the .loader content area.
         calc(100% - 15px) ensures it's responsive to the .loader's actual width. */
      left: calc(100% - 15px);
    }

    @keyframes load {
      0% { left: 0; height: 30px; width: 15px }
      50% { height: 8px; width: 40px }
      100% { left: calc(100% - 15px); height: 30px; width: 15px} /* Adjusted for responsiveness */
    }

    /* Initially hide the main content until the loader is done */
    #content {
      display: none;
    }