:root {
  --ds-surface: #000000;
  --ds-surface-variant: #0f172a;
  --ds-on-surface: #e2e8f0;
  --ds-on-surface-variant: #cbd5e1;
  --ds-surface-container: rgba(30, 144, 255, 0.27);
  --ds-surface-container-high: #334155;
  --ds-surface-container-low: #0f172a;
  --ds-on-surface-container: #e2e8f0;
  --ds-surface-backdrop-filter: blur(7.5px);
  --ds-surface-box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  --ds-primary: #0f6fec;
  --ds-primary-container: #0f6fec;
  --ds-on-primary: #ffffff;
  --ds-on-primary-container: #ffffff;
  --ds-primary-variant: #1E90FF;
  --ds-secondary: #64748b;
  --ds-secondary-container: #475569;
  --ds-on-secondary: #ffffff;
  --ds-on-secondary-container: #e2e8f0;
  --ds-secondary-variant: #94a3b8;
  --ds-tertiary: #f59e0b;
  --ds-tertiary-container: #fbbf24;
  --ds-on-tertiary: #ffffff;
  --ds-on-tertiary-container: #78350f;
  --ds-tertiary-variant: #fcd34d;
  --ds-error: #ef4444;
  --ds-error-container: #fca5a5;
  --ds-on-error: #ffffff;
  --ds-on-error-container: #7f1d1d;
  --ds-error-variant: #f87171;
  --ds-success: #22c55e;
  --ds-success-container: #86efac;
  --ds-on-success: #ffffff;
  --ds-on-success-container: #14532d;
  --ds-success-variant: #4ade80;
  --ds-warning: #f59e0b;
  --ds-warning-container: #fcd34d;
  --ds-on-warning: #ffffff;
  --ds-on-warning-container: #78350f;
  --ds-warning-variant: #fbbf24;
  --ds-info: #3b82f6;
  --ds-info-container: #93c5fd;
  --ds-on-info: #ffffff;
  --ds-on-info-container: #1e3a8a;
  --ds-info-variant: #60a5fa;
  --ds-outline: hsla(0, 0%, 100%, 0.18);
  --ds-outline-variant: #64748b;
  --ds-hover-state-layer: rgba(255, 255, 255, 0.05);
  --ds-focus-state-layer: rgba(15, 111, 236, 0.12);
  --ds-pressed-state-layer: rgba(255, 255, 255, 0.1);
  --ds-backdrop-blur: blur(10px);
  --ds-backdrop-blur-sm: blur(4px);
  --ds-backdrop-blur-md: blur(8px);
  --ds-backdrop-blur-lg: blur(16px);
  --ds-backdrop-blur-xl: blur(24px);
  --ds-backdrop-saturation: saturate(180%);
  --ds-backdrop-brightness: brightness(1.1);
  --ds-bg-opacity-surface: 0.8;
  --ds-bg-opacity-surface-container: 0.9;
  --ds-bg-opacity-surface-container-high: 0.95;
  --ds-bg-opacity-overlay: 0.6;
  --ds-bg-opacity-hover: 0.1;
  --ds-bg-opacity-active: 0.2;
}

.app-background {
  background-image: linear-gradient(to top, #1f2937, #111827, #000000);
}
.app-background:before {
  content: "";
  height: 200%;
  top: 0;
  background-image: url("/underical-bg.webp");
  position: fixed;
  background-size: 100%;
  right: 0;
  background-repeat: no-repeat;
  opacity: 25%;
  pointer-events: none;
  z-index: 0;
}
@media (min-width: 1024px) {
  .app-background:before {
    width: 150%;
  }
}
@media (max-width: 1024px) and (min-width: 768px) {
  .app-background:before {
    width: 160%;
  }
}
@media (max-width: 768px) {
  .app-background:before {
    width: 250%;
  }
}