@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Oxanium', sans-serif;
  background: linear-gradient(135deg, #0b0b0b 0%, #1a1a1a 50%, #2b0000 100%);
  color: #f8dede;
  overflow-x: hidden;
}

.orbitron {
  font-family: 'Orbitron', monospace;
}

.oxanium {
  font-family: 'Oxanium', sans-serif;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, #ff4d4d, #8b0000);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(45deg, #8b0000, #ff4d4d);
}

/* Glow effects */
.glow {
  filter: drop-shadow(0 0 10px rgba(255, 77, 77, 0.5));
}

.glow-intense {
  filter: drop-shadow(0 0 20px rgba(139, 0, 0, 0.8));
}

.text-glow {
  text-shadow: 0 0 20px rgba(255, 77, 77, 0.6);
}

.card-glow {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 77, 77, 0.1);
}

.card-glow-hover {
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4), 0 0 30px rgba(139, 0, 0, 0.3);
}

/* Background patterns */
.stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

/* Glass morphism effect */
.glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #ff0000 0%, #8b0000 50%, #ff4d4d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Utility classes */
.perspective {
  perspective: 1000px;
}

.transform-3d {
  transform-style: preserve-3d;
}

/* Glassmorphism */
.glassmorphism {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Neon glow effects */
.neon-blue {
  box-shadow: 0 0 20px rgba(255, 77, 77, 0.5);
}

.neon-purple {
  box-shadow: 0 0 20px rgba(139, 0, 0, 0.5);
}

.neon-green {
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.4);
}