/* Write your custom CSS here *//* The background blur overlay */

/* The loader itself */
.loader {
  width: 60px;
  aspect-ratio: 1;
  background: 
    linear-gradient(45deg, #60B99A 50%, #0000 0),
    linear-gradient(45deg, #0000 50%, #60B99A 0),
    linear-gradient(-45deg, #f77825 50%, #0000 0),
    linear-gradient(-45deg, #0000 50%, #f77825 0),
    linear-gradient(#554236 0 0);
  background-size: 50% 50%;
  background-repeat: no-repeat;
  animation: l18 1.5s infinite;
  
  position: fixed; /* Position fixed to viewport */
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Offset by half of its size to truly center it */
  z-index: 9999; /* Ensure it stays on top of other elements */
}

/* Keyframes for loader animation */
@keyframes l18 {
  0%   {background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%}
  25%  {background-position: 0 100%, 100% 0, 50% 50%, 50% 50%, 50% 50%}
  50%  {background-position: 0 100%, 100% 0, 100% 100%, 0 0, 50% 50%}
  75%  {background-position: 50% 50%, 50% 50%, 100% 100%, 0 0, 50% 50%}
  100% {background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%}
}