html, body {
    margin: 0;
    padding: 0;
    height: auto;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    color: white;
    overflow-x: hidden;
    width: 100%;
    height: 100%;
}
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {

  body {
      background:
          radial-gradient(circle at 20% 30%, rgba(65, 140, 255, 0.28), transparent 45%),
          radial-gradient(circle at 80% 70%, rgba(100, 80, 220, 0.32), transparent 45%),
          linear-gradient(135deg, #0b1435, #26104a 45%, #071f40);
      color: white;
      transition: background 0.6s ease;
      background-size: 200% 200%;
      animation: ambientShift 10s ease-in-out infinite;
  }
        body, html {

            background-color: #08081a; 
        }
        html {
            overflow: hidden;
        }

        .animated-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(125deg, #0a0a25, #250b4d, #3b0b3b, #002b55, #550e35);
            background-size: 400% 400%;
            animation: gradientFlow 15s ease infinite;
            z-index: 1;
        }

        @keyframes gradientFlow {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        .glow-overlay {
            position: absolute;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 20% 30%, rgba(0, 212, 255, 0.25) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(255, 0, 200, 0.25) 0%, transparent 50%);
            z-index: 2;
            mix-blend-mode: screen;
            opacity: 0.9;
        }

        #particleCanvas {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 3;
            pointer-events: none;
            overflow: hidden;
        }

  @keyframes ambientShift {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
  }

  * {
      scrollbar-width: thin !important;
      scrollbar-color: rgba(255, 255, 255, 0.4) rgb(43 31 93) !important;
  }

  *::-webkit-scrollbar {
      width: 8px !important;
      height: 8px !important;
  }

  *::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.08) !important;
  }

  *::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.55) !important;
      border-radius: 6px !important;
      border: 2px solid rgba(0,0,0,0.06) !important;
  }

  *::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, 0.6) !important;
  }

}
@media (hover: none) and (pointer: coarse), (max-width: 1023px) {

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: white;
    background: linear-gradient(135deg, #084192, #63078b);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    transition: background 0.3s linear;
}

html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y:visible;
    -webkit-overflow-scrolling: touch;
}

* {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255,255,255,0.55) rgba(99,7,139) !important;
}

*::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}
*::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.08) !important;
}
*::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.55) !important;
  border-radius: 6px !important;
  border: 2px solid rgba(0,0,0,0.06) !important;
}
*::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.6) !important;
}
}