@keyframes gradientAnimation {
  0% {
    background: linear-gradient(45deg, green, red, black);
  }
  12.5% {
    background: linear-gradient(45deg, yellow, orange, red);
  }
  25% {
    background: linear-gradient(45deg, black, red, green);
  }
  50% {
    background: linear-gradient(45deg, yellow, blue, violet);
  }
  62.5% {
    background: linear-gradient(45deg, green, black, indigo);
  }
  75% {
    background: linear-gradient(45deg, red, orange, blue);
  }
  87.5% {
    background: linear-gradient(45deg, red, indigo, gray);
  }
  100% {
    background: linear-gradient(45deg, green, black, red);
  }
}
  @keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  body[background="animated-gradient"] {
    background: linear-gradient(270deg, #ff007f, #00ff7f, #007fff, #ff7f00, #ff00ff) no-repeat center center fixed;
    background-size: 400% 400%;
    animation: gradientAnimation 15s ease infinite;
    --text: #cdd6f4;
  }

  @keyframes gradient {
    0% {
      background: linear-gradient(45deg, green, red, black);
    }
    12.5% {
      background: linear-gradient(45deg, yellow, orange, red);
    }
    25% {
      background: linear-gradient(45deg, black, red, green);
    }
    50% {
      background: linear-gradient(45deg, yellow, blue, violet);
    }
    62.5% {
      background: linear-gradient(45deg, green, black, indigo);
    }
    75% {
      background: linear-gradient(45deg, red, orange, blue);
    }
    87.5% {
      background: linear-gradient(45deg, red, indigo, gray);
    }
    100% {
      background: linear-gradient(45deg, green, black, red);
    }
  }
body[background="CUHt"] {
    background: linear-gradient(270deg, #ff007f, #00ff7f, #007fff, #ff7f00, #ff00ff) no-repeat center center fixed;
    background-size: 400% 400%;
    animation: gradient 10s ease infinite;
    --text: #cdd6f4;
}
  body[background="cuhs3"] {
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
     url("/assets/media/background/poppingthatGTV.jpg") no-repeat center center fixed;
    background-size: cover;
    --shadow: rgba(0, 0, 0, 0.01);
    --text: #cdd6f4;
  }

  body[background="cuhs"] {
   background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    url("/assets/media/background/stadning.jpg") no-repeat center center fixed;
    background-size: cover;
    --shadow: rgba(0, 0, 0, 0.01);
    --text: #cdd6f4;
  }

  body[background="cuhs2"] {
   background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url("/assets/media/background/Pacificthatis.jpg") no-repeat center center fixed;
    background-size: cover;
    --shadow: rgba(0, 0, 0, 0.01);
    --text: #cdd6f4; 
  }

  body[background="catppuccin-frappe"] {
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
     url("/assets/media/background/skibididdy.jpg") no-repeat center center fixed;
    background-size: cover;
    --shadow: rgba(0, 0, 0, 0.01);
    --text: #cdd6f4;
  }

  body[background="catppuccin-macchiato"] {
   background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    url("/assets/media/background/rizzyaf.gif") no-repeat center center fixed;
    background-size: cover;
    --shadow: rgba(0, 0, 0, 0.01);
    --text: #cdd6f4;
  }

body[background="skibididdy"] {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
                url("/assets/media/background/thejinn.gif") no-repeat center center fixed;
    background-size: cover;
    --text: #cdd6f4;
}
body[background="waitWHAT"] {
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
                url("/assets/media/background/urealizetonight.gif") no-repeat center center fixed;
    background-size: cover;
    --text: #cdd6f4;
}

  body[background="catppuccin-moccha"] {
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), 
    url("/assets/media/background/senkbucketup.webp") no-repeat center center fixed;
    background-size: cover;
    --shadow: rgba(0, 0, 0, 0.01);
    --text: #cdd6f4;
  }
body[background="catppuccin-mocha"] {
    background-color: #000014; /* Dark Midnight Blue */
    background-size: cover; /* Ensures the background covers the entire body */
    --shadow: rgba(0, 0, 0, 0.01);
    --text: #cdd6f4;
}
body[background="catppuccin-mochaaa"] {
  background: linear-gradient(45deg, #f39c12, #8e44ad) no-repeat center center fixed;
  background-size: cover;
    --shadow: rgba(0, 0, 0, 0.01);
    --text: #cdd6f4;
}
body[background="catppuccin-mochaa"] {
  background: black no-repeat center center fixed;
  background-size: cover;
    --shadow: rgba(0, 0, 0, 0.01);
    --text: #cdd6f4;
}
  body[background="cuh"] {
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
     url("/assets/media/background/canthurtmewmyogscantnerfmesandyop.png") no-repeat center center fixed;
    background-size: cover;
    --shadow: rgba(0, 0, 0, 0.01);
    --text: #cdd6f4;

 }
body[background="gg"] {
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
                url("/assets/media/background/gg.jpg") no-repeat center center fixed;
    background-size: cover;
    --text: #cdd6f4;
} 
body[background="ggccc"] {
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
                url("/assets/media/background/ggccc.jpg") no-repeat center center fixed;
    background-size: cover;
    --text: #cdd6f4;
}
body[background="whatare"] {
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
                url("/assets/media/background/600473.png") no-repeat center center fixed;
    background-size: cover;
    --text: #cdd6f4;
}
body[background="youdoing"] {
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
                url("/assets/media/background/1330526.png") no-repeat center center fixed;
    background-size: cover;
    --text: #cdd6f4;
}
body[background="ru"] {
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
                url("/assets/media/background/1337139.png") no-repeat center center fixed;
    background-size: cover;
    --text: #cdd6f4;
}
body[background="bi"] {
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
                url("/assets/media/background/1337140.png") no-repeat center center fixed;
    background-size: cover;
    --text: #cdd6f4;
}
body[background="new"] {
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
                url("/assets/media/background/new.jpg") no-repeat center center fixed;
    background-size: cover;
    --text: #cdd6f4;
}
body[background="nnew"] {
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
                url("/assets/media/background/nnew.png") no-repeat center center fixed;
    background-size: cover;
    --text: #cdd6f4;
}
body[background="notnew"] {
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
                url("/assets/media/background/notnew.png") no-repeat center center fixed;
    background-size: cover;
    --text: #cdd6f4;
}
body[background="nnotnew"] {
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
                url("/assets/media/background/nnotnew.png") no-repeat center center fixed;
    background-size: cover;
    --text: #cdd6f4;
}
body[background="whatis"] {
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("https://cdn.shopify.com/s/files/1/1038/1798/files/31._Fluids_Dark_Blue_iPhone_Wallpaper_4k_HD.jpg?v=1707976065") no-repeat center center fixed;
    background-size: cover;
    --text: #cdd6f4;
}
body[background="defaultorg"] {
  --text: #cdd6f4;
      background: linear-gradient(rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.02)),
                url("/assets/media/background/noob.avif") no-repeat center center fixed;
    background-size: cover;
}
body[theme="defaultorg"] {
  --text: #cdd6f4;
--primary-color: #6F00FF;
--primary-light: #8B66FF;
}
body[theme="catppuccin-mochaa"] {
    --text: #cdd6f4;
  --primary-color: black;
  --primary-light: #111111;
}
body[theme="whats"] {
    --text: #cdd6f4;
  --primary-color: #000014;
  --primary-light: #001f3f;
}
/* #0a1d37 */
body[theme="whatss"] {
    --text: #cdd6f4;
  --primary-color: #555;
  --primary-light: #777;

}
body[theme="whathuzz"] {
    --text: #cdd6f4;
  --primary-color: #32CD32;
  --primary-light: #A6FF00;
}
body[theme="whatwas"] {
    --text: #cdd6f4;
  --primary-color: #f5a97f;       /* Warm peach */
  --primary-light: #f9c7ad;       /* Light warm peach */
}
body[theme="whatis"] {
    --text: #cdd6f4;
  --primary-color: #FDCB6E;
  --primary-light: #FFEAA7;
}
body[theme="whatcuhs"] {
    --text: #cdd6f4;
  --primary-color: #63b3ff;       /* Bright sky blue */
  --primary-light: #a3d1ff;       /* Lighter sky blue */
}
body[theme="whatbuzz"] {
    --text: #cdd6f4;
   --primary-color: #7cc1ff;      /* Soft sky blue */
    --primary-light: #b9d9ff;
}
body[theme="whathuhs"] {
    --text: #cdd6f4;
  --primary-color: #7cffdb;      /* Aquamarine */
  --primary-light: #b9fff0;      /* Light aquamarine */
}
body[theme="whatluhs"] {
    --text: #cdd6f4;
  --primary-color: #ff5c79;      /* Soft pink-red */
  --primary-light: #ffa1a9;      /* Light pink */
}
body[theme="whatfuhs"] {
    --text: #cdd6f4;
  --primary-color: #cdd104;  /* vivid pink */
  --primary-light: orange;  /* lighter pink */
}
body[theme="whatwuhs"] {
    --text: #cdd6f4;
  --primary-color: #7b68ee;
  --primary-light: #9a88ff;
}
/* --- Preloader Styles (Kept as is, but ensured it integrates) --- */
#preloader {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 1s ease-out;
    opacity: 1;
}

#preloader.hidden {
    opacity: 0;
    pointer-events: none;
}
.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px; /* Adjust spacing between dots */
  height: 50px; /* Adjust to match your container height */
}

.dot {
  width: 10px; /* Size of the dots */
  height: 10px;
  background-color: #ffffff; /* Dot color */
  border-radius: 50%;
  animation: bounce 1.2s infinite ease-in-out;
}

/* Apply staggered animation delays to each dot */
.dot:nth-child(1) {
  animation-delay: 0s;
}

.dot:nth-child(2) {
  animation-delay: 0.2s;
}

.dot:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes bounce {
  0%, 80%, 100% {
/*transform: scale(0);*/
    transform: translatey(0);
  }
  40% {
      /*  transform: scale(1);*/
    transform: translatey(-10px);
  }
}
.spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid #fff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite, glowingAnimation 4s ease-in-out infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes thirtytwoshots {
  0% {
    color: blue;
    text-shadow: 0 0 5px blue;
  }

  50% {
    color: red;
    text-shadow: none;
  }

  67% {
    color: black;
    text-shadow: 0 0 5px rgba(255, 255, 0, 0.5);
  }

  83% {
    color: green;
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
  }

  100% {
    color: blue;
    text-shadow: 0 0 5px blue;
  }
}
@keyframes glowingAnimation {
    0% {
        color: var(--primary-color);
    }
    100% {
        color: var(--primary-color);
    }
}
@keyframes ga {
    0% {
        background: var(--primary-light);
    }
    100% {
        background: var(--primary-light);
    }
}
@keyframes ga2 {
    0% {
background: var(--primary-color);
    }
    100% {
background: var(--primary-color);
    }
}
/*
@keyframes ga {
    0% {
        background-color: blue;
        box-shadow: 0 0 5px rgba(0, 0, 255, 0.5);
    }

    50% {
        background-color: red;
        box-shadow: none;
    }

    67% {
        background-color: black;
        box-shadow: 0 0 5px rgba(255, 255, 0, 0.5);
    }

    83% {
        background-color: green;
        box-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
    }

    100% {
        background-color: blue;
        box-shadow: 0 0 5px rgba(0, 0, 255, 0.5);
    }
}    
@keyframes _cfg {
    0% {
        color: blue;
        box-shadow: 0 0 50px rgba(0, 0, 255, 0.5);
    }
    50% {
        color: red;
        box-shadow: 0 0 50px red;
    }

    67% {
        color: black;
        box-shadow: 0 0 50px rgba(255, 255, 0, 0.5);
    }

    83% {
        color: green;
        box-shadow: 0 0 50px rgba(0, 255, 0, 0.5);
    }

    100% {
        color: blue;
        box-shadow: 0 0 50px rgba(0, 0, 255, 0.5);
    }
}*/