:root {
  --shams-bg: #020712;
  --shams-tx: #e8f0fe;
  --shams-mu: rgba(180, 200, 255, 0.55);
}

body {
  background-color: var(--shams-bg) !important;
  color: var(--shams-tx);
  min-height: 100vh;
}

#shams-bg-canvas {
  position: fixed;
  inset: 0;
  z-index: -10;
  pointer-events: none;
}

.shams-blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
  z-index: -9;
  animation: shamsBlobAnim 18s ease-in-out infinite alternate;
}

.shams-b1 {
  width: 520px;
  height: 520px;
  top: -160px;
  right: -120px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.18) 0%, transparent 70%);
}

.shams-b2 {
  width: 400px;
  height: 400px;
  bottom: -80px;
  left: -90px;
  background: radial-gradient(circle, rgba(245, 197, 24, 0.14) 0%, transparent 70%);
  animation-delay: -7s;
}

.shams-b3 {
  width: 280px;
  height: 280px;
  top: 45%;
  left: 40%;
  background: radial-gradient(circle, rgba(120, 60, 255, 0.13) 0%, transparent 70%);
  animation-delay: -13s;
}

@keyframes shamsBlobAnim {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(28px, 38px) scale(1.07);
  }
}